{ "id": "v1-gl-112b", "long_id": "v1.glassmorphism.app.s01.p01.t02.u11", "name": "Glassmorphism app", "era": { "slug": "glassmorphism", "code": "gl", "name": "Glassmorphism", "years": [ 2020, 2026 ], "description": "Frosted glass, 2020 to 2026: translucent panels with a blurred backdrop, a thin light border and a soft shadow, floating over a colourful gradient." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Glassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a deep, colourful gradient. It was common in dashboards, tool pages and operating-system chrome, set in a geometric sans at 16px with white text. This pack is an app layout: a dark glass bar on top, a glass sidebar on the left and sheets of light glass in the main column over an indigo backdrop with blue and magenta glows.", "url": "https://chrono.skin/s/v1-gl-112b", "preview_url": "https://chrono.skin/s/v1-gl-112b/specimen.html", "files": { "STYLE.md": "# Glassmorphism app\n\n## Summary\n\nGlassmorphism is the frosted-glass interface style of 2020 to 2026: translucent panels with a blurred backdrop, a 1px light border and a soft tinted shadow, floating over a deep, colourful gradient. It was common in dashboards, tool pages and operating-system chrome, set in a geometric sans at 16px with white text. This pack is an app layout: a dark glass bar on top, a glass sidebar on the left and sheets of light glass in the main column over an indigo backdrop with blue and magenta glows.\n\n## Layout\n\n- Content column: `--size-page` (1248px), centred, with `--space-4` (20px) side padding below that width. The backdrop (`--fill-page` on `.ds-page`) always fills the viewport; only the column is capped.\n- Navigation: one dark glass bar across the top, `--size-nav` (64px) high, brand on the left, links and one primary button on the right. It is written once, above the views, and so is the footer.\n- Columns: `.ds-page__layout` puts a `--size-sidebar` (240px) sidebar on the left and the main column on the right. `.ds-page__row` makes two equal halves; `.ds-page__row--stretch` gives both halves the same height. `.ds-page__main` stacks blocks vertically.\n- Home page: the hero sits directly on the backdrop under the navigation bar. Then the left column (the sidebar with a small panel under it) beside the main column: notices, the grid of tinted tiles, a `.ds-page__heading` and the list of latest activity. The left column and the main column should end at about the same height: move a small panel under the sidebar rather than leave the column short.\n- Inner pages have no hero and no decoration. Under the navigation bar come the `.ds-breadcrumb` trail and, 8px below it, the `.ds-page-header`: title at `--text-h1` (32px) and one muted line on the left, actions on the right, on the backdrop with no glass behind it. Below, either a `.ds-page__main` stack at 20px gaps that runs the full 1248px (the `.ds-stat` strip, then `.ds-tabs` left-aligned as the view switch, then the table and its pagination), or `.ds-page__layout--aside`: a wide main column with a `--size-aside` (420px) column on the right for the form, the detail panel or the dialog. The left sidebar is dropped on inner pages. Fill the shorter column with something that belongs to the page (a list of what happened to the record, a panel of facts) so both end near each other.\n- Views: the specimen is one site with five screens, one showing at a time. `overview` is the home view (hero, basins sidebar, notices, tiles, latest activity). `stations` is the list (stats, tabs, table, pagination). `station` is one station's detail (its error notice, readings table and history beside the open remove dialog and a facts panel). `alerts` is the working screen (open alerts, thresholds, the empty list of acknowledged alerts, and the threshold form in the right column). `guide` is the reading page (running text beside a contents sidebar, a dark code panel and a notice). Each view is a `.ds-view` section; `.ds-nav__link` is marked current from the address, and `station` marks the Stations link.\n- Spacing scale: `--space-1` 4px (gaps between tabs, pagination cells, list bullets), `--space-2` 8px (label to control, icon to text, badge padding), `--space-3` 12px (row padding top and bottom, gaps between buttons and notices), `--space-4` 20px (panel padding, the gap between every pair of neighbouring panels, form field gap), `--space-5` 32px (hero top padding, gap before an h2), `--space-6` 48px (hero bottom padding, dialog and empty-state padding, gap above the footer), `--space-7` 96px (decoration size only).\n- Glass: light glass uses `backdrop-filter: blur(var(--backdrop-blur))`, the surface token for how strongly glass blurs what lies behind it (6px in this pack's surface set); dark glass and dialogs, the strongest glass, use three times that with `saturate(180%)`: `blur(calc(var(--backdrop-blur) * 3))` (18px). Never put a blurred element inside another blurred element; inner controls are plain translucent fills.\n- Below 900px the sidebar, the aside column, the two-column row and the hero stack, the stats stack into rows and the grid drops to two columns. Below 900px the navigation links also move to a second row under the brand and the button. Below 600px the hero title drops to `--text-h1`, tabs wrap, table columns marked `.ds-table__opt` are hidden, and the action of a list row and of the page header moves under its text.\n- On a tablet or phone (900px and below) `.ds-nav__list` takes a row of its own under the brand and the button and becomes a grid of four equal columns with centred `--text-small` labels, the current link staying a pill of light glass; there is no menu button. Below 1100px a tooltip on a form label opens at the left edge of the label, at most 26 characters wide.\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 system sans for everything: `--font-body`, `--font-heading` and `--font-ui` start with \"Segoe UI\" and fall back to the platform font; `--font-mono` for code.\n- Sizes: `--text-base` 16px, `--text-ui` 14px for buttons, navigation, table cells, notices and well text, `--text-small` 12px for meta text, badges and small uppercase titles, `--text-large` 24px for lead text, `--text-h3` 19px, `--text-h2` 24px, `--text-h1` 32px, `--text-display` 64px for the hero title.\n- Weights: `--weight-body` 400, `--weight-ui` 600 for buttons and navigation, `--weight-heading`, `--weight-display` and `--weight-bold` 700.\n- Line height: `--line-body` 1.5, `--line-heading` 1.25, `--line-display` 1.06 for the tight hero title.\n- No tracking and no uppercase from tokens (`--ui-transform` and `--heading-transform` are `none`). Uppercase is written in the component for small labels only: `.ds-page__group-title`, `.ds-sidebar__heading`, `.ds-grid__label` and table head cells. Links are marked by colour and underlined on hover only.\n- Backdrop: `--color-fill-1` (orange, 242 113 33), `--color-fill-2` (red-pink, 233 64 87) and `--color-fill-3` (plum, 138 35 135) are the three stops of the page gradient, one linear gradient at 320deg with no glows; `--color-fill-4` (salmon, 240 112 112) joins them as the fourth tile tint. Tiles mix them with `transparent` at 55%; they are never opaque blocks.\n- Light glass: `--color-surface` is white at 20% for the wells and the shards; the sheet, the sidebar and the navigation pill use `--fill-panel`, the same white made milkier (`--color-surface` mixed with 20% white, about 36% in all), so the frost reads more than the backdrop behind it; `--color-surface-alt` white at 30% for the current item, and list icons, `--color-surface-strong` white at 40% for hovered controls and slider tracks. Borders are white: `--color-border` 30%, `--color-border-strong` 40%, `--color-border-muted` 10% for hairlines and hover tints.\n- Dark glass: `--color-bar` (plum at 75%) for code blocks, `--color-bar-alt` (plum at 60%) for the tab strip and status badges, `--color-input` (plum at 60%) for form controls. Text on all of them is white.\n- Text is white (`--color-text`, `--color-heading`) on glass and on the backdrop; `--color-text-muted` is white at 80%. `--color-link` is cyan (38 230 255), `--color-link-visited` pale lavender (216 205 249); navigation, titles, table links and footer links are `--color-link-quiet` (white).\n- `--color-button` is solid white with plum text (`--color-button-text`); `--color-accent` is white with plum text too, so counts read as white pills. `--color-accent-alt` (green, 0 131 37) marks \"new\".\n- `--color-danger` is a dark maroon (84 10 25) because red does not show on a red backdrop; `--color-danger-surface` is the backdrop red at 60%. `--color-success` is a bright green (42 238 98), `--color-warning` the backdrop orange. They appear as a 1px ring and an 8px dot on status badges, as the border of an error, and at 70% as the tint of the destructive button.\n- `--color-shadow` is black at 20%; `--color-notice` is white at 60% with maroon text.\n- Controls are pills: `--radius-control` 20px on a 40px button. Wells are tighter, `--radius-panel` 10px; `--radius-page` 20px for the sheet, tiles and dialog, `--radius-pill` 30px for badges and the navigation pill.\n- Shadows fall far and soft: `--shadow-panel` 0 22px 38px, pulled in 6px, on the sheets and the navigation pill, `--shadow-dialog` 0 20px 40px, `--shadow-control` 0 1px 1px. `--shadow-text` (0 2px 4px) is used on the brand, the hero title, page titles, large figures and secondary buttons.\n- One-off values with no token: the strongest glass multiplies `--backdrop-blur` by three with `calc()`, `saturate(180%)` is written inline on the navigation pill, tile tints and the destructive button use `color-mix()` over tokens with `transparent`, the shards are `--color-surface` at `opacity: 0.4`.\n\n- `--fill-page` layers a 24px grid of 1px dots over the ember glow (an oval 760px wide at the top centre, 620px ovals at alternating edges below) on the page colour.\n- Corners are tight: `--radius-control` 3px, `--radius-panel` 6px, `--radius-page` 10px; only `--radius-pill` (30px) stays round.\n- `--border-width` and `--border-width-strong` are both 2px: the outline is the surface. Glass is smoked, `--fill-panel` being `--color-surface` mixed with 35% black, so a panel is a darker pane inside a pale 2px frame.\n- Nothing floats: `--shadow-panel` and `--shadow-control` are `none`. Only the dialog casts a shadow (`--shadow-dialog`, 0 24px 48px in black). A hovered button gains a 2px bright ring, and `--focus-ring` is a 2px dashed line.\n- `--shadow-text` is `none`.\n- `--backdrop-blur` is 3px, the lightest of the era: the dot grid and the glow stay readable through a pane, only softened. The strongest glass of a layout blurs three times that, 9px.\n- Every fill is flat; transitions run 0.15s.\n\n## Components\n\n- `.ds-page`: on ``; paints the gradient backdrop and sets the base type. `.ds-page__inner` is the width container, `.ds-page__layout` the sidebar-plus-main grid, `.ds-page__main` a vertical stack, `.ds-page__row` two equal columns, with `--stretch` for equal heights and `--below` for a row under the sidebar layout. `.ds-page__layout--aside` is the inner-page grid: main column left, 420px column right, no sidebar. `.ds-page__heading` is a small heading on the backdrop above a list (18px, `--color-heading-alt`), with an optional badge or link at its right end. `.ds-view` is one screen of the specimen; in an application each is its own document.\n- `.ds-nav`: full-width dark glass bar. It holds the `.ds-brand`, then `.ds-nav__list` with `.ds-nav__link`; the current item is `is-current`, a pill of light glass (the specimen sets it from the address instead).\n- `.ds-brand`: the site's mark and name, at the left end of the navigation bar: `.ds-brand__mark` is a small tile (28px) dressed like the primary button (`--fill-button`, `--color-button-text`, a 1px `--color-border` edge, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, `.ds-brand__name` is the name in the heading font at `--text-h3` in `--color-bar-text`, with the text shadow. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: page introduction directly on the backdrop: `.ds-hero__title` at the display size, `.ds-hero__lead`, `.ds-hero__actions`. `.ds-hero__art` holds the era's floating decoration: gradient orbs (`.ds-hero__orb--a`, `--b`) behind a tilted glass tile (`.ds-hero__tile`), which is what makes the blur visible. Use the art once per page.\n- `.ds-page-header`: head of an inner page, used instead of the hero: `.ds-page-header__text` holds `.ds-page-header__title` (32px, semibold, with the text shadow) and one line of `.ds-page-header__lead` (16px, muted); `.ds-page-header__actions` sits at the right, bottom-aligned with the text, with at most one primary button. It has no fill, border or blur of its own. Put the breadcrumb directly above it.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`. `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark glass code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for white, undecorated links in tables and titles.\n- `.ds-button`: primary, pale solid, 36px high, 4px radius. `.ds-button--secondary` is a glass button with a light border; `.ds-button--danger` is the destructive action (delete, remove): a glass button tinted red at 70% with a red border and white text, solid red on hover; use it once, at the end of a group or as the confirming button of a dialog. `.ds-button--large` for the hero; `is-disabled` or `disabled` for the grey disabled state. One primary button per group.\n- `.ds-form`: vertical form inside a panel. `.ds-form__field` wraps an uppercase `.ds-form__label` and a control: `.ds-form__input`, `.ds-form__textarea`, `.ds-form__select` (inside `.ds-form__select-wrap` with a `.ds-form__chevron` icon), `.ds-form__range` (the era's slider: thin light track, round glass thumb), `.ds-form__check` with `.ds-form__checkbox`. An invalid input takes `is-error` and is followed by `.ds-form__error`; `.ds-form__hint` is help text. Controls are dark glass with a 30% white border.\n- `.ds-table`: data table as one sheet of glass: dark glass head with uppercase labels, hairline row dividers, no stripes. `.ds-table__num` right-aligns a numeric column, `.ds-table__opt` marks a column that is hidden below 600px, `.ds-table__meta` is muted text, `is-hover` on a row lightens it.\n- `.ds-list`: item list as one sheet of glass with hairline dividers. `.ds-list__item` holds a `.ds-list__body` (with `.ds-list__title` and `.ds-list__meta`) and an optional action. `.ds-list__dot` is a status dot; `--off` turns it red.\n- `.ds-panel`: the basic sheet of glass. `.ds-panel__title` is a small uppercase title strip with a hairline under it, `.ds-panel__body` the padded content. `.ds-panel--dark` is the dark glass variant for code or settings.\n- `.ds-grid`: four tinted glass tiles. `.ds-grid__cell` with `--1` to `--4` picks the tint from `--color-fill-*`; inside, `.ds-grid__label`, `.ds-grid__value`, `.ds-grid__meta`.\n- `.ds-stat`: row of summary figures as one sheet of glass, cut by vertical hairlines instead of gaps. Each `.ds-stat__item` has a small uppercase `.ds-stat__label` above a `.ds-stat__value` (24px, semibold, tabular figures); `.ds-stat__meta` inside the value is a muted 13px note on the same line. Three to five items; they share the width equally and stack below 900px. Use it on inner pages; the tinted `.ds-grid` tiles are the home page's form of the same thing.\n- `.ds-tabs`: segmented control on dark glass; `.ds-tabs__tab` with `is-current` for the selected segment. Use it for view switches, not for site navigation. On inner pages it sits under the page header and stats, left-aligned.\n- `.ds-badge`: pill for counts and markers: cyan by default, `.ds-badge--alt` solid teal for \"new\", `.ds-badge--glass` neutral glass for quiet counts. Status labels are `.ds-badge--success` (online, paid), `.ds-badge--warning` (rising, pending) and `.ds-badge--danger` (silent, failed): a dark glass pill with white text, a 1px ring and a leading 8px dot in the status colour, built like the error notice. Use the status variants in tables and lists; do not colour the whole pill.\n- `.ds-sidebar`: glass block in the left column: `.ds-sidebar__heading` (small uppercase), `.ds-sidebar__list`, `.ds-sidebar__link` with `is-current`.\n- `.ds-notice`: information notice on pale frosted glass with dark text; `.ds-notice--error` is dark glass with a red border, icon and title. `.ds-notice__icon`, `.ds-notice__title`; `.ds-notice__stack` stacks several.\n- `.ds-pagination`: row of small glass cells, `.ds-pagination__link`; the current page is `is-current` and takes the primary button fill.\n- `.ds-breadcrumb`: small muted trail above the page header of an inner page, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for the linked levels.\n- `.ds-dialog`: a dimmed sheet (`--color-overlay`) with a centred `.ds-dialog__box` of strongly blurred glass, 500px wide, 16px radius: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions`, all centred. The box is frosted glass over the canvas colour (`--color-surface-alt` laid over `--color-canvas` at 82%, written with `color-mix()`), so its text keeps the contrast it has on the page under any palette.\n- `.ds-empty`: empty state on a glass panel: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: full-width dark glass strip with small text; `.ds-footer__inner`, `.ds-footer__links`, `.ds-footer__link`.\n- `.ds-menu`: a drop-down of the strongest glass under its `.ds-menu__trigger`, shown on hover or focus (or with `is-open`): `.ds-menu__list` of `.ds-menu__link` rows with an optional `.ds-menu__meta`. Use it for the account or workspace menu; `.ds-menu__group` sets it beside a button, `.ds-menu__list--start` hangs it from the left edge.\n- `.ds-accordion`: one sheet of glass of `
` sections: `.ds-accordion__item`, `.ds-accordion__summary` with a chevron that turns when open, `.ds-accordion__body`. Use it for questions and for settings that are rarely opened; `.ds-accordion--flush` drops its own sheet when it sits inside another panel.\n- `.ds-tooltip`: a round hint mark inside a form label; `.ds-tooltip__tip` is an inverted block above it, shown on hover or focus (or with `is-open`). One sentence.\n- `.ds-switch`: an on/off row: `.ds-switch__text` with a `.ds-switch__hint`, the hidden `.ds-switch__input` checkbox and the drawn `.ds-switch__track`, which takes the accent fill when on. `.ds-switch__group` is the tinted box that holds a few of them, divided by hairlines.\n- `.ds-progress`: a thin track with a `.ds-progress__bar` in the accent fill; width classes `--15`, `--25`, `--40`, `--65`, `--75`, `--85`, `--90`. Use it under a figure that is a share of a whole; `.ds-progress__label` is an optional line above it.\n- `.ds-avatar`: a round account picture drawn from initials, in the accent fill; `--2` to `--4` take a tint from `--color-fill-*`, `--large` is the profile size. `.ds-avatar__row` sets it beside `.ds-avatar__name` and `.ds-avatar__meta`.\n\n## Never\n\n- `row-gap <= 4px`: rows of a table or list touch and are divided by a hairline; only bullets in running text sit 4px apart.\n- `block-gap <= 48px`: neighbouring panels sit 20px apart; 48px is the largest gap on the page.\n- `content-width <= 1248px`: the column is capped while the backdrop fills the viewport.\n- `font-size <= 64px`: the hero title is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: headings are bold, never black.\n- `font-families <= 2`: one sans and one monospace.\n- `line-height <= 1.5`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 25%`: underline is a hover state.\n- `uppercase-text <= 10%`: uppercase is for small labels only.\n- `border-width <= 2px`: every border is 2px, never heavier.\n- `border-radius <= 30px`: panels are 6px, large containers 10px, pills 30px.\n- `box-shadow-blur <= 48px`: only the dialog casts a shadow, blurred 48px.\n- `text-shadow = none`: no text shadow anywhere.\n- `gradient-fills <= 10%`: glass is a flat translucent fill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a new container starts from `.ds-panel` (fill, 1px border, radius, shadow and blur together, never one without the others), a new control from `.ds-button--secondary` or `.ds-form__input`, a new overlay from `.ds-dialog__box`. Use tokens only; for a shade or size with no token use `color-mix()` over tokens with `transparent`, or `calc()` over `--space-*`. Keep opaque fills to buttons and badges, keep text white on glass, and place glass only where the backdrop behind it has colour to show through.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1248px;\n --size-sidebar: 240px;\n --size-aside: 420px;\n --size-dialog: 500px;\n --size-nav: 64px;\n --size-control: 36px;\n --size-tile: 150px;\n --size-art: 300px;\n --size-icon: 16px;\n --size-dot: 8px;\n --size-thumb: 20px;\n --size-track: 4px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 20px;\n --space-5: 32px;\n --space-6: 48px;\n --space-7: 96px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-page__inner {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-page__layout {\n display: grid;\n grid-template-columns: var(--size-sidebar) minmax(0, 1fr);\n gap: var(--space-4);\n align-items: start;\n margin-top: var(--space-4);\n}\n.ds-page__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n min-width: 0;\n}\n.ds-page__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-page__row--stretch {\n align-items: stretch;\n}\n.ds-page__layout--aside {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n margin-top: 0;\n}\n.ds-page__heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-2) 0 calc(-1 * var(--space-2));\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page__heading .ds-link {\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: dark glass bar across the viewport */\n.ds-nav {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-4);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: calc(var(--size-thumb) + var(--space-2));\n height: calc(var(--size-thumb) + var(--space-2));\n flex: none;\n padding: var(--space-1);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0 0 0 auto;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#overview:target) .ds-nav__link[href=\"#overview\"],\n.ds-page:has(#stations:target) .ds-nav__link[href=\"#stations\"],\n.ds-page:has(#station:target) .ds-nav__link[href=\"#stations\"],\n.ds-page:has(#alerts:target) .ds-nav__link[href=\"#alerts\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"] {\n background: var(--color-surface);\n border-color: var(--color-border);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n opacity: 0.6;\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 text-decoration: var(--link-decoration-hover);\n}\n\n/* page header: head of an inner page, set on the backdrop like the hero, one size down */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-2) 0 var(--space-4);\n}\n.ds-page-header__text {\n flex: 1;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-base);\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* hero: title, lead and action on the backdrop, floating glass tiles beside it */\n.ds-hero {\n display: grid;\n grid-template-columns: minmax(0, 1fr) var(--size-art);\n gap: var(--space-6);\n align-items: center;\n padding: var(--space-5) 0 var(--space-6);\n}\n.ds-hero__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 56ch;\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin-top: var(--space-4);\n}\n.ds-hero__art {\n position: relative;\n height: calc(var(--size-tile) + var(--space-6));\n}\n.ds-hero__orb {\n position: absolute;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 25%, var(--color-fill-4), var(--color-fill-2));\n}\n.ds-hero__orb--a {\n top: 0;\n left: 8%;\n width: var(--space-7);\n height: var(--space-7);\n}\n.ds-hero__orb--b {\n right: 4%;\n bottom: 0;\n width: calc(var(--space-7) + var(--space-5));\n height: calc(var(--space-7) + var(--space-5));\n background: radial-gradient(circle at 30% 25%, var(--color-accent), var(--color-fill-3));\n}\n.ds-hero__tile {\n position: absolute;\n top: 16%;\n left: 18%;\n width: 66%;\n height: 68%;\n padding: var(--space-4);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transform: rotate(-8deg);\n}\n.ds-hero__figure {\n display: block;\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 text-shadow: var(--shadow-text);\n}\n.ds-hero__caption {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-5);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-4);\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-4);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-bar-alt);\n border-radius: var(--radius-control);\n color: var(--color-accent);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: var(--space-3) 0 0;\n padding: var(--space-3) var(--space-4);\n overflow-x: auto;\n background: var(--color-bar);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\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 text-decoration: var(--link-decoration-hover);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-3);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n border-color: var(--color-border-strong);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: linear-gradient(var(--color-surface-strong), var(--color-surface-strong)), var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 70%, transparent);\n border-color: var(--color-danger);\n color: var(--color-button-secondary-text);\n text-shadow: var(--shadow-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger);\n color: var(--color-button-secondary-text);\n}\n.ds-button--large {\n padding: var(--space-3) var(--space-5);\n font-size: var(--text-base);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n text-shadow: none;\n cursor: not-allowed;\n}\n\n/* panel: the basic sheet of glass */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-panel__body {\n padding: var(--space-4);\n}\n.ds-panel__body > :first-child {\n margin-top: 0;\n}\n.ds-panel--dark {\n background: var(--fill-bar);\n border-color: var(--color-border-muted);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: uppercase;\n}\n.ds-form__input,\n.ds-form__textarea,\n.ds-form__select {\n width: 100%;\n min-height: var(--size-control);\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n transition: var(--transition);\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-disabled-text);\n opacity: 1;\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__select {\n appearance: none;\n -webkit-appearance: none;\n padding-right: var(--space-5);\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-3);\n width: var(--size-icon);\n height: var(--size-icon);\n transform: translateY(-50%);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus,\n.ds-form__textarea:focus,\n.ds-form__select:focus,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: 0;\n border-color: var(--color-focus);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin: 0;\n accent-color: var(--color-accent);\n}\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n background: transparent;\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n -webkit-appearance: none;\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-text);\n border-radius: 50%;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n/* table: glass sheet, dark glass head, hairline rows */\n.ds-table {\n width: 100%;\n overflow: hidden;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n background: var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: rows inside a sheet of glass, divided by hairlines */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n}\n.ds-list__item + .ds-list__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__meta {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__dot {\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n background: var(--color-accent-alt);\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n\n/* grid: tinted glass tiles */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n min-height: var(--size-tile);\n padding: var(--space-4);\n background: radial-gradient(circle at 0 0, var(--color-surface-alt), transparent), var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-grid__cell--1 {\n background-color: color-mix(in srgb, var(--color-fill-1) 55%, transparent);\n}\n.ds-grid__cell--2 {\n background-color: color-mix(in srgb, var(--color-fill-2) 55%, transparent);\n}\n.ds-grid__cell--3 {\n background-color: color-mix(in srgb, var(--color-fill-3) 55%, transparent);\n}\n.ds-grid__cell--4 {\n background-color: color-mix(in srgb, var(--color-fill-4) 55%, transparent);\n}\n.ds-grid__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-grid__value {\n margin-top: auto;\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 text-shadow: var(--shadow-text);\n}\n.ds-grid__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* stats: one sheet of glass cut into figures by vertical hairlines */\n.ds-stat {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n margin: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-stat__item {\n padding: var(--space-3) var(--space-4);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__label {\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n}\n.ds-stat__value {\n display: flex;\n flex-wrap: wrap;\n align-items: baseline;\n gap: 0 var(--space-2);\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n\n/* tabs: segmented control on dark glass */\n.ds-tabs {\n display: inline-flex;\n align-self: flex-start;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-bar-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) + var(--space-1));\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-control);\n color: var(--color-bar-alt-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-border-muted);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-surface-alt);\n box-shadow: var(--shadow-control);\n color: var(--color-text);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: none;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: var(--color-accent-alt);\n color: var(--color-text);\n}\n.ds-badge--glass {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n color: var(--color-text);\n}\n/* status badges: a dark glass pill with a 1px ring and a dot in the status colour, like the error notice */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n background: var(--fill-bar-alt);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-success);\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-warning);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-danger);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n\n/* sidebar */\n.ds-sidebar {\n padding: var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-sidebar__heading {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__heading + .ds-sidebar__list + .ds-sidebar__heading {\n margin-top: var(--space-4);\n}\n.ds-sidebar__list {\n margin: 0 calc(-1 * var(--space-2));\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-sidebar__link.is-current {\n background: var(--color-surface-alt);\n}\n\n/* notice */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-text);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-notice--error .ds-notice__icon,\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n justify-content: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n color: var(--color-link-quiet);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n border-color: transparent;\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-disabled-text);\n}\n\n/* dialog: strongly blurred glass box on a dimmed sheet, shown in the page flow */\n.ds-dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-4) var(--space-4) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n text-align: center;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n color: var(--color-text-muted);\n text-align: center;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: 0 var(--space-4) var(--space-4);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-6) var(--space-4);\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* footer */\n.ds-footer {\n margin-top: var(--space-6);\n background: var(--fill-bar-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-bar-alt-text);\n font-size: var(--text-small);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n max-width: calc(var(--size-page) + 2 * var(--space-4));\n margin: 0 auto;\n padding: var(--space-4);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n.ds-menu {\n position: relative;\n}\n.ds-menu__trigger {\n cursor: pointer;\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n display: none;\n min-width: 24ch;\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: linear-gradient(var(--color-surface-alt), var(--color-surface-alt)), color-mix(in srgb, var(--color-canvas) 82%, transparent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n -webkit-backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n backdrop-filter: blur(calc(var(--backdrop-blur) * 3)) saturate(180%);\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list {\n display: block;\n}\n.ds-menu__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-border-muted);\n}\n.ds-menu__meta {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-accordion {\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 -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n flex: none;\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n transition: var(--transition);\n}\n.ds-accordion__item[open] > .ds-accordion__summary::after {\n transform: rotate(-135deg);\n}\n.ds-accordion__summary:focus-visible,\n.ds-accordion__summary.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(-1 * var(--space-1));\n}\n.ds-accordion__body {\n margin: 0;\n padding: 0 var(--space-4) var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: 26ch;\n padding: var(--space-2) var(--space-3);\n transform: translateX(-50%);\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-inverse-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: left;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n cursor: pointer;\n}\n.ds-switch + .ds-switch {\n margin-top: var(--space-3);\n padding-top: var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-switch__text {\n min-width: 0;\n}\n.ds-switch__hint {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-switch__input {\n position: absolute;\n right: 0;\n width: calc(var(--size-thumb) * 2);\n height: var(--size-thumb);\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n width: calc(var(--size-thumb) * 2);\n height: calc(var(--size-thumb) + var(--space-1));\n flex: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--space-1);\n width: calc(var(--size-thumb) - var(--space-1));\n height: calc(var(--size-thumb) - var(--space-1));\n transform: translateY(-50%);\n background: var(--color-input-text);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch__track.is-on {\n background: var(--fill-accent);\n border-color: transparent;\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch__track.is-on::after {\n left: calc(100% - var(--size-thumb));\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch__track.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-switch__input:disabled + .ds-switch__track,\n.ds-switch__track.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n}\n.ds-progress {\n display: block;\n height: calc(var(--size-track) * 2);\n overflow: hidden;\n background: color-mix(in srgb, var(--color-text) 18%, transparent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar {\n display: block;\n width: 50%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar--90 { width: 90%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin-bottom: var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-control);\n height: var(--size-control);\n flex: none;\n background: var(--fill-accent);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-avatar__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-avatar__name {\n display: block;\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-avatar__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-menu__list--start {\n right: auto;\n left: 0;\n}\n.ds-menu__group {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-stat__value .ds-progress,\n.ds-stat__item > .ds-progress,\n.ds-grid__cell .ds-progress {\n width: 100%;\n min-width: calc(var(--space-6) * 2);\n margin-top: var(--space-2);\n}\n.ds-accordion--flush {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n -webkit-backdrop-filter: none;\n backdrop-filter: none;\n}\n.ds-accordion--flush .ds-accordion__summary,\n.ds-accordion--flush .ds-accordion__body {\n padding-left: 0;\n padding-right: 0;\n}\n.ds-switch__group {\n padding: var(--space-3) var(--space-4);\n background: var(--color-border-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n}\n.ds-form__label .ds-tooltip {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n@media (max-width: 900px) {\n .ds-page__layout,\n .ds-page__row,\n .ds-hero {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-stat {\n grid-auto-flow: row;\n }\n .ds-stat__item + .ds-stat__item {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-left: 0;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-hero__art {\n display: none;\n }\n}\n/* ---------- below 900px the links take a row of their own under the brand and the button ---------- */\n@media (max-width: 900px) {\n .ds-nav__inner {\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-3);\n padding-top: var(--space-3);\n padding-bottom: var(--space-2);\n }\n .ds-nav__list {\n order: 3;\n flex-basis: 100%;\n min-width: 0;\n }\n}\n@media (max-width: 600px) {\n .ds-hero {\n padding: var(--space-4) 0 var(--space-5);\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-grid__cell {\n min-height: calc(var(--size-tile) - var(--space-5));\n padding: var(--space-3);\n }\n .ds-grid__value {\n font-size: var(--text-h2);\n }\n .ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-self: stretch;\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3) var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-list__item {\n flex-wrap: wrap;\n }\n .ds-list__body,\n .ds-page-header__text {\n flex-basis: 100%;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-dialog__actions,\n .ds-footer__links {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 900px) {\n .ds-nav__list {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0;\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-1);\n font-size: var(--text-small);\n text-align: center;\n }\n .ds-brand {\n min-width: 0;\n }\n}\n@media (max-width: 1100px) {\n .ds-form__label {\n position: relative;\n }\n .ds-form__label .ds-tooltip {\n position: static;\n }\n .ds-form__label .ds-tooltip__tip {\n left: 0;\n max-width: min(26ch, 100%);\n transform: none;\n }\n}\n@media (max-width: 600px) {\n .ds-page-header__actions {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 600px) {\n .ds-page-header__actions {\n flex: 0 1 auto;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: north basin overview\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\nNew threshold\n
\nIV\n\n
\n
\n
\n
\n\n
\n\n
\n\n
\n
\n

North basin overview

\n

Water level, flow and temperature from twelve stations, refreshed every five minutes.

\n
\n See all stations\n How readings work\n
\n
\n
\n \n \n
\n 2.84 m\n Level at the weir, 09:40\n
\n
\n
\n\n
\n\n
\n \n\n
\n

Station notes 3

\n
\n The gauge at Reed bank sits behind a stand of willow and loses signal in high wind. A second antenna is planned for the spring visit.\n
\n
\n
\n\n
\n\n
\n
\n \n
Maintenance window. Readings from Mill reach pause on Thursday between 02:00 and 03:00.
\n
\n
\n \n
Station 08 is not reporting. The last reading arrived 46 minutes ago. Check the power supply at the gauge.
\n
\n
\n\n
\n
\n Water level\n 2.84 m\n 0.12 m above yesterday\n
\n
\n Flow\n 41.6 m³/s\n Steady for six hours\n
\n
\n Temperature\n 11.3 °C\n Measured at two metres\n
\n
\n Stations online\n 11 / 12\n One needs attention\n\n
\n
\n\n

Latest activity All alerts

\n\n \n\n
\n
\n\n
\n\n
\n\n
    \n
  1. Workspace
    2. \n
  2. North basin
    3. \n
  3. Stations
    4. \n
\n\n
\n
\n

Stations

\n

Twelve gauges along the north basin, listed from the weir down to the outfall.

\n
\n
\n Export\n Set a threshold\n
\n
\n\n
\n\n
\n
\n
Reporting
\n
11 of 12 stations
\n
\n
\n
Above threshold
\n
1 since 09:12
\n
\n
\n
Readings today
\n
1,284 every 5 minutes
\n
\n
\n
Longest silence
\n
46 min at Reed bank
\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
StationStatusLast readingLevel (m)Flow (m³/s)Temp. (°C)
01 Weir crestOnline2 minutes ago2.8441.611.3
03 FootbridgeOnline4 minutes ago2.6138.911.2
04 Mill raceOnline2 minutes ago2.5512.411.6
05 Old lockRising1 minute ago3.0744.211.0
07 Ferry stepsOnline5 minutes ago2.1239.710.8
08 Reed bankSilent46 minutes ago1.980.011.1
11 OutfallOnline3 minutes ago1.4240.310.6
\n\n \n\n
\n
\n\n
\n\n
    \n
  1. North basin
    2. \n
  2. Stations
    3. \n
  3. 08 Reed bank
    4. \n
\n\n
\n
\n

08 Reed bank Silent

\n

Level and flow gauge on the east bank, installed in March. Last heard from at 08:54.

\n
\n
\n Set a threshold\n Remove station\n
\n
\n\n
\n\n
\n\n
\n \n
No reading for 46 minutes. The station keeps seven days on board and sends them when the link returns.
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Taken atArrivedLevel (m)Flow (m³/s)Temp. (°C)
08:5408:541.9822.411.1
08:4908:491.9822.611.1
08:4408:51, late1.9722.111.0
08:3908:51, late1.9722.311.0
08:3408:341.9621.910.9
\n\n
    \n
  • \n
    \n Stopped reporting\n Today, 09:24 · the duty desk was told\n
    \n Review\n
    • \n
  • \n
    \n Two readings arrived late\n Today, 08:51 · weak signal in high wind\n
    \n
    • \n
  • \n
    \n Battery changed\n Visit by Tomas Reuter · 12 days ago\n
    \n
    • \n
\n\n
\n\n
\n\n
\n
\n

Remove station 08?

\n
Its readings stay in the archive. Thresholds that use this station are switched off.
\n
\n Keep station\n Remove\n
\n
\n
\n\n
\n

About this station

\n
\n

Reed bank sits behind a stand of willow, 1.4 km below the weir. It measures every five minutes and sends over the radio link at Footbridge.

\n
    \n
  • Battery at 71 percent, changed 12 days ago.
    • \n
  • One threshold: level above 2.60 m.
    • \n
  • Next visit planned for the spring round.
    • \n
\n
\n
\n\n
\n
\n
\n\n
\n\n
    \n
  1. Workspace
    2. \n
  2. North basin
    3. \n
  3. Alerts
    4. \n
\n\n
\n
\n

Alerts

\n

What crossed a threshold today, and the thresholds that decide it.

\n
\n
\n What counts as a crossing\n
\n
\n\n
\n\n
\n\n

Open 2

\n\n \n\n

Thresholds 3

\n\n
    \n
  • \n
    \n High water at Old lock\n Level above 3.00 m · repeats hourly\n
    \n On\n
    • \n
  • \n
    \n Low flow at Outfall\n Flow below 12.0 m³/s · told once\n
    \n On\n
    • \n
  • \n
    \n Reed bank level\n Level above 2.60 m · paused while the station is silent\n
    \n Paused\n
    • \n
\n\n

Acknowledged today

\n\n
\n \n

Nothing acknowledged yet

\n

Alerts move here once someone on duty has reviewed them.

\n Review the oldest alert\n
\n\n
\n\n
\n

Alert threshold

\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n Enter a complete email address.\n
\n
\n \n \n Shown at the top of the alert.\n
\n \n
\n\n\n
\n
\n \n Cancel\n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n\n
    \n
  1. Workspace
    2. \n
  2. North basin
    3. \n
  3. Guide
    4. \n
\n\n
\n
\n

Guide

\n

How a reading gets from the gauge to this workspace, and when it raises an alert.

\n
\n
\n Set a threshold\n
\n
\n\n
\n\n
\n
\n
\n

How readings are collected

\n

Each station measures on its own clock and sends what it has when the link is up.

\n

A reading is a level, a flow and a temperature taken in the same second. Stations keep seven days of readings on board, so a short outage loses nothing. Each one is stored with the field taken_at, not the time it arrived.

\n

Thresholds

\n

A threshold belongs to one station and one measure. When a reading crosses it, the people on the list are told once, and again each hour if repeating is on. Thresholds are kept on the alerts page.

\n

What counts as a crossing

\n
    \n
  • Two readings in a row beyond the threshold.
    • \n
  • A single reading more than ten percent beyond it.
    • \n
  • A station that has been silent for thirty minutes, as 08 Reed bank is now.
    • \n
\n

\n Normal link\n Visited link\n Hovered link\n Active link\n Quiet link\n

\n
\n
\n
\n\n
\n\n \n
\n
\nWhy did an alert arrive late?\n

A station that loses its link sends its readings when the link returns. The alert carries the time of the reading.

\n
\n
\nCan two people get the same alert?\n

Yes. Add a second threshold with the same level and another address.

\n
\n
\nHow long are readings kept?\n

Seven days on the station and two years in the workspace.

\n
\n
\n\n
\n

A threshold as stored

\n
\n 
station: 05\nmeasure: level\nabove:   3.00\nrepeat:  hourly
\n

Change it on the alerts page; the file is rewritten for you.

\n
\n
\n\n
\n \n
Times are local. Every time in this workspace is shown in the basin's own time zone.
\n
\n\n
\n
\n
\n\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.glassmorphism.app.s01.p01.t02.u11\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"glassmorphism\",\n \"years\": [\n 2020,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-gl-112b\",\n \"short\": \"v1-gl-112b\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(17 25 39);\n --color-canvas: rgb(17 25 39);\n --color-surface: rgb(255 255 255 / 0.2);\n --color-surface-alt: rgb(255 255 255 / 0.25);\n --color-surface-strong: rgb(255 255 255 / 0.4);\n --color-bar: rgb(17 25 40 / 0.75);\n --color-bar-text: rgb(255 255 255);\n --color-bar-alt: rgb(17 25 40 / 0.6);\n --color-bar-alt-text: rgb(228 231 235);\n --color-inverse: rgb(241 247 255);\n --color-inverse-text: rgb(39 55 76);\n --color-text: rgb(255 255 255);\n --color-text-muted: rgb(209 213 219);\n --color-heading: rgb(255 255 255);\n --color-heading-alt: rgb(228 231 235);\n --color-link: rgb(38 230 255);\n --color-link-quiet: rgb(255 255 255);\n --color-link-visited: rgb(128 175 231);\n --color-link-hover: rgb(255 255 255);\n --color-link-active: rgb(79 229 255);\n --color-border: rgb(255 255 255 / 0.18);\n --color-border-strong: rgb(255 255 255 / 0.3);\n --color-border-muted: rgb(255 255 255 / 0.125);\n --color-accent: rgb(79 229 255);\n --color-accent-text: rgb(17 25 39);\n --color-accent-alt: rgb(19 169 135);\n --color-fill-1: rgb(46 29 125);\n --color-fill-2: rgb(47 110 211);\n --color-fill-3: rgb(138 35 135);\n --color-fill-4: rgb(80 149 228);\n --color-button: rgb(241 247 255);\n --color-button-text: rgb(31 57 88);\n --color-button-hover-text: rgb(17 25 39);\n --color-button-secondary: rgb(255 255 255 / 0.25);\n --color-button-secondary-text: rgb(255 255 255);\n --color-input: rgb(17 25 40 / 0.6);\n --color-input-text: rgb(255 255 255);\n --color-input-border: rgb(255 255 255 / 0.3);\n --color-disabled: rgb(75 86 99);\n --color-disabled-text: rgb(156 163 175);\n --color-danger: rgb(242 84 91);\n --color-danger-surface: rgb(17 25 40 / 0.75);\n --color-success: rgb(19 169 135);\n --color-warning: rgb(242 113 33);\n --color-notice: rgb(225 236 244 / 0.6);\n --color-notice-text: rgb(39 55 76);\n --color-focus: rgb(38 230 255);\n --color-shadow: rgb(31 38 135 / 0.37);\n --color-overlay: rgb(0 0 0 / 0.61);\n}\n\n/* @part type */\n:root {\n --font-body: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-heading: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-ui: \"Segoe UI\", -apple-system, Roboto, \"Helvetica Neue\", sans-serif;\n --font-mono: Consolas, Menlo, Monaco, \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 24px;\n --text-display: 64px;\n --text-h1: 32px;\n --text-h2: 24px;\n --text-h3: 19px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.06;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 6px;\n --radius-pill: 30px;\n --radius-page: 10px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: 0 0 0 2px var(--color-border-strong);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 24px 48px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page:\n radial-gradient(circle, color-mix(in srgb, var(--color-text) 16%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,\n radial-gradient(ellipse 760px 420px at 50% 0, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 1500px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 0 2700px, var(--color-fill-1), transparent),\n radial-gradient(ellipse 620px 480px at 100% 3900px, var(--color-fill-1), transparent),\n var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: color-mix(in srgb, var(--color-surface), black 35%);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 60%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n --backdrop-blur: 3px;\n}\n" } }