{ "id": "v1-bb-111b", "long_id": "v1.bulletin-board-forums.forum.s01.p01.t01.u11", "name": "Bulletin board forum, 2002 to 2007", "era": { "slug": "bulletin-board-forums", "code": "bb", "name": "Bulletin-board forums", "years": [ 2002, 2007 ], "description": "Hosted forum software, 2002 to 2007: full-width tables of boards and topics with one-pixel gaps, tinted cells, a dark title bar on every block, and everything set in 10 and 11px Verdana." }, "archetype": "forum", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the look of hosted bulletin-board software in the first half of the 2000s: a white sheet on a grey page, filled edge to edge with dense tables of boards, topics and counts in 10px and 11px Verdana. Colour comes from one cold blue family, a navy primary bar with a short highlight at its top edge, a slate secondary bar and three pale blue-grey cell surfaces, with orange and dark red used only as small markers. Every box is square, flat and separated from its neighbour by a one-pixel white gap or a one-pixel rule; there are no shadows, no rounded corners and no motion.", "url": "https://chrono.skin/s/v1-bb-111b", "preview_url": "https://chrono.skin/s/v1-bb-111b/specimen.html", "files": { "STYLE.md": "# Bulletin board forum, 2002 to 2007\n\n## Summary\n\nThis is the look of hosted bulletin-board software in the first half of the 2000s: a white sheet on a grey page, filled edge to edge with dense tables of boards, topics and counts in 10px and 11px Verdana. Colour comes from one cold blue family, a navy primary bar with a short highlight at its top edge, a slate secondary bar and three pale blue-grey cell surfaces, with orange and dark red used only as small markers. Every box is square, flat and separated from its neighbour by a one-pixel white gap or a one-pixel rule; there are no shadows, no rounded corners and no motion.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; `.ds-page` has `--space-5` (10px) of padding, so the sheet `.ds-page__frame` takes about 98% of the viewport at every width. Designed at 1024px. Never centre a narrow column.\n- Order from the top: masthead (wordmark left, three stacked tool links right), primary navigation bar, sub-navigation strip, then `.ds-page__body`, then the footer band and one legal line, both inside the sheet. No text sits on the page colour.\n- `.ds-page__body` holds the views; inside a view, `.ds-view__body` is a single column of blocks `--space-5` apart. An optional two-column area, `.ds-layout`, puts a `--size-sidebar` (200px) sidebar on the left of the board table.\n- Board table columns: status `--size-status` (28px), board (fluid), each count `--size-count` (56px), last post `--size-last` (150px). Body rows are at least `--size-row` (34px); bars and title strips are `--size-bar` (22px).\n- Spacing scale: `--space-1` 1px, `--space-2` 2px, `--space-3` 4px, `--space-4` 6px, `--space-5` 10px, `--space-6` 16px.\n - `--space-1`: the gap between cells and rows inside any bordered block (table, panel, list, grid, form), and the vertical padding of buttons and inputs.\n - `--space-2`: vertical padding of bars and title strips, gap between stacked small lines.\n - `--space-3`: vertical padding of cells, gap between inline items (breadcrumb, footer links).\n - `--space-4`: horizontal padding of cells, strips and panel bodies; gap between buttons.\n - `--space-5`: page padding, body padding, and the gap between neighbouring blocks. This is the only block gap.\n - `--space-6`: indent of lists and sub-items, padding of dialog and empty-state bodies, horizontal padding of tabs.\n- Inner pages (a board, a topic, a settings page) keep the masthead, both navigation bars and the footer, and drop the hero and the board sidebar: `.ds-page__body` is one full-width column. From the top: `.ds-breadcrumb`, then `.ds-page-header` in place of the hero (title and one line of description on the left, the main action bottom-aligned on the right, no fill and no rule), then `.ds-tabs` when the page has several views, then the working block (`.ds-table`, `.ds-list` or `.ds-form`) at full width, then `.ds-pagination` right-aligned under it. All of these are `--space-5` apart, like every other block. A statistics strip (`.ds-stat`) belongs at the foot of an index page, above the who-is-online panel.\n- A thread is a stack of `.ds-post` blocks, each a `--size-last` (150px) author cell beside a fluid message cell, with a slate date strip above and a pale tool strip below. Under the last post, `.ds-toolbar` puts the topic buttons on the left and the page numbers on the right.\n- Some inner pages have a menu of their own (control panel, help): they keep the breadcrumb and page header at full width and then use `.ds-layout`: the menu in the `--size-sidebar` column, the working blocks beside it.\n- Views. The specimen is a six-screen example board; the primary bar has one item per view and marks the current one. `index` (home) is the board index: welcome block, announcement, sidebar beside the board table and the active topics list, then statistics and who is online. `board` is one board: sub-board grid, tabs, topic table, legend and page numbers. `topic` is a thread: three posts, the delete confirmation that a post's Delete link opens, and the topic buttons. `post` is the reply form with its error notice and a review of the latest posts. `panel` is the member's control panel: account menu, activity figures, subscribed topics and an empty inbox. `rules` is the help page: contents menu, the rules as long text, and related links.\n- Form rows are a `--size-label` (24%) label cell and a field cell; text inputs are `--size-field` (280px) unless `--wide`. A dialog is `--size-dialog` (56%) wide, centred in the flow.\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- One family for everything: `--font-body`, `--font-heading` and `--font-ui` are the same Verdana stack. `--font-mono` (Courier New) is for inline code only.\n- Sizes: `--text-small` 10px for descriptions, meta, counts captions, strips and sub-navigation, and it carries most of the text on a page; `--text-base` and `--text-ui` 11px for running text, numbers, buttons, inputs and navigation; `--text-h2` 12px for bar and strip titles; `--text-h1` and `--text-large` 13px for the page heading, the hero title and board and topic titles; `--text-display` 16px for the wordmark only. Nothing is larger than 16px.\n- Line height is `normal` everywhere. Headings are bold, never uppercase, with no tracking.\n- Weight: `--weight-ui` is 700 for navigation, tabs and the primary button; the secondary button and inputs use `--weight-body`.\n- Links in running text are `--color-link` and underlined. Titles of boards and topics, breadcrumb links, moderator and member names use `--color-link-quiet` (navy), also underlined (`--link-decoration-quiet`). Only links that sit on a bar (navigation, sub-navigation, tabs) have no underline until hovered. Hover turns any link `--color-link-hover` (orange).\n- Surfaces: `--color-page` outside the sheet; `--color-canvas` is the sheet and, through `--fill-panel`, the white that shows in the 1px gaps between cells. `--color-surface` is the main cell, `--color-surface-alt` the status, count and last-post cells and form labels, `--color-surface-strong` the category rows, panel and sidebar title strips, form action row and current page number.\n- Bars: `--fill-bar` (navy `--color-bar` with a lighter top edge) for the primary navigation, table heads and the title of a main board, list, form or dialog, always with `--color-bar-text`. `--fill-bar-alt` (flat slate) for the sub-navigation strip, date strips, panel sub-strips, the closing strip of a table, idle tabs and quiet badges. `--fill-inverse` for the footer band.\n- Borders: blocks have a 1px `--color-border` outline; `--color-border-muted` is for rules inside a box and the breadcrumb outline; `--color-border-strong` at `--border-width-strong` (2px) is only for the rule under the navigation bar and tabs and for the dialog outline. Inputs use `--color-input-border`.\n- Markers: `--color-accent` for new-post icons and the badge; `--color-accent-alt` for emphasised text that is not an error; `--color-danger` and `--color-danger-surface` for errors; `--color-notice` for announcements. `--color-success` (dark green) and `--color-warning` (amber) are the two member-group name colours of the era; here they tint status badges only. Status badges are a `color-mix()` of 30% of the status colour (`--color-success`, `--color-warning`, `--color-danger`) over `--color-surface`, with `--color-text` and a 1px outline in the status colour, so they read under every palette. The destructive button is the error pair: `--color-danger` text on `--color-danger-surface` with a `--color-danger` outline.\n- `--color-fill-1` to `--color-fill-4` repeat the pale surfaces; the style has no decorative block colours.\n- One-off mixes outside the token set: the status badge tints described above; the dashed edge of `.ds-notice` is `color-mix()` of `--color-accent` and `--color-notice` in equal parts; the secondary button uses the `outset` border style and `inset` when pressed, and the notice uses `dashed`, instead of `--border-style`.\n- The references used Verdana with Geneva, Arial and Helvetica fallbacks, all system fonts; no substitution was needed.\n\n- `--fill-bar` is a vertical gradient that starts 30% darker than the bar colour, passes the bar colour at 40% and ends 30% lighter at the foot: the bars glow from below.\n- `--fill-button` runs from a 30% lighter top to the button colour; `--fill-button-hover` from the button colour to 25% darker.\n- `--fill-panel` is `--color-border`: the 1px gaps between cells are light blue lines, so every cell looks outlined.\n- `--fill-bar-alt`, `--fill-inverse` and `--fill-accent` are flat.\n- Borders are `--border-width` 1px solid, `--border-width-strong` 2px. All `--radius-*` are 0, every `--shadow-*` is `none`.\n- `--focus-ring` is a 1px dotted line; `--transition` is `none`.\n\n## Components\n\n- `.ds-page`: on ``. Wrap everything in `.ds-page__frame`; `.ds-page__body` holds the views. Each view is a `.ds-view` section (`.ds-view--home` for the index) and its blocks go in `.ds-view__body`. `.ds-page__legal` is the small print at the foot of the sheet, under the footer. `.ds-layout` with `.ds-layout__main` makes the sidebar-plus-main area. `.ds-icon` sizes an inline SVG icon, `.ds-sprite` hides the SVG symbol sheet, `.ds-block` puts a span on its own line.\n- `.ds-nav`: the site header. `.ds-nav__head` holds `.ds-nav__brand` (the `.ds-brand` with a `.ds-nav__tagline` line under it) and `.ds-nav__tools`. `.ds-nav__menu` is the primary bar of `.ds-nav__link` items; the current one takes `is-current` and becomes a pale cell; in the specimen the same dress is applied by one `:has()` rule per view. `.ds-nav__sub` is the slate strip of `.ds-nav__sublink` items for account links.\n- `.ds-brand`: the site's mark and name at the left of the masthead, linking to the index; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` over `--color-button`, a `--border-width` outline in `--color-border-strong`, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.5 times `--text-display`, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` and `--weight-display`, with `--display-tracking` and `--heading-transform`, coloured `--color-heading` for the white masthead it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-breadcrumb`: one pale bordered line under the header, with `.ds-breadcrumb__link`, `.ds-breadcrumb__sep` and `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome block at the top of an index page. A 13px bold `.ds-hero__title`, a 10px `.ds-hero__lead`, the main action in `.ds-hero__action`, and board totals right-aligned in `.ds-hero__aside`. It has no fill and ends in a 1px rule. Never make it a banner.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero` on every page below the index. `.ds-page-header__title` is 13px bold navy, `.ds-page-header__desc` one 10px line (description, moderators), `.ds-page-header__action` holds one primary button at the right. No box, no fill.\n- `.ds-prose`: long text such as rules or a post body: h1, h2, h3, p, ul, strong, code, hr.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for navy tool, meta and name links; `.ds-link--strong` for bold.\n- `.ds-button`: primary action, blue with white bold text and a navy 1px border. `.ds-button--secondary` is the plain grey raised system button. `.ds-button--danger` is for a destructive action (delete, ban, prune): error-red text on the pale error surface with a red outline; use it once per confirmation, next to a secondary button. `is-hover`, `is-active`, `is-focus`, `is-disabled` (or `disabled`). Group buttons in `.ds-buttons`.\n- `.ds-form`: a bordered block of rows. `.ds-form__title` (primary bar), `.ds-form__row` with `.ds-form__label` (plus `.ds-form__hint`) and `.ds-form__field`; controls take `.ds-form__input` (`--wide`, `--auto`, `is-invalid`, `is-disabled`), errors `.ds-form__error`, checkboxes `.ds-form__check` and `.ds-form__checkbox`, buttons in `.ds-form__actions`.\n- `.ds-table`: the board or topic index and any data table. `th` is the primary bar (`.ds-table__head--left` for the first text column); `.ds-table__group` is a category row; cells `.ds-table__status` (`is-read`), `.ds-table__num`, `.ds-table__last`; inside the main cell `.ds-table__title`, `.ds-table__desc`, `.ds-table__meta`. End a board with a `.ds-table__foot` row.\n- `.ds-infobar`: the 10px line of tools and time zone under a table; `.ds-infobar__side` is right-aligned.\n- `.ds-list`: topic or post rows outside a table. `.ds-list__head` (primary bar), `.ds-list__date` (slate strip between groups), `.ds-list__item` (`is-alt` for the alternate row) with `.ds-list__title`, `.ds-list__meta`, `.ds-list__aside`.\n- `.ds-post`: one message of a thread. `.ds-post__head` is the slate strip with the date and post number; `.ds-post__author` the pale cell with `.ds-post__name` and `.ds-post__meta` lines; `.ds-post__body` holds `.ds-post__text` paragraphs, a `.ds-post__quote` with its `.ds-post__cite`, inline `.ds-post__code` and the `.ds-post__sig` signature under a faint rule; `.ds-post__foot` is the pale strong strip of quiet tool links. `.ds-toolbar` is the row under a thread: `.ds-buttons` left, `.ds-pagination` right.\n- `.ds-panel`: any titled box, such as statistics or who is online. `.ds-panel__title` is a pale strong strip; add `.ds-panel__title--bar` for a main block. `.ds-panel__sub` is a slate sub-strip, `.ds-panel__body` (`--alt`) the cells, `.ds-panel__line` a paragraph.\n- `.ds-grid`: four equal cells with 1px gaps in one bordered block, for sub-boards or statistics. `.ds-grid__title`, `.ds-grid__cell` (`--2`, `--3`, `--4` for the other fills), `.ds-grid__name`, `.ds-grid__meta`. Cells never have gaps wider than 1px or their own borders.\n- `.ds-stat`: summary figures as one bordered strip of equal count cells with 1px gaps, never separate cards. `.ds-stat__title` is an optional pale strong strip across the top; each `.ds-stat__item` is a centred `--color-surface-alt` cell with a 13px bold navy `.ds-stat__value` over a 10px muted `.ds-stat__label`. Use three to six items.\n- `.ds-tabs`: a row of square slate `.ds-tabs__tab` items on a 2px navy rule; `is-current` takes the primary bar fill. Use for views of one list.\n- `.ds-badge`: a small square orange label, 10px bold. `.ds-badge--quiet` is slate. The status variants `.ds-badge--success` (solved, online, approved), `.ds-badge--warning` (pending, awaiting) and `.ds-badge--danger` (locked, banned, overdue) are a pale tint of the status colour with body text and a 1px outline in that colour. Put a status badge after a title or in a table cell. `.ds-new` is bold dark red text for a \"new\" remark. `.ds-legend` with `.ds-legend__item` (`is-read`) and `.ds-legend__label` explains the status icons.\n- `.ds-sidebar`: a column of `.ds-sidebar__block` boxes, each with `.ds-sidebar__title`, a `.ds-sidebar__list` of `.ds-sidebar__item` (`--head` for a group link, `--sub` for an indented one) and an optional slate `.ds-sidebar__foot` with a `.ds-sidebar__footlink`.\n- `.ds-notice`: a pale yellow centred line with a dashed edge for announcements. `.ds-notice--error` is the salmon error box with a solid red edge and a `.ds-notice__title`.\n- `.ds-pagination`: right-aligned under a list. `.ds-pagination__label`, then small bordered `.ds-pagination__link` boxes; `is-current` for the current page.\n- `.ds-dialog`: a confirmation box in the page flow, 2px navy outline, `.ds-dialog__title` bar, `.ds-dialog__body` with `.ds-dialog__text` and `.ds-dialog__actions`. `.ds-dialog__backdrop` is a flat band in the page colour. It never floats over the page.\n- `.ds-empty`: a bordered block with one centred message (`.ds-empty__body`, `.ds-empty__text`) and one button, for a list that has nothing in it yet. `.ds-empty__title` is an optional pale strong strip naming the list.\n- `.ds-footer`: the navy band closing the sheet, a `.ds-footer__row` of `.ds-footer__link` items with `.ds-footer__sep` between them.\n\n## Never\n\n- `row-gap <= 1px`: rows touch or are separated by a 1px line.\n- `block-gap <= 20px`: neighbouring blocks are 10px apart; 20px is the widest measured.\n- `content-width >= 90%`: the board fills the viewport; no reference used less than 95%.\n- `font-size <= 16px`: the largest text in any reference is 16px, and only the wordmark uses it.\n- `font-size >= 10px`: 10px is the smallest and the most common size.\n- `font-families <= 2`: one sans-serif stack, plus monospace for code.\n- `letter-spacing <= 1px`: at most one reference tracks its headings, by 1px; this pack uses none.\n- `uppercase-text <= 0%`: no reference transforms text to uppercase.\n- `underlined-links >= 50%`: between 54% and 98% of link text is underlined in the references.\n- `border-radius <= 0px`: every box is square.\n- `box-shadow = none`: no shadow.\n- `text-shadow = none`: no text shadow.\n- `gradient-fills <= 20%`: gradients are on primary bars and the primary button only.\n- `transition = none`: states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 2px`: 1px, with 2px on emphasised edges.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new titled box from `.ds-panel`, a new row layout from `.ds-table` or `.ds-list`, a new strip from `.ds-nav__sub`. Build it as a 1px `--color-border` outline on `--fill-panel`, with cells in the three surface colours separated by `--space-1`, and a title in `--fill-bar` or `--color-surface-strong`. Use tokens only: no raw colours or lengths, no new radius, 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). Gaps, paddings and column widths measured\n on four board indexes captured 2004 to 2005. */\n:root {\n --size-page: 100%;\n --size-sidebar: 200px;\n --size-status: 28px;\n --size-count: 56px;\n --size-last: 150px;\n --size-row: 34px;\n --size-bar: 22px;\n --size-icon: 16px;\n --size-label: 24%;\n --size-field: 280px;\n --size-dialog: 56%;\n --space-1: 1px;\n --space-2: 2px;\n --space-3: 4px;\n --space-4: 6px;\n --space-5: 10px;\n --space-6: 16px;\n}\n\n/* ---------- shell ---------- */\n.ds-page {\n margin: 0;\n padding: var(--space-5);\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/* The sheet every block sits on. */\n.ds-page__frame {\n width: var(--size-page);\n box-sizing: border-box;\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-page__body {\n padding: var(--space-5);\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/* The single column of blocks inside a view, one block gap apart. */\n.ds-view__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n/* Small print, inside the sheet so it never sits on the page colour. */\n.ds-page__legal {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n text-align: center;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-sprite {\n position: absolute;\n}\n.ds-icon {\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-block {\n display: block;\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/* Dark links for tools, meta and member names. */\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}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- nav: masthead, primary bar, sub-navigation strip ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-nav__brand {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n}\n/* The site's mark and name. The tile is dressed like the primary button, so\n every palette and surface set reskins it. */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-4);\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.5);\n height: calc(var(--text-display) * 1.5);\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: 76%;\n height: 76%;\n}\n.ds-brand__name {\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-nav__tagline {\n display: block;\n font-size: var(--text-small);\n font-style: italic;\n color: var(--color-text-muted);\n}\n.ds-nav__tools {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-nav__menu {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n background: var(--fill-bar);\n border-top: var(--border-width) var(--border-style) var(--color-border-strong);\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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 text-shadow: var(--shadow-text);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-bar-text);\n line-height: var(--line-heading);\n text-decoration: none;\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-surface);\n color: var(--color-heading);\n}\n/* The current view's item, and the index item when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#index\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#index:target) .ds-nav__link[href=\"#index\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#board:target) .ds-nav__link[href=\"#board\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#topic:target) .ds-nav__link[href=\"#topic\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#post:target) .ds-nav__link[href=\"#post\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#panel:target) .ds-nav__link[href=\"#panel\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-page:has(#rules:target) .ds-nav__link[href=\"#rules\"] {\n background: var(--color-surface);\n color: var(--color-heading);\n}\n.ds-nav__sub {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-6);\n list-style: none;\n background: var(--fill-bar-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n}\n.ds-nav__sublink {\n color: var(--color-bar-alt-text);\n text-decoration: none;\n}\n.ds-nav__sublink:hover,\n.ds-nav__sublink.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n/* ---------- breadcrumb ---------- */\n.ds-breadcrumb {\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 list-style: none;\n background: var(--color-fill-4);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\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}\n.ds-breadcrumb__sep {\n color: var(--color-text-muted);\n font-weight: var(--weight-body);\n}\n.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- hero: the welcome block ---------- */\n.ds-hero {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n padding: 0 0 var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-page);\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n color: var(--color-text);\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}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-small);\n}\n.ds-hero__aside {\n flex: none;\n font-size: var(--text-small);\n text-align: right;\n}\n.ds-hero__action {\n margin: var(--space-4) 0 0;\n}\n\n/* ---------- page header: the head of an inner page ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-6);\n}\n.ds-page-header__title {\n margin: 0 0 var(--space-2);\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: 0;\n font-size: var(--text-small);\n}\n.ds-page-header__action {\n flex: none;\n}\n\n/* ---------- info line above or below a board ---------- */\n.ds-infobar {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: var(--space-5);\n font-size: var(--text-small);\n}\n.ds-infobar__side {\n text-align: right;\n}\n\n/* ---------- table: the board index ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: separate;\n border-spacing: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-table th {\n height: var(--size-bar);\n padding: 0 var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__head--left {\n text-align: left;\n}\n.ds-table td {\n height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n vertical-align: middle;\n}\n.ds-table .ds-table__num,\n.ds-table .ds-table__last,\n.ds-table .ds-table__status {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n width: var(--size-count);\n font-size: var(--text-base);\n text-align: center;\n white-space: nowrap;\n}\n.ds-table .ds-table__last {\n width: var(--size-last);\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__status {\n width: var(--size-status);\n padding: var(--space-3);\n text-align: center;\n color: var(--color-accent);\n}\n.ds-table .ds-table__status.is-read {\n color: var(--color-bar-alt);\n}\n/* Category row: the strongest surface, heading text. */\n.ds-table .ds-table__group td {\n height: var(--size-bar);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n/* Closing strip of a board. */\n.ds-table .ds-table__foot td {\n height: var(--space-4);\n padding: 0;\n background: var(--fill-bar-alt);\n}\n.ds-table__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__title:hover,\n.ds-table__title.is-hover {\n color: var(--color-link-hover);\n}\n.ds-table__desc {\n display: block;\n padding: var(--space-1) 0 0;\n}\n.ds-table__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- panel ---------- */\n.ds-panel {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n/* Primary bar as the title strip: main boards, dialogs. */\n.ds-panel__title--bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-panel__sub {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-panel__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-small);\n}\n.ds-panel__body--alt {\n background: var(--color-surface-alt);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-2);\n}\n\n/* ---------- grid: cells with one-pixel gaps ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__title {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\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-grid__cell {\n padding: var(--space-4);\n background: var(--color-fill-1);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\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 display: block;\n margin: 0 0 var(--space-2);\n color: var(--color-link-quiet);\n font-size: var(--text-base);\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}\n.ds-grid__meta {\n display: block;\n color: var(--color-text-muted);\n}\n\n/* ---------- stats: a strip of count cells ---------- */\n.ds-stat {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__title {\n flex: 0 0 100%;\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\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-stat__item {\n flex: 1 1 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-stat__value {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-stat__label {\n display: block;\n padding: var(--space-1) 0 0;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- tabs ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border-strong);\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-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n\n/* ---------- badge and legend ---------- */\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}\n.ds-badge--quiet {\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n/* Status labels: a tint of the status colour over the cell surface, with body\n text and the status colour as the outline, so they read under any palette. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\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) 30%, var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 30%, var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));\n border-color: var(--color-danger);\n}\n.ds-new {\n color: var(--color-accent-alt);\n font-weight: var(--weight-bold);\n}\n.ds-legend {\n display: flex;\n justify-content: center;\n gap: var(--space-6);\n margin: 0;\n padding: var(--space-3) 0;\n list-style: none;\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-legend__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-accent);\n}\n.ds-legend__item.is-read {\n color: var(--color-bar-alt);\n}\n.ds-legend__label {\n color: var(--color-text);\n}\n\n/* ---------- two-column area ---------- */\n.ds-layout {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\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}\n\n/* ---------- sidebar ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-sidebar__block {\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-sidebar__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n padding: var(--space-2) 0;\n font-size: var(--text-small);\n}\n.ds-sidebar__item--head {\n padding-top: var(--space-3);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__item--sub {\n padding-left: var(--space-6);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__foot {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-sidebar__footlink {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n}\n\n/* ---------- list: topic rows ---------- */\n.ds-list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-list__head {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n}\n.ds-list__date {\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n column-gap: var(--space-5);\n align-items: center;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n}\n.ds-list__item.is-alt {\n background: var(--color-fill-3);\n}\n.ds-list__title {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\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}\n.ds-list__meta {\n display: block;\n padding: var(--space-1) 0 0;\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\n/* ---------- post: one message of a thread ---------- */\n.ds-post {\n display: grid;\n grid-template-columns: var(--size-last) minmax(0, 1fr);\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-post__head {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-post__author {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-small);\n}\n.ds-post__name {\n color: var(--color-link-quiet);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-post__name:hover,\n.ds-post__name.is-hover {\n color: var(--color-link-hover);\n}\n.ds-post__meta {\n display: block;\n color: var(--color-text-muted);\n}\n.ds-post__body {\n padding: var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\n}\n.ds-post__text {\n margin: 0 0 var(--space-4);\n}\n.ds-post__code {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-post__quote {\n margin: 0 0 var(--space-4);\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-muted);\n font-size: var(--text-small);\n}\n.ds-post__cite {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-post__sig {\n margin: 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-post__foot {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n font-size: var(--text-small);\n}\n/* Topic tools on the left, page numbers on the right. */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-5);\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n padding: var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-base);\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\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 color: var(--color-heading);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n color: var(--color-heading-alt);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n color: var(--color-text);\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 font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-prose hr {\n height: 0;\n margin: var(--space-4) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\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-ui);\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/* The plain raised system button. */\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-body);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: var(--color-disabled);\n}\n/* Destructive action: the error pair, error text on the error surface with\n an error outline. It does not depend on the primary button's colours. */\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:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-style: var(--border-style);\n border-color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-form__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0, 1fr);\n gap: var(--space-1);\n}\n.ds-form__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n display: block;\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-form__field {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n font-size: var(--text-base);\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}\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}\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__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n}\n\n/* ---------- notice ---------- */\n/* The edge is a half mix of the accent and the notice colour. */\n.ds-notice {\n margin: 0;\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-accent) 50%, var(--color-notice));\n border-radius: var(--radius-panel);\n font-size: var(--text-small);\n text-align: center;\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n border-style: var(--border-style);\n border-color: var(--color-danger);\n text-align: left;\n}\n.ds-notice__title {\n color: var(--color-danger);\n font-weight: var(--weight-bold);\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3) 0 0;\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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(--color-surface-strong);\n color: var(--color-text);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n\n/* ---------- dialog: a message box in the page flow ---------- */\n.ds-dialog {\n display: grid;\n gap: var(--space-1);\n width: var(--size-dialog);\n box-sizing: border-box;\n margin: 0 auto;\n padding: var(--space-1);\n background: var(--fill-panel);\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 display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n}\n.ds-dialog__backdrop {\n padding: var(--space-5);\n background: var(--color-overlay);\n}\n\n/* ---------- empty state: a single message row ---------- */\n.ds-empty {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-empty__title {\n display: flex;\n align-items: center;\n min-height: var(--size-bar);\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__body {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n font-size: var(--text-base);\n text-align: center;\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n padding: var(--space-4) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-align: center;\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-bar-text);\n}\n.ds-footer__sep {\n color: var(--color-bar-alt);\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: bulletin board forum specimen\n\n\n\n\n\n\n \n \n \n \n \n \n \n\n\n
\n\n
\n
\n
\n \n \n chronoskin\n \n Repairs, restorations and bench talk since 2002\n
\n \n
\n \n \n
\n\n
\n\n
\n
\n\n
\n
\n

Welcome to the chronoskin boards.

\n

If this is your first visit, read the help pages first. You need an account before you can post; reading is open to everyone. Pick a board below to start.

\n

Read the board rules

\n
\n
\n Members: 4,812, Topics: 21,340, Posts: 187,455\n The time now is 09:41 PM.\n You last visited: 14 Mar 2005, 07:02 PM.\n
\n
\n\n

The boards will be read-only on Sunday from 02:00 to 04:00 while the server is moved. Read the announcement.

\n\n
\n\n \n\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BoardTopicsPostsLast post
The workbench
Radios and receivers\n Fault finding, alignment and restoration of domestic sets.\n Moderators: hollis_w, m.teague5,20848,917Today, 09:12 PM by quietfuse
Test equipment\n Meters, scopes, signal generators and bench supplies. Please give the model number in the topic title.\n Moderator: m.teague2,74419,630Today, 08:47 PM by anselm
Clocks and movements\n Mechanical and synchronous clocks, timers and chart drives.\n Moderator: pendle9137,05213 Mar 2005, 11:20 AM by ruth_a
The back room
Introductions\n New here? Say hello and tell us what is on your bench.1,3879,44112 Mar 2005, 06:35 PM by dovecote
Archive 2002 to 2003\n Read-only topics from the old board.6,11952,87030 Dec 2003, 10:02 PM by hollis_w
\n\n
\n Mark all boards read · The moderating team\n
    \n
  • New posts
    • \n
  • No new posts
    • \n
  • Locked board
    • \n
\n All times are GMT.\n
\n\n \n\n
\n
\n\n
\n

Board statistics

\n
4,812Members
\n
21,340Topics
\n
187,455Posts
\n
58Online now
\n
412Most ever online
\n
\n\n
\n

Who is online

\n

Currently active: 58 (21 members and 37 guests)

\n
\n

Most users ever online was 412, on 02 Nov 2004 at 08:31 PM.

\n

anselm, dovecote, hollis_w, ivo_k, m.teague, pendle, quietfuse, ruth_a, saltmarsh, tobias_k

\n
\n
\n

Our members have made 187,455 posts in 21,340 topics. Welcome to our newest member, saltmarsh.

\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. The workbench
    4. \n
  4. »
    5. \n
  5. Test equipment
    6. \n
\n\n
\n
\n

Test equipment

\n

Meters, scopes, signal generators and bench supplies. Moderator: m.teague

\n
\n
New topic
\n
\n\n
\n

Sub-boards of Test equipment

\n
\n Meters and bridges\n 412 topics, 3,906 posts\n Last post today, 07:55 PM\n
\n
\n Oscilloscopes\n 688 topics, 5,120 posts\n Last post today, 06:10 PM\n
\n
\n Signal generators\n 203 topics, 1,477 posts\n Last post 12 Mar 2005\n
\n
\n Bench supplies\n 1,950 topics, 8,233 posts\n Last post 11 Mar 2005\n
\n
\n\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TopicRepliesViewsLast post
Bench supply hums at low load New\n Started by quietfuse311,204Today, 08:47 PM by anselm
Calibrating a moving-coil meter without a standard Solved\n Started by ivo_k18942Today, 05:30 PM by m.teague
Signal generator drifts for the first hour Awaiting parts\n Started by tobias_k726513 Mar 2005, 09:14 PM by tobias_k
Mains isolation: read before you ask Locked\n Started by m.teague06,31802 Jan 2005, 10:00 AM by m.teague
Replacement probes for an old valve voltmeter\n Started by saltmarsh418711 Mar 2005, 02:41 PM by dovecote
\n\n
\n Mark this board read · Subscribe to this board\n
    \n
  • New posts
    • \n
  • No new posts
    • \n
  • Locked topic
    • \n
\n 137 topics in this board.\n
\n\n \n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Test equipment
    4. \n
  4. »
    5. \n
  5. Bench supply hums at low load
    6. \n
\n\n
\n
\n

Bench supply hums at low load

\n

Started by quietfuse on 14 Mar 2005. 31 replies, 1,204 views. New

\n
\n
Post reply
\n
\n\n
\n
14 Mar 2005, 06:02 PMPost 1 of 32
\n
\n quietfuse\n Regular\n Posts: 412\n Joined: Aug 2003\n
\n
\n

I have a twin 0 to 30 V bench supply from the early seventies on the bench. Above about half an amp it is quiet. Below that the transformer hums loudly enough to hear across the room, and there is 40 mV of ripple on the output.

\n

Rectifier diodes test fine. The reservoir capacitor is original and reads 3,900 uF against a marked 4,700. Is that enough to explain it, or should I be looking at the regulator?

\n

One fault at a time.

\n
\n
\n Profile · Send a private message\n Quote · Edit · Delete · Report\n
\n
\n\n
\n
14 Mar 2005, 06:40 PMPost 2 of 32
\n
\n m.teague\n Moderator\n Posts: 6,105\n Joined: Feb 2002\n
\n
\n
quietfuse wrote: The reservoir capacitor is original and reads 3,900 uF against a marked 4,700.
\n

Capacitance is only half of it. Measure the series resistance as well; a thirty year old electrolytic can read nearly full value and still be useless. I would replace it before touching anything else.

\n

Hum that gets worse at light load usually points at the regulator hunting, not the transformer. Check the small compensation capacitor across the error amplifier while you are in there.

\n

Put the model number in the title, please.

\n
\n
\n Profile · Send a private message\n Quote · Edit · Delete · Report\n
\n
\n\n
\n
Today, 08:47 PMPost 32 of 32
\n
\n anselm\n Member\n Posts: 88\n Joined: Jan 2005\n
\n
\n

Same supply here, same fault. On mine it was the minimum load resistor across the output, which had gone open. Without it the series pass transistor cannot regulate down at low current and the loop sings at mains frequency.

\n

It is a 2 W wirewound part under the rear terminal strip. Discharge the reservoir before you reach in.

\n
\n
\n Profile · Send a private message\n Quote · Edit · Delete · Report\n
\n
\n\n
\n
\n

Confirm

\n
\n

Are you sure you want to delete post 32 by anselm? This cannot be undone.

\n
\n Yes, delete it\n No\n
\n
\n
\n
\n\n
\n
\n Post reply\n Subscribe\n \n Delete topic\n
\n \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Test equipment
    4. \n
  4. »
    5. \n
  5. Bench supply hums at low load
    6. \n
  6. »
    7. \n
  7. Post a reply
    8. \n
\n\n
\n
\n

Post a reply

\n

In the topic Bench supply hums at low load. Posting as quietfuse.

\n
\n
Posting guide
\n
\n\n
\n Your reply was not posted. You must wait 30 seconds between posts. Go back and try again in a moment.\n
\n\n
\n

Post a reply

\n
\n \n
\n
\n
\n \n
\n \n This is not a complete e-mail address.\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n Options\n
\n \n
\n
\n
\n \n \n Cancel\n
\n
\n\n
    \n
  • Topic review, newest first
    • \n
  • \n
    anselm\n On mine it was the minimum load resistor across the output, which had gone open.
    \n
    Today, 08:47 PM Post 32
    \n
    • \n
  • \n
    tobias_k\n Worth checking the mains earth bond to the chassis too; mine was loose under the paint.
    \n
    Today, 07:15 PM Post 31
    \n
    • \n
  • \n
    m.teague\n Hum that gets worse at light load usually points at the regulator hunting, not the transformer.
    \n
    14 Mar 2005, 06:40 PM Post 2
    \n
    • \n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Control panel
    4. \n
\n\n
\n
\n

Control panel

\n

Signed in as quietfuse. Member since August 2003. Last visit: 14 Mar 2005, 07:02 PM.

\n
\n
New private message
\n
\n\n
\n\n \n\n
\n\n
\n

Your activity

\n
412Posts
\n
37Topics started
\n
3Subscriptions
\n
0Unread messages
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Subscribed topicRepliesLast post
Bench supply hums at low load New\n In Test equipment31Today, 08:47 PM by anselm
Which lacquer for a walnut cabinet? Sticky\n In Cabinets and finishes6213 Mar 2005, 04:18 PM by pendle
Calibrating a moving-coil meter without a standard Solved\n In Test equipment18Today, 05:30 PM by m.teague
\n\n
\n

Private messages: inbox

\n
\n

Your inbox is empty. Messages from other members will be listed here.

\n Write a message\n
\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
    \n
  1. chronoskin
    2. \n
  2. »
    3. \n
  3. Help
    4. \n
  4. »
    5. \n
  5. Board rules
    6. \n
\n\n
\n
\n

Help and rules

\n

How the boards work and what the moderating team expects. Last revised 02 Jan 2005.

\n
\n
Contact the team
\n
\n\n
\n\n \n\n
\n\n
\n

Board rules and posting guide

\n

Everyone who posts here agrees to the rules below. They are short. Read them once and you will rarely need a moderator.

\n

Before you post

\n

Search first; most common faults have a long topic already. Put the make and model in the title, and say what you have measured so far. A good first post saves three replies asking for the basics.

\n
    \n
  • One topic per fault, in one board only.
    • \n
  • Attach schematics as links, not as inline scans.
    • \n
  • Mains work: say whether the set is isolated before you ask for measurements.
    • \n
  • Wrap part numbers in [code] tags so they stay readable.
    • \n
\n
\n

Signatures

\n

Signatures are limited to three lines of text and no images. Set yours in the control panel.

\n

Moderation

\n

Moderators may edit a title to add a model number, move a topic to the right board, or lock one that has run its course. Disagree by private message, not in the topic.

\n
\n\n
\n

See also

\n
\n

Board code reference · Mains isolation: read before you ask · Setting your signature · The moderating team · Test equipment board

\n

Still stuck? Ask in the boards and a moderator will answer.

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

chronoskin. Placeholder content for a style specimen. All times are GMT.

\n\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.bulletin-board-forums.forum.s01.p01.t01.u11\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"bulletin-board-forums\",\n \"years\": [\n 2002,\n 2007\n ]\n },\n \"archetype\": \"forum\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bb-111b\",\n \"short\": \"v1-bb-111b\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e5e5e5;\n --color-canvas: #ffffff;\n --color-surface: #f0f7fc;\n --color-surface-alt: #dfe5ef;\n --color-surface-strong: #cad5e6;\n --color-bar: #003366;\n --color-bar-text: #ffffff;\n --color-bar-alt: #7f96bf;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #003366;\n --color-inverse-text: #e0eaf6;\n --color-text: #000000;\n --color-text-muted: #434951;\n --color-heading: #003366;\n --color-heading-alt: #3a5d95;\n --color-link: #0066cc;\n --color-link-quiet: #003366;\n --color-link-visited: #5176b5;\n --color-link-hover: #ff6600;\n --color-link-active: #c60202;\n --color-border: #a4bbdd;\n --color-border-strong: #003366;\n --color-border-muted: #c2cfdf;\n --color-accent: #ff6600;\n --color-accent-text: #ffffff;\n --color-accent-alt: #a00000;\n --color-fill-1: #f0f7fc;\n --color-fill-2: #dfe5ef;\n --color-fill-3: #edf2f5;\n --color-fill-4: #f5f9fd;\n --color-button: #527cb4;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #767676;\n --color-disabled: #dfdfdf;\n --color-disabled-text: #767676;\n --color-danger: #c60202;\n --color-danger-surface: #fddbcc;\n --color-success: #006600;\n --color-warning: #ffa34f;\n --color-notice: #ffffdd;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: #e5e5e5;\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-heading: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-ui: Verdana, Geneva, Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 16px;\n --text-h1: 13px;\n --text-h2: 12px;\n --text-h3: 11px;\n --line-body: normal;\n --line-heading: normal;\n --line-display: normal;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\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: 0;\n --radius-page: 0;\n --shadow-panel: none;\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white, transparent 50%);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white, transparent 30%);\n --shadow-control-pressed: inset 0 2px 0 color-mix(in srgb, var(--color-shadow), transparent 60%);\n --shadow-dialog: none;\n --shadow-text: 0 1px 0 color-mix(in srgb, var(--color-shadow), transparent 40%);\n --fill-page: repeating-linear-gradient(135deg, var(--color-page) 0, var(--color-page) 6px, color-mix(in srgb, var(--color-page), black 10%) 6px, color-mix(in srgb, var(--color-page), black 10%) 8px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), black 30%) 0%, var(--color-bar) 40%, color-mix(in srgb, var(--color-bar), white 30%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), black 22%) 0%, var(--color-bar-alt) 40%, color-mix(in srgb, var(--color-bar-alt), white 25%) 100%);\n --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), black 30%) 0%, var(--color-inverse) 40%, color-mix(in srgb, var(--color-inverse), white 30%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 30%) 0%, var(--color-accent) 100%);\n --fill-panel: var(--color-border);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 30%) 0%, var(--color-button) 100%);\n --fill-button-hover: linear-gradient(to bottom, var(--color-button) 0%, color-mix(in srgb, var(--color-button), black 25%) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 40%) 0%, var(--color-button-secondary) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }