{ "id": "v1-wk-3335", "long_id": "v1.wiki-2000s.docs.s03.p03.t03.u05", "name": "How-to wiki, top navigation and numbered steps, 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": "docs", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the friendlier wiki of the later 2000s, the how-to manual or project handbook that ran on a different engine from the encyclopaedias: a coloured bar across the top with the name, the sections as tabs and a search box, and under it one wide column with a rail of link boxes at the right instead of a side column at the left. Pages are white sheets with softly rounded corners, section titles sit in rounded tinted strips, steps are numbered with round badges, and tips and warnings are boxes with a coloured left bar. Text is 14px Helvetica or Arial with plain blue links; there are no shadows and no motion.", "url": "https://chrono.skin/s/v1-wk-3335", "preview_url": "https://chrono.skin/s/v1-wk-3335/specimen.html", "files": { "STYLE.md": "# How-to wiki, top navigation and numbered steps, 2003 to 2010\n\n## Summary\n\nThis is the friendlier wiki of the later 2000s, the how-to manual or project handbook that ran on a different engine from the encyclopaedias: a coloured bar across the top with the name, the sections as tabs and a search box, and under it one wide column with a rail of link boxes at the right instead of a side column at the left. Pages are white sheets with softly rounded corners, section titles sit in rounded tinted strips, steps are numbered with round badges, and tips and warnings are boxes with a coloured left bar. Text is 14px Helvetica or Arial with plain blue links; there are no shadows and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; the header runs edge to edge and `.ds-page__frame` has `--space-6` (24px) at the sides. Designed at 1024px; it does not reflow for phones.\n- Order from the top: the header `.ds-nav` (the bar `.ds-nav__bar` with brand, section tabs and search; the strip `.ds-nav__sub` with the tagline at the left and account links at the right); `.ds-page__frame` with the current view; the footer band, edge to edge. No text sits on the page colour: everything is on a sheet, a box or a band.\n- Navigation is at the top, never in a left column. A view that needs side links uses `.ds-layout`: a fluid main column and a `--size-rail` (216px) rail `.ds-sidebar` at the right, `--space-5` (16px) apart.\n- Views. The specimen is a five-screen example how-to manual; the bar has one tab per view and the current one takes the sheet colour. `home` is the home page: welcome sheet with the three figures, spotlight box, category cells, newest guides, and the rail. `guide` is one guide: trail, page tabs joined to the sheet, title, needs table, numbered steps, a tip and a warning, related guides, and the rail. `changes` is the recent changes list by day with paging. `search` is the results page: search line, the \"no such title\" box and the matching guides. `write` is the new-guide form with its error notice, buttons and the discard confirmation, beside a rail of help.\n- Inner pages (every view but `home`) start with `.ds-breadcrumb` (a white bordered line), then a `.ds-sheet` that opens with `.ds-page-header` in place of the welcome sheet (title and one muted line at the left, buttons at the right, no rule). A page with several faces puts `.ds-tabs` directly above the sheet and marks the sheet `.ds-sheet--tabbed`. Blocks in a sheet are `--space-5` apart; blocks in a view `--space-4`.\n- Category cells are three to a row. Form rows are a right-aligned `--size-label` (150px) label and the field; inputs are `--size-field` (340px); the bar search field `--size-search` (170px). The spotlight picture is `--size-thumb` (150px). A dialog is `--size-dialog` (430px) wide, in a tinted band in the flow.\n- Spacing scale: `--space-1` 2px, `--space-2` 4px, `--space-3` 8px, `--space-4` 12px, `--space-5` 16px, `--space-6` 24px, `--space-7` 32px.\n - `--space-1`: gap between bar tabs, padding of rail rows and page numbers.\n - `--space-2`: vertical padding of tabs, strips, buttons, inputs and table cells.\n - `--space-3`: gap between buttons, cells and figures; padding of cells and notices.\n - `--space-4`: horizontal padding of cells, strips and buttons; gap between blocks of a view; padding of rail boxes.\n - `--space-5`: gap between main column and rail, between blocks in a sheet, top padding of a sheet.\n - `--space-6`: side padding of the page, the bar and a sheet; padding of the welcome sheet.\n - `--space-7`: reserved for a wider break between page regions.\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, heading and link colours 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`.\n- `--color-page` is a pale green tint, slightly darker at the top through `--fill-page`; sheets, rail boxes, lists and the breadcrumb are `--color-canvas` (white). `--color-surface-alt` (light green) fills section strips, figures, idle tabs, day rows and the search line; `--color-surface-strong` the table head; `--color-surface` the empty state and table foot.\n- `--fill-bar` (leaf green) with white `--color-bar-text` is the top bar, the step numbers and the current page number; `--color-bar` also rules rail titles and the table head. `--fill-bar-alt` (pale blue) with dark blue `--color-bar-alt-text` is the strip under the bar. `--fill-inverse` (dark green) with `--color-inverse-text` is the footer band.\n- `--color-heading` is near black; `--color-heading-alt` (dark green) is for section strips, panel titles, figures and third-level headings. Links are `--color-link` (blue), tool and author links `--color-link-quiet` (green); a missing page is `.ds-link--new` in `--color-danger`.\n- `--color-border` (#dddddd) outlines sheets, boxes and cells; `--color-border-muted` rules rows inside them; `--color-border-strong` outlines secondary buttons, the current bar tab and the dialog.\n- `--color-fill-1` to `--color-fill-4` are the pale blue, green, yellow and grey of the category cells; the spotlight box is `--color-fill-1` and search matches are marked with `--color-fill-3`. `--color-notice` (pale blue) is the tip box, with a `--color-success` left bar.\n- `--color-accent` (orange) with white `--color-accent-text` is the count badge only.\n- One family for everything: `--font-body`, `--font-heading` and `--font-ui` are the same Helvetica and Arial stack; headings are bold. `--font-mono` is for code and times.\n- Sizes: `--text-base` 14px; `--text-small` 12px for meta, rails, the strip and the footer; `--text-ui` 13px for tabs, buttons and inputs; `--text-large` 16px for the lead, result titles and rail titles; `--text-h3` 14px, `--text-h2` 18px, `--text-h1` 26px for page titles, figures and the wordmark; `--text-display` 32px for the welcome title only. Line height `--line-body` 1.5.\n- Corners are rounded by the surface set: `--radius-control` 4px on buttons, inputs and notices, `--radius-panel` 6px on boxes, `--radius-page` 8px on sheets, tabs and cells, and `--radius-pill` on badges, section strips and step numbers, which makes the numbers round.\n- One-off choices outside the token set: the primary button's outline is `--color-button` mixed with 30% of `--color-shadow`; the notice's left bar is `calc(var(--border-width-strong) * 3)`; status badges are a 14 to 20% `color-mix()` of the status colour over `--color-surface`; an invalid field has a `--border-width-strong` outline.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__frame` holds the views. Each `.ds-view` has a `.ds-view__body` column; `.ds-layout` with `.ds-layout__main` adds the rail; `.ds-sheet` (`--tabbed` under a tab row) is the white sheet. `.ds-sprite` hides the SVG symbol sheet.\n- `.ds-nav`: the header. `.ds-nav__bar` holds the brand, `.ds-nav__menu` (tabs `.ds-nav__link`, the current one `is-current` in the sheet colour) and `.ds-nav__search` with its `.ds-nav__field`. `.ds-nav__sub` is the strip with `.ds-nav__tagline` and the `.ds-nav__tools` list of `.ds-nav__sublink` items.\n- `.ds-brand`: the mark and name at the left of the bar. `.ds-brand__mark` is a tile 1.35 times `--text-h1`, 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-breadcrumb`: a white bordered line under the header: `.ds-breadcrumb__link`, `.ds-breadcrumb__sep`, bold `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome sheet of the home page: `.ds-hero__title` at the display size, `.ds-hero__lead`, two large buttons in `.ds-hero__action`, and the figures at the right.\n- `.ds-stat`: the row; three `.ds-stat__item` tiles, each a large green `.ds-stat__value` over a small `.ds-stat__label`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__desc`, and `.ds-page-header__action` with one or two buttons.\n- `.ds-section`: a section title in a rounded tinted strip.\n- `.ds-panel`: the spotlight box in the first fill: a white rounded `.ds-panel__title` strip and a `.ds-panel__body` of a framed `.ds-panel__thumb` beside a `.ds-panel__name` link and `.ds-panel__line` paragraphs.\n- `.ds-grid`: category cells three to a row: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a bold `.ds-grid__name` and `.ds-grid__meta`.\n- `.ds-list`: a bordered list of rows: `.ds-list__item` is time (`.ds-list__time`), a `.ds-list__title` with a `.ds-list__meta` line, and a right `.ds-list__aside`. `.ds-list__day` is a tinted date row; `.ds-list__plus` and `.ds-list__minus` colour byte changes.\n- `.ds-sidebar`: the rail. Each `.ds-sidebar__block` is a white box with a `.ds-sidebar__title` on a bar-coloured rule and a bulleted `.ds-sidebar__list` of `.ds-sidebar__item` rows.\n- `.ds-tabs`: the faces of one page (guide, discuss, edit, history), rounded at the top and joined to the sheet below; `.ds-tabs__tab`, `is-current` in the sheet colour.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, strong, code. `.ds-edit` is a small edit link inside a heading.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--new` for a missing page, `.ds-link--quiet` for tool and author links, `.ds-link--strong` for bold.\n- `.ds-steps`: the numbered steps of a guide. Each `.ds-steps__item` has a `.ds-steps__num` badge in the bar fill, a bold `.ds-steps__title` and a `.ds-steps__text`. Write the number in the markup.\n- `.ds-table`: a light table: tinted head on a bar-coloured rule, rows divided by faint rules; `.ds-table__num` right-aligns numbers, `.ds-table__foot` is a bold total row.\n- `.ds-badge`: an orange pill for counts and marks. `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are tinted status pills with a 1px outline in the status colour.\n- `.ds-notice`: a tip box with a thick left bar in `--color-success`; `.ds-notice--error` is the warning or error box with the bar in `--color-danger`. `.ds-notice__title` is the bold first word, `.ds-notice__link` an underlined link in the text colour.\n- `.ds-pagination`: a line of rounded `.ds-pagination__link` boxes (`is-current` in the bar fill) with a right-aligned `.ds-pagination__label`.\n- `.ds-button`: primary action. `.ds-button--secondary` is the grey button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--large` for the welcome sheet. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-form`: rows of a right-aligned `.ds-form__label` and a field. Controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), with `.ds-form__error` and `.ds-form__hint`; `.ds-form__check` and `.ds-form__checkbox`; buttons in `.ds-form__actions` under a faint rule. `.ds-searchbar` with `.ds-searchbar__field` is the one-line search form.\n- `.ds-results`: search results: `.ds-results__title`, `.ds-results__text` with `.ds-results__match` marks, `.ds-results__meta`.\n- `.ds-dialog`: a confirmation box in the page flow inside the tinted `.ds-dialog__backdrop`: `.ds-dialog__title`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a pale bordered box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the inverted band at the foot: `.ds-footer__text` and a `.ds-footer__row` of bold underlined `.ds-footer__link` items.\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- `block-gap <= 32px`: blocks are 12 to 16px apart.\n- `content-width >= 85%`: the page fills the window.\n- `font-size <= 32px`: the welcome title, 32px, is the largest text.\n- `font-size >= 12px`: meta text is 12px; nothing is smaller.\n- `font-families <= 2`: one sans-serif stack, plus monospace.\n- `letter-spacing <= 1px`: at most 1px of tracking was measured; this pack uses none.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `line-height <= 1.6`: body text is set at 1.5.\n- `border-radius <= 9px`: corners are 3px; only badges and label tags are rounder.\n- `box-shadow-blur <= 10px`: only the dialog casts a shadow, 10px 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`: outlines are 1px; the tab rule and counter edge are 3px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new rail box from `.ds-sidebar__block`, a tinted feature box from `.ds-panel`, a row layout from `.ds-list`, a message from `.ds-notice`, a numbered procedure from `.ds-steps`. Put it on a `.ds-sheet` or give it a 1px `--color-border` outline on `--color-canvas` with `--radius-panel`, keep text on fills as the era's conventions say, and use tokens only: no raw colours or lengths, no shadow or transition, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). Column widths, gaps and paddings measured\n on how-to and project wiki pages captured 2007 to 2008. */\n:root {\n --size-page: 100%;\n --size-rail: 216px;\n --size-search: 170px;\n --size-thumb: 150px;\n --size-field: 340px;\n --size-label: 150px;\n --size-dialog: 430px;\n --space-1: 2px;\n --space-2: 4px;\n --space-3: 8px;\n --space-4: 12px;\n --space-5: 16px;\n --space-6: 24px;\n --space-7: 32px;\n}\n\n/* ---------- shell: a bar across the top, then one fluid column ---------- */\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-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\n padding: var(--space-4) var(--space-6) var(--space-6);\n}\n.ds-sprite {\n position: absolute;\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-4);\n}\n/* Main column and a rail at the right. */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-rail);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-layout__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n/* The white sheet a page is written on. */\n.ds-sheet {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\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 box-shadow: var(--shadow-panel);\n}\n.ds-sheet--tabbed {\n border-top-left-radius: 0;\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.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/* 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/* ---------- nav: the top bar and the strip under it ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__bar {\n display: flex;\n align-items: flex-end;\n gap: var(--space-6);\n padding: var(--space-4) var(--space-6) 0;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n}\n/* The site's mark and name. The tile is dressed like the primary button. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n padding: 0 0 var(--space-3);\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-h1) * 1.35);\n height: calc(var(--text-h1) * 1.35);\n box-sizing: border-box;\n background: var(--color-button);\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-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__menu {\n display: flex;\n flex: 1 1 0;\n flex-wrap: wrap;\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 line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) transparent;\n border-bottom: 0;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: var(--link-decoration-hover);\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/* The current view's item, and the home item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] {\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(#home:target) .ds-nav__link[href=\"#home\"] {\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(#guide:target) .ds-nav__link[href=\"#guide\"] {\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(#changes:target) .ds-nav__link[href=\"#changes\"] {\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(#search:target) .ds-nav__link[href=\"#search\"] {\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(#write:target) .ds-nav__link[href=\"#write\"] {\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 flex: none;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0 0 var(--space-3);\n}\n.ds-nav__search .ds-nav__field {\n width: var(--size-search);\n}\n.ds-nav__sub {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: var(--space-2) var(--space-6);\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-size: var(--text-small);\n}\n.ds-nav__tagline {\n font-weight: var(--weight-bold);\n}\n.ds-nav__tools {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__sublink {\n color: var(--color-bar-alt-text);\n text-decoration: underline;\n}\n\n/* ---------- breadcrumb: an open trail under the strip ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__link {\n color: var(--color-link);\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__sep {\n color: var(--color-text-muted);\n font-weight: var(--weight-bold);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- hero: the welcome sheet of the home page ---------- */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: var(--space-6);\n align-items: center;\n padding: 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 box-shadow: var(--shadow-panel);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-3);\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: 0 0 var(--space-4);\n max-width: 68ch;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- stats: three figures beside the welcome text ---------- */\n.ds-stat {\n display: flex;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-stat__item {\n min-width: 9ch;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-stat__value {\n display: block;\n margin: 0;\n color: var(--color-heading-alt);\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 font-size: var(--text-small);\n color: var(--color-text-muted);\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}\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}\n.ds-page-header__action {\n flex: none;\n display: flex;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- section title: a rounded tinted strip ---------- */\n.ds-section {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* ---------- panel: the spotlight box ---------- */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-panel);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel__body {\n display: grid;\n grid-template-columns: var(--size-thumb) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-panel__thumb {\n display: block;\n padding: var(--space-2);\n background: var(--color-canvas);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__thumb svg {\n display: block;\n width: 100%;\n background: var(--color-surface-alt);\n}\n.ds-panel__name {\n display: block;\n margin: 0 0 var(--space-3);\n color: var(--color-link);\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 text-decoration: var(--link-decoration-quiet);\n}\n.ds-panel__name:hover,\n.ds-panel__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n\n/* ---------- grid: the category cells ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n padding: var(--space-3) var(--space-4);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\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__name {\n color: var(--color-link);\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 display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- list: rows with a meta line ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-list__day {\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\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: baseline;\n padding: var(--space-3) 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__time {\n min-width: 5ch;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__title {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__aside {\n font-size: var(--text-small);\n text-align: right;\n white-space: nowrap;\n}\n.ds-list__plus {\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n.ds-list__minus {\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- sidebar: the rail at the right ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-sidebar__block {\n padding: var(--space-4);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-2);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n\n/* ---------- tabs: rounded, joined to the sheet ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0 0 calc(var(--border-width) * -1 - var(--space-4));\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-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-radius: var(--radius-page) var(--radius-page) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n position: relative;\n background: var(--color-canvas);\n color: var(--color-heading);\n border-bottom-color: var(--color-canvas);\n font-weight: var(--weight-bold);\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-3);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-5) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-4) 0 var(--space-2);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n padding: 0 0 0 var(--space-6);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-2);\n background: var(--color-surface-alt);\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-4);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- steps: numbered, with round numbers ---------- */\n.ds-steps {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-steps__item {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: var(--space-4);\n padding: var(--space-4) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-steps__item:last-child {\n border-bottom: 0;\n}\n.ds-steps__num {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-h2) * 1.8);\n height: calc(var(--text-h2) * 1.8);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: var(--shadow-text);\n font-family: var(--font-heading);\n padding-bottom: calc(var(--figure-shift) * 2);\n}\n.ds-steps__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-steps__text {\n margin: var(--space-1) 0 0;\n}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: collapse;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\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(--color-surface-strong);\n color: var(--color-heading);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-bar);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n white-space: nowrap;\n}\n.ds-table .ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__foot td {\n background: var(--color-surface);\n font-weight: var(--weight-bold);\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-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n/* Status labels: a tint of the status colour over the surface. */\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) var(--border-style) 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) 20%, 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: tip and warning boxes ---------- */\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) var(--color-border);\n border-left: calc(var(--border-width-strong) * 3) var(--border-style) var(--color-success);\n border-radius: var(--radius-control);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-left-color: var(--color-danger);\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-size: var(--text-ui);\n}\n.ds-pagination__label {\n margin: 0 0 0 auto;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n min-width: 2ch;\n padding: var(--space-1) var(--space-3);\n background: var(--color-canvas);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n text-align: center;\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.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}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\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) color-mix(in srgb, var(--color-button), var(--color-shadow) 30%);\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-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\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-border-strong);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-input-border);\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--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-large);\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: labels at the left of each field ---------- */\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-4);\n align-items: start;\n}\n.ds-form__label {\n padding: var(--space-2) 0 0;\n font-weight: var(--weight-bold);\n text-align: right;\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-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 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--wide {\n width: 100%;\n}\n.ds-form__input--auto {\n width: auto;\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 border-width: var(--border-width-strong);\n}\n.ds-form__error {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n margin: var(--space-2) 0 0;\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-3);\n padding: var(--space-2) 0 0;\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 padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n/* The one-line search form above the results. */\n.ds-searchbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-searchbar__field {\n flex: 1 1 0;\n}\n\n/* ---------- search results ---------- */\n.ds-results {\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-results__title {\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-results__title:hover,\n.ds-results__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-results__text {\n margin: var(--space-1) 0;\n}\n.ds-results__match {\n background: var(--color-fill-3);\n font-weight: var(--weight-bold);\n}\n.ds-results__meta {\n font-size: var(--text-small);\n color: var(--color-link-quiet);\n}\n\n/* ---------- dialog: a boxed question in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\n background: var(--color-overlay);\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 padding: var(--space-5);\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 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-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);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n\n/* ---------- footer: an inverted band across the page ---------- */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-3) var(--space-6);\n padding: var(--space-5) var(--space-6);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\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-2) 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 font-weight: var(--weight-bold);\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: how-to wiki specimen\n\n\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 The bicycle repair manual that anyone can edit\n \n
\n
\n\n
\n\n \n
\n
\n\n
\n
\n

Welcome to chronoskin

\n

A shared workshop manual for keeping bicycles on the road. Every guide is written step by step by riders and mechanics, and every one of them can be improved by you.

\n

Write a guide Read a random guide

\n
\n
\n
3,142
guides
\n
871
authors
\n
64
edits today
\n
\n
\n\n
\n
\n\n
\n
\n

Spotlight guide

\n
\n \n
\n How to patch an inner tube\n

A flat tyre ends more rides than anything else, and fixing one takes ten minutes once you have done it twice. This guide walks through finding the hole, roughing the rubber, and seating the tyre again without pinching the tube.

\n

Read on...   5 steps Checked by 4 editors

\n
\n
\n
\n\n

Categories

\n \n\n

Newest guides

\n \n
\n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Wheels and tyres
    4. \n
  4. >
    5. \n
  5. Patch an inner tube
    6. \n
\n\n
\n
\n
\n \n
\n
\n
\n

How to patch an inner tube

\n

5 steps · about 15 minutes · Easy · last edited today by Joss

\n
Tools you need [show]

Tyre levers, a patch kit, a pump and chalk. A bowl of water helps to find the hole.

See also bead seatThe ledge of the rim where the tyre bead sits when it is inflated.
\n
\n

Edit this guide

\n
\n\n
\n

A puncture is the most common roadside failure and the cheapest to mend. With a patch kit and two tyre levers you can be riding again in a quarter of an hour. These steps are for a tube with a small hole; a split longer than 5 mm or a cut at the valve means a new tube.

\n

Things you will need

\n
\n\n \n \n \n \n \n \n \n \n \n \n \n
ItemNotesQuantityCost
Tyre leversPlastic, not metal23.00
Patch kitPatches, glue, sandpaper12.50
PumpWith the right valve head112.00
Chalk or a penTo mark the hole10.20
Total517.70
\n\n

Steps

\n
    \n
  1. 1
    Take the wheel off and let out the remaining air.

    Open the brake release first so the tyre clears the blocks. Press the valve core until the tube is fully soft.

    2. \n
  2. 2
    Lever one side of the tyre over the rim.

    Start opposite the valve. Hook the first lever under the bead and onto a spoke, then run the second lever around the rim.

    3. \n
  3. 3
    Pull the tube out and find the hole.

    Pump the tube up and listen, or pass it close to your lips to feel the air. Mark the spot with chalk.

    4. \n
  4. 4
    Roughen, glue, wait, then press the patch on.

    Sand an area a little larger than the patch. Spread a thin film of glue and let it go dull, about three minutes, before the patch touches it.

    5. \n
  5. 5
    Check the inside of the tyre, refit and inflate.

    Run your fingers around the casing for the thorn or glass that did the damage. Seat the bead by hand and pump to the pressure printed on the side wall.

    6. \n
\n\n
\n

Tip: Line up the tyre label with the valve when you refit. Next time, the position of the hole in the tube tells you where to look in the tyre. More tips.

\n

Warning: Never use a screwdriver as a tyre lever. It will pinch the new tube and can dent an alloy rim.

\n
\n\n
\n

Related guides

\n \n
\n
\n
\n
\n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Special pages
    4. \n
  4. >
    5. \n
  5. Recent changes
    6. \n
\n
\n
\n
\n

Recent changes

\n

The last 50 changes in the last 7 days. N marks a new guide, m a minor edit.

\n
Filter changes
\n
\n

Hide minor edits Only my watchlist

\n
\n\n \n\n \n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Special pages
    4. \n
  4. >
    5. \n
  5. Search
    6. \n
\n
\n
\n
\n

Search results

\n

You searched for \"true a wheel\". 23 guides mention it; the best 4 are shown.

\n
\n

Browse categories

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

There is no guide called \"True a wheel\"

\n

Nobody has written a guide with exactly this title yet. You can start it now, or look through the guides below that mention the same words.

\n Write this guide\n
\n\n

Guides that mention it

\n
    \n
  1. How to true a wheel with zip ties\n

    ...fix two zip ties to the fork so that their tails just touch the rim. Spin the wheel and true it a quarter turn at a time where the wheel rubs...

    \n Wheels and tyres · 3.4 kB · edited today
    2. \n
  2. How to replace a spoke\n

    ...thread the new spoke the same way as its neighbours, then true the wheel before you refit the tyre...

    \n Wheels and tyres · 5.1 kB · edited 3 days ago
    3. \n
  3. How to check a second-hand bicycle\n

    ...lift each end and spin the wheel. If the rim wanders more than a few millimetres it will need to be made true or rebuilt...

    \n Everything else · 7.8 kB · edited last week
    4. \n
  4. How to fit rim brakes\n

    ...the blocks cannot be set evenly unless the wheel runs true, so check that first...

    \n Brakes · 4.2 kB · edited 12 February 2008
    5. \n
\n
\n
\n
\n\n \n
\n
\n
    \n
  1. Home
    2. \n
  2. >
    3. \n
  3. Wheels and tyres
    4. \n
  4. >
    5. \n
  5. New guide
    6. \n
\n
\n
\n
\n
\n

Write a guide

\n

Start with the title and the steps. Photos, tips and warnings can be added later, by you or by anyone else.

\n
Writing tips [show]

Start each step with a verb. One action per step. Say what the reader should see when it is done.

\n
\n

See an example

\n
\n\n

The guide was not saved. A guide needs at least two steps. Add another step below and save again.

\n\n
\n
\n \n
\n Finish the sentence. Begin with a verb and leave out the full stop.
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n Only one step so far. Start each step on a new line with a # sign.
\n
\n
\n Options\n
\n
\n
\n \n Preview\n \n Discard draft\n
\n
\n\n
\n
\n

Discard this draft?

\n

Your introduction and one step have not been saved. If you discard the draft they cannot be brought back.

\n
\n Keep writing\n Discard draft\n
\n
\n
\n
\n\n \n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.docs.s03.p03.t03.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"wiki-2000s\",\n \"years\": [\n 2003,\n 2010\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wk-3335\",\n \"short\": \"v1-wk-3335\"\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: Helvetica, Arial, \"Nimbus Sans\", sans-serif;\n --font-heading: Helvetica, Arial, \"Nimbus Sans\", sans-serif;\n --font-ui: Helvetica, Arial, \"Nimbus Sans\", sans-serif;\n --font-mono: Monaco, \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 32px;\n --text-h1: 26px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.5;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 3px;\n --radius-pill: 9px;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 1px 2px var(--color-shadow);\n --shadow-dialog: 0 3px 10px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 24%), var(--color-bar) 48%, color-mix(in srgb, var(--color-bar), black 12%));\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 50%), var(--color-bar-alt));\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 24%), var(--color-button) 48%, color-mix(in srgb, var(--color-button), black 12%));\n --fill-button-hover: linear-gradient(to bottom, var(--color-button), color-mix(in srgb, var(--color-button), black 20%));\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 70%), var(--color-button-secondary));\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-shadow);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }