<!-- <Web.StyleGuideHTML.styles> lib/web/controllers/style_guide_html/styles.html.heex:1 (sarduty) --><style data-phx-loc="2">
/* The design system's tokens: colours with a light and a dark value, the type scale, and
   the spacing scale. The app and the style guide (/styles/draft) both read this file. The
   guide parses the palette: keep each colour on one line, as a light-dark() pair with its
   use in a trailing comment, under a "group:" comment. */

/* cspell:ignore Plex Segoe Menlo */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* group: Surfaces */
  --bg: light-dark(#ffffff, #0d1117); /* Page background */
  --surface-alt: light-dark(#f3f2f1, #161c24); /* Table headers, panels, sunken areas */
  --row-alt: light-dark(#f8f8f7, #121821); /* Zebra rows */
  --row-hover: light-dark(#eaf2fa, #1b2633); /* Row under the pointer */
  --border: light-dark(#b1b4b6, #3b4654); /* Inputs and table rules */
  --border-subtle: light-dark(#dedfe0, #252e39); /* Row dividers */

  /* group: Text */
  --text: light-dark(#0b0c0c, #e6e9ec); /* Body text */
  --text-muted: light-dark(#505a5f, #9aa6b2); /* Hints, captions, secondary text */
  --link: light-dark(#1d70b8, #7ab8f5); /* Links */
  --link-hover: light-dark(#003078, #b3d6fb); /* Links under the pointer */

  /* group: Actions and status */
  --primary: light-dark(#1d4f91, #2f6fc4); /* Main buttons, current tab, page number */
  --primary-hover: light-dark(#163d70, #2563b0); /* Main button under the pointer or pressed */
  --success: light-dark(#00703c, #1f7f4c); /* Fills: save and add buttons, success banner */
  --success-text: light-dark(#00703c, #4cc38a); /* Green text: Add, tinted success tags */
  --danger: light-dark(#c2301a, #c93a24); /* Fills: delete buttons, danger tags and banners */
  --danger-text: light-dark(#c2301a, #ff8a75); /* Red text: Remove, error messages */
  --warning: light-dark(#ffb81c, #ffb81c); /* Amber fill with dark text: act soon */
  --info: light-dark(#1d70b8, #2a66b8); /* Fills: notices, info banner */
  --focus: light-dark(#ffdd00, #ffdd00); /* Keyboard focus, both modes */

  /* group: Brand and D4H */
  --nav: light-dark(#13243a, #0a111b); /* Top bar */
  --accent: light-dark(#ffb81c, #ffb81c); /* Logo, top bar rule */
  --incident: light-dark(#2453a6, #3366c0); /* D4H incident */
  --exercise: light-dark(#b4500b, #b8560f); /* D4H exercise */
  --event: light-dark(#5b3ea6, #6a4cc0); /* D4H event */

  /* group: Charts */
  --shade-1: light-dark(#dbe7f5, #172b45); /* Heat cells: a little */
  --shade-2: light-dark(#a9c6e8, #1f4a80); /* Heat cells: some */
  --shade-3: light-dark(#5b8fd1, #3474c8); /* Heat cells: a lot */
  --shade-4: light-dark(#1d4f91, #7ab8f5); /* Heat cells: the busiest */
  --compare: light-dark(#8c9297, #66717d); /* Last year's line, beside this year's */

  --on-fill: #ffffff;
  --on-warning: #0b0c0c;

  /* Type scale: size and line height. Nothing else is used. */
  --fs-xs: 12px;
  --lh-xs: 16px;
  --fs-sm: 14px;
  --lh-sm: 20px;
  --fs-md: 16px;
  --lh-md: 24px;
  --fs-lg: 19px;
  --lh-lg: 28px;
  --fs-xl: 24px;
  --lh-xl: 32px;
  --fs-2xl: 32px;
  --lh-2xl: 40px;

  /* Spacing scale, on a 4px grid. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --radius: 3px;
  --border-width: 2px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="light"],
.theme-light {
  color-scheme: light;
}

:root[data-theme="dark"],
.theme-dark {
  color-scheme: dark;
}

/* Charts and maps, drawn on the server in HTML and SVG and coloured by tokens.css. The
   style guide includes this file, so its samples are the app's. Not in a cascade layer:
   the guide's own rules sit outside any layer, and a layered rule would lose to them. */

/* cspell:ignore nums */

/* A mark takes its colour from its series class: background for boxes, fill for SVG. */
.series-incident { --c: var(--incident); }
.series-exercise { --c: var(--exercise); }
.series-event { --c: var(--event); }
.series-primary { --c: var(--primary); }
.series-compare { --c: var(--compare); }

.chart { position: relative; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-title { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--text); margin: 0; }
.chart-caption { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); margin: 0 0 var(--sp-3); }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); padding: 0; list-style: none; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }
.chart-legend li { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.chart-key { width: 12px; height: 12px; border-radius: 2px; background: var(--c); flex: none; }
.chart-key.is-line { height: 2px; border-radius: 1px; width: 16px; }
.chart-key.is-dot { border-radius: 50%; }

/* Plot area with value gridlines. The 32px on the left holds the tick labels. */
.chart-plot { position: relative; height: var(--plot-h, 200px); margin-left: 32px; border-bottom: 1px solid var(--border); }
.chart-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-subtle); }
.chart-tick span { position: absolute; right: calc(100% + 6px); top: -8px; white-space: nowrap; }
.chart-labels { display: flex; margin-left: 32px; padding-top: var(--sp-1); }
.chart-labels span { flex: 1; text-align: center; white-space: nowrap; }

/* Columns: one per bucket, segments stacked from the baseline with a 2px gap. */
.chart-columns { position: absolute; inset: 0; display: flex; align-items: stretch; }
.chart-column { flex: 1; position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.chart-column > i { width: min(24px, 64%); background: var(--c); flex: none; }
.chart-column > i:last-child { border-radius: 4px 4px 0 0; }
.chart-column:hover { background: var(--row-hover); }

/* Hover tooltips. Every value is also in the chart's table, so a tooltip never gates one. */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; z-index: 10; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: pre; text-align: left; pointer-events: none;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius);
  background: var(--text); color: var(--bg);
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 400;
}

/* Lines: an SVG stretched to the plot, with strokes that stay 2px. */
.chart-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-line polyline { fill: none; stroke: var(--c); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line polygon { fill: var(--c); opacity: 0.1; }
.chart-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg); }
.chart-end-label { position: absolute; transform: translate(8px, -50%); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); font-weight: 600; white-space: nowrap; }
.chart-hover { position: absolute; inset: 0; display: flex; }
.chart-hover > span { flex: 1; }
.chart-hover > span:hover { background: color-mix(in srgb, var(--row-hover) 70%, transparent); }

/* Sparkline: a trend with no axes, inside a stat. */
.sparkline { position: relative; height: 32px; margin-top: var(--sp-2); }

/* Stats: a number, what it counts, and how it compares. */
.chart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.chart-stat { border-top: 4px solid var(--c, var(--primary)); background: var(--surface-alt); padding: var(--sp-3) var(--sp-4); }
.chart-stat .value { display: block; font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; color: var(--text); font-variant-numeric: proportional-nums; }
.chart-stat .label { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.chart-stat .delta { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.chart-stat a.label { color: var(--link); }

/* Heat cells: 5 shades of one blue, none to the busiest. */
.shade-0 { background: var(--surface-alt); }
.shade-1 { background: var(--shade-1); }
.shade-2 { background: var(--shade-2); }
.shade-3 { background: var(--shade-3); }
.shade-4 { background: var(--shade-4); }
.chart-scale { display: flex; align-items: center; gap: 3px; margin-top: var(--sp-2); }
.chart-scale i { width: 11px; height: 11px; border-radius: 2px; }
.chart-scale span { margin: 0 var(--sp-1); }

/* Calendar: a column per week, Monday at the top. */
.chart-calendar { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-1) var(--sp-2); }
.chart-calendar-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.chart-calendar-days span { line-height: 1; align-self: center; }
.chart-calendar-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); grid-auto-columns: 1fr; gap: 3px; }
.chart-calendar-grid > i { aspect-ratio: 1; border-radius: 2px; min-width: 6px; }
.chart-calendar-grid > i.is-empty { background: none; }
.chart-calendar-months { position: relative; height: var(--lh-xs); grid-column: 2; }
.chart-calendar-months span { position: absolute; }

/* Week grid: a row per day, a column per hour. */
.chart-week { display: grid; grid-template-columns: 32px repeat(24, 1fr); gap: 2px; }
.chart-week > i { height: 18px; border-radius: 2px; }
.chart-week > span { align-self: center; }
.chart-week > .hour { grid-column: span 6; padding-top: var(--sp-1); }

/* Bar list: a row per thing, the bar to scale, the value at its tip. */
.chart-bars { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: var(--sp-2) var(--sp-3); align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }
.chart-bars > li { display: contents; }
.chart-bars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.chart-bars .track { display: flex; align-items: center; gap: var(--sp-2); }
.chart-bars .track i { height: 8px; border-radius: 0 4px 4px 0; background: var(--c, var(--primary)); min-width: 2px; }
.chart-bars .track span { color: var(--text-muted); white-space: nowrap; }

/* Map: a static Mapbox image, with the points drawn on top in SVG. */
.chart-map { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-alt); border: 1px solid var(--border-subtle); }
.chart-map img, .chart-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-map img.is-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart-map img.is-light { display: none; }
  :root:not([data-theme="light"]) .chart-map img.is-dark { display: block; }
}
:root[data-theme="dark"] .chart-map img.is-light { display: none; }
:root[data-theme="dark"] .chart-map img.is-dark { display: block; }
.chart-map circle { fill: var(--c); stroke: var(--bg); stroke-width: 2px; }
.chart-map circle:hover { stroke: var(--text); }
.chart-map .is-recent { r: 8; }
.chart-map-overlay { position: absolute; z-index: 2; background: color-mix(in srgb, var(--bg) 92%, transparent); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }

/* A chart's numbers as a table, for screen readers. */
.chart-table { display: block; top: 0; left: 0; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A dashboard card: a chart or list with its heading. */
.dash-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: var(--sp-5); }
.dash-card, .dash-stack { grid-column: span 12; }
.dash-stack { display: grid; gap: var(--sp-5); align-content: start; min-width: 0; }
.dash-stack > .dash-card { grid-column: auto; }
.dash-card { border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--sp-4); background: var(--bg); min-width: 0; }
@media (min-width: 960px) {
  .dash-grid > .span-4 { grid-column: span 4; }
  .dash-grid > .span-5 { grid-column: span 5; }
  .dash-grid > .span-6 { grid-column: span 6; }
  .dash-grid > .span-7 { grid-column: span 7; }
  .dash-grid > .span-8 { grid-column: span 8; }
}
.dash-card > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.dash-card > header a { font-size: var(--fs-sm); line-height: var(--lh-sm); white-space: nowrap; }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: var(--font);
      font-size: var(--fs-md);
      line-height: var(--lh-md);
      color: var(--text);
      background: var(--bg);
      font-variant-numeric: tabular-nums;
    }

    /* Type */
    h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 700; }
    h1, .text-2xl { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
    h2, .text-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); }
    h3, .text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); }
    h4, .text-md { font-size: var(--fs-md); line-height: var(--lh-md); }
    h2 { margin-top: var(--sp-7); }
    h3 { margin-top: var(--sp-5); }
    h4 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
    p, ul, ol, dl { margin: 0 0 var(--sp-4); }
    p, li { max-width: 70ch; }
    ul, ol { padding-left: var(--sp-5); }
    li + li { margin-top: var(--sp-1); }
    .lead { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--text-muted); }
    .small, .text-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
    .caption, .text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
    .caps { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
    .muted { color: var(--text-muted); }
    code, .mono { font-family: var(--mono); font-size: 0.875em; }
    hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-6) 0; }
    .first { margin-top: 0; }
    .text-right { text-align: right; }
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    a { color: var(--link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
    a:hover { color: var(--link-hover); text-decoration-thickness: 3px; }

    /* GOV.UK focus: yellow fill with a dark underline, on everything you can tab to */
    a:focus-visible {
      outline: 3px solid transparent;
      color: #0b0c0c;
      background: var(--focus);
      box-shadow: 0 -2px var(--focus), 0 4px #0b0c0c;
      text-decoration: none;
    }
    :is(button, .btn, input, select, textarea, summary):focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 0;
      box-shadow: inset 0 0 0 2px #0b0c0c;
    }

    /* Icons: Heroicons, sized to the text they sit in */
    .icon { display: inline-block; flex: none; }
    .icon-16 { width: 16px; height: 16px; vertical-align: -3px; }
    .icon-20 { width: 20px; height: 20px; vertical-align: -4px; }
    .icon-24 { width: 24px; height: 24px; vertical-align: -6px; }
    .btn .icon { align-self: center; }

    /* Top bar and guide layout */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-5); }
    .site-bar { background: var(--nav); color: #fff; border-bottom: 4px solid var(--accent); }
    .site-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: 56px; }
    .brand { color: #fff; font-weight: 700; font-size: var(--fs-lg); text-decoration: none; }
    .brand span { color: var(--accent); }
    .brand small { color: #aeb8c4; font-weight: 400; font-size: var(--fs-sm); margin-left: var(--sp-2); }
    .theme-switch { display: flex; border: 1px solid rgb(255 255 255 / 0.3); border-radius: var(--radius); }
    .theme-switch button {
      background: none; border: 0; color: #d5dbe3; font: inherit; font-size: var(--fs-xs);
      line-height: var(--lh-xs); padding: var(--sp-1) var(--sp-3); cursor: pointer;
    }
    .theme-switch button[aria-pressed="true"] { background: rgb(255 255 255 / 0.16); color: #fff; }

    .guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
    .guide-nav ul { list-style: none; padding: 0; margin: 0; position: sticky; top: var(--sp-5); }
    .guide-nav li + li { margin-top: 0; }
    .guide-nav a {
      display: block; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm);
      color: var(--text); text-decoration: none; border-left: 4px solid transparent;
    }
    .guide-nav a:hover { color: var(--link-hover); text-decoration: underline; }
    .guide-nav a[aria-current="page"] { border-left-color: var(--primary); font-weight: 700; background: var(--surface-alt); }
    .guide-nav .group { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-muted); padding: var(--sp-4) var(--sp-3) var(--sp-1); }
    .guide-nav .group:first-child { padding-top: 0; }

    /* Demo blocks: a labelled example on the guide pages */
    .demo { border: 1px solid var(--border-subtle); padding: var(--sp-5); margin-bottom: var(--sp-5); border-radius: var(--radius); }
    .demo > :last-child { margin-bottom: 0; }
    .spec { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-5); }

    /* Page header: breadcrumbs, title, actions */
    .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
    .breadcrumbs li { max-width: none; margin: 0; }
    .breadcrumbs .icon { color: var(--text-muted); margin-right: var(--sp-2); }
    .breadcrumbs a { color: var(--text); }
    .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
    .page-header h1 { margin: 0; }
    .page-header .meta { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); margin-top: var(--sp-1); }
    .back-link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-4); }

    /* The app's top bar, shown on the Navigation page */
    .app-bar { background: var(--nav); color: #fff; border-bottom: 4px solid var(--accent); display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-4); min-height: 52px; overflow-x: auto; }
    .app-bar .brand { white-space: nowrap; }
    .app-bar nav { display: flex; gap: var(--sp-1); flex: 1; }
    .app-bar nav a { color: #d5dbe3; text-decoration: none; font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-sm); padding: 14px var(--sp-2) 12px; white-space: nowrap; }
    .app-bar nav a:hover { color: #fff; }
    .app-bar nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px var(--accent); }
    .app-bar .account { display: inline-flex; align-items: center; gap: var(--sp-1); background: none; border: 0; color: #fff; font: inherit; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); cursor: pointer; white-space: nowrap; }

    /* The top bar on a phone: a menu button, and its panel under the amber rule */
    .phone-bar { max-width: 390px; }
    .phone-bar .app-bar { justify-content: space-between; }
    .phone-bar .account { font-weight: 600; }
    .phone-menu { background: var(--nav); border-bottom: 4px solid var(--accent); padding: var(--sp-2) 0; }
    .phone-menu a { display: block; padding: var(--sp-3) var(--sp-4); color: #d5dbe3; text-decoration: none; font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-md); }
    .phone-menu a[aria-current="page"] { color: #fff; box-shadow: inset 4px 0 var(--accent); }
    .phone-menu .note { padding: var(--sp-2) var(--sp-4) var(--sp-1); color: rgb(255 255 255 / 0.6); font-size: var(--fs-xs); line-height: var(--lh-xs); }
    .phone-menu hr { margin: var(--sp-2) 0; border-color: rgb(255 255 255 / 0.15); }

    /* Menu: a short list under a button, such as the account menu */
    .menu { list-style: none; margin: 0; padding: var(--sp-1) 0; min-width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); font-size: var(--fs-sm); line-height: var(--lh-sm); }
    .menu li { margin: 0; max-width: none; }
    .menu a { display: block; padding: var(--sp-2) var(--sp-4); color: var(--text); text-decoration: none; }
    .menu a:hover { background: var(--row-hover); }
    .menu .muted { padding: var(--sp-2) var(--sp-4); }
    .menu hr { margin: var(--sp-1) 0; }

    /* Tabs */
    .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; }
    .tabs a {
      padding: var(--sp-2) var(--sp-4); font-weight: 600; color: var(--text); text-decoration: none;
      border: 1px solid transparent; border-top-width: 3px; border-bottom: 0; margin-bottom: -1px; white-space: nowrap;
    }
    .tabs a:hover { color: var(--link-hover); text-decoration: underline; }
    .tabs a[aria-current="page"] { background: var(--bg); border-color: var(--border); border-top: 3px solid var(--primary); }

    /* Pagination */
    .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; margin: var(--sp-4) 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
    .pagination li { margin: 0; }
    .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 32px; padding: var(--sp-1) var(--sp-2); }
    .pagination a { font-weight: 600; }
    .pagination [aria-current="page"] { background: var(--primary); color: var(--on-fill); text-decoration: none; border-radius: var(--radius); }

    /* Buttons: flat, a hard bottom edge, GOV.UK style. Each kind sets the same four --btn-* properties.
       The .is-* classes freeze a state for the style guide. */
    .btn {
      --btn-bg: var(--primary); --btn-bg-hover: var(--primary-hover); --btn-fg: var(--on-fill);
      --btn-edge: color-mix(in srgb, var(--btn-bg) 55%, #000);
      display: inline-flex; align-items: baseline; gap: var(--sp-2);
      font: inherit; font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-md);
      padding: 6px var(--sp-4) 6px; border: 0; border-radius: var(--radius);
      color: var(--btn-fg); background: var(--btn-bg); box-shadow: 0 2px 0 var(--btn-edge);
      text-decoration: none; cursor: pointer; margin-bottom: 2px;
      -webkit-tap-highlight-color: transparent;
    }
    .btn.secondary { --btn-bg: var(--surface-alt); --btn-bg-hover: color-mix(in srgb, var(--surface-alt) 85%, var(--text)); --btn-fg: var(--text); --btn-edge: var(--border); }
    .btn.success { --btn-bg: var(--success); --btn-bg-hover: color-mix(in srgb, var(--success) 85%, #000); }
    .btn.danger { --btn-bg: var(--danger); --btn-bg-hover: color-mix(in srgb, var(--danger) 85%, #000); }
    .btn.link { --btn-bg: transparent; --btn-bg-hover: transparent; --btn-fg: var(--link); box-shadow: none; text-decoration: underline; font-weight: 400; padding-inline: 0; }
    .btn.sm { font-size: var(--fs-sm); line-height: var(--lh-sm); padding: 2px var(--sp-3); }

    /* Hover only where there is a pointer, so taps on a phone don't leave a stuck hover. */
    @media (hover: hover) {
      .btn:not([disabled]):hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
      .btn.link:not([disabled]):hover { color: var(--link-hover); text-decoration: underline 3px; }
    }
    .btn.is-hover { background: var(--btn-bg-hover); }
    .btn.link.is-hover { color: var(--link-hover); text-decoration: underline 3px; }

    /* Pressed: the button drops onto its edge. */
    .btn:not([disabled]):active, .btn.is-active { background: var(--btn-bg-hover); transform: translateY(2px); box-shadow: none; }

    /* Focus: yellow with a dark edge, the same for every kind. */
    .btn:focus-visible, .btn.is-focus {
      outline: 3px solid transparent; background: var(--focus); color: #0b0c0c;
      box-shadow: 0 2px 0 #0b0c0c; text-decoration: none;
    }
    .btn:focus-visible:active { transform: translateY(2px); box-shadow: none; }
    .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
    .btn-states td { vertical-align: middle; }
    .actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0; }
    .actions .push { margin-left: auto; }

    /* Tags. Tinted tags say what something is; solid tags ask for action. */
    .tag {
      display: inline-block; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600;
      padding: 2px var(--sp-2); border-radius: var(--radius); white-space: nowrap;
      --c: var(--text-muted);
      color: color-mix(in srgb, var(--c) 75%, var(--text));
      background: color-mix(in srgb, var(--c) 16%, var(--bg));
    }
    .tag.info { --c: var(--link); }
    .tag.success { --c: var(--success-text); }
    .tag.warning { background: var(--warning); color: var(--on-warning); }
    .tag.danger { background: var(--danger); color: var(--on-fill); }
    .tag.incident, .tag.exercise, .tag.event { color: var(--on-fill); }
    .tag.incident { background: var(--incident); }
    .tag.exercise { background: var(--exercise); }
    .tag.event { background: var(--event); }
    /* D4H's own tags on an activity: data, not status, so outlined and quiet. */
    .tag.outline { background: none; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); font-weight: 400; }
    /* The D4H kind in a table column: a small square in the D4H colour and the word. Lighter
       than a solid tag, which stays for a kind shown on its own, such as beside a title. */
    .kind { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
    .kind::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); align-self: center; flex: none; }
    .kind.incident { --c: var(--incident); }
    .kind.exercise { --c: var(--exercise); }
    .kind.event { --c: var(--event); }
    /* A group of tags wraps with a gap, so tags never touch. */
    .tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); vertical-align: baseline; }

    /* Messages */
    .inset { border-left: 6px solid var(--border); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-4); }
    .warning-text { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 600; margin-bottom: var(--sp-4); }
    .warning-text .icon { margin-top: 0; }
    .banner { --c: var(--info); border: 4px solid var(--c); margin-bottom: var(--sp-5); }
    .banner-title { display: flex; align-items: center; gap: var(--sp-2); background: var(--c); color: var(--on-fill); font-weight: 600; padding: 2px var(--sp-4) var(--sp-1); }
    .banner-body { padding: var(--sp-4); }
    .banner-body > :last-child { margin-bottom: 0; }
    .banner.success { --c: var(--success); }
    .banner.danger { --c: var(--danger); }
    .banner.warning { --c: var(--warning); }
    .banner.warning .banner-title { color: var(--on-warning); }
    .error-summary { border: 4px solid var(--danger-text); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); }
    .error-summary h2 { margin-top: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
    .error-summary ul { margin: 0; padding-left: 0; list-style: none; }
    .error-summary a { color: var(--danger-text); font-weight: 600; }
    .empty { border: 1px dashed var(--border); padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--text-muted); margin-bottom: var(--sp-4); }
    .empty strong { display: block; color: var(--text); font-size: var(--fs-lg); line-height: var(--lh-lg); margin-bottom: var(--sp-1); }
    .empty p { margin-inline: auto; }
    .spinner {
      display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
      border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

    /* Toasts: LiveView flash messages. Top right on a desktop, bottom on a phone. */
    .toasts { position: fixed; top: 72px; right: var(--sp-5); width: min(400px, calc(100vw - 32px)); display: grid; gap: var(--sp-2); z-index: 50; }
    .toast-stack { display: grid; gap: var(--sp-3); max-width: 400px; }
    .toast {
      --c: var(--success); --c-text: var(--success-text);
      display: flex; gap: var(--sp-3); align-items: flex-start;
      background: var(--bg); color: var(--text);
      border: 1px solid var(--border); border-left: 6px solid var(--c); border-radius: var(--radius);
      padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
      box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
      font-size: var(--fs-sm); line-height: var(--lh-sm);
    }
    .toast > .icon { color: var(--c-text); margin-top: 0; }
    .toast .body { flex: 1; }
    .toast .title { display: block; font-weight: 700; font-size: var(--fs-md); line-height: var(--lh-md); }
    .toast .close { display: inline-flex; border: 0; background: none; color: var(--text-muted); padding: 2px; cursor: pointer; border-radius: var(--radius); }
    .toast .close:hover { color: var(--text); }
    .toast.error { --c: var(--danger); --c-text: var(--danger-text); }
    .toast.info { --c: var(--info); --c-text: var(--link); }
    .toast.connection { --c: var(--border); --c-text: var(--text-muted); }
    .toasts .toast { animation: toast-in 0.2s ease-out; }
    @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
    @media (prefers-reduced-motion: reduce) { .toasts .toast { animation: none; } }

    /* Confirm dialog: before a change that cannot be undone */
    .dialog { width: min(480px, calc(100vw - 32px)); padding: var(--sp-5); border: 1px solid var(--border); border-top: 6px solid var(--danger); border-radius: var(--radius); background: var(--bg); color: var(--text); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); }
    .dialog::backdrop { background: rgb(11 12 12 / 0.6); }
    .dialog h2 { margin-top: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); }
    .dialog .actions { margin-bottom: 0; }
    .dialog-static { position: static; display: block; margin: 0; width: auto; max-width: 480px; }

    /* Summary list, panels, details */
    .summary { display: grid; grid-template-columns: minmax(140px, 30%) 1fr; margin: 0 0 var(--sp-5); max-width: 800px; }
    .summary.has-actions { grid-template-columns: minmax(140px, 30%) 1fr auto; }
    .summary > div { display: contents; }
    .summary dt, .summary dd { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); }
    .summary dt { font-weight: 600; }
    .summary dd.action { text-align: right; padding-right: 0; }
    .panel { background: var(--surface-alt); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); border-radius: var(--radius); }
    .panel > :last-child { margin-bottom: 0; }
    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
    .stat { border-top: 4px solid var(--primary); background: var(--surface-alt); padding: var(--sp-3) var(--sp-4); }
    .stat .value { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; display: block; }
    .stat .label { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); font-weight: 400; margin: 0; }
    details { margin-bottom: var(--sp-4); }
    summary { display: inline-flex; align-items: center; gap: var(--sp-1); list-style: none; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
    summary::-webkit-details-marker { display: none; }
    summary .icon { transform: rotate(-90deg); transition: transform 0.15s; }
    details[open] > summary .icon { transform: none; }
    details[open] > summary { margin-bottom: var(--sp-2); }
    details > div { border-left: 4px solid var(--border); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); }

    /* Forms: bold labels above, hints under them, 2px borders */
    .field { margin-bottom: var(--sp-5); max-width: 640px; }
    .field.w-sm { max-width: 160px; }
    .field.w-md { max-width: 320px; }
    label, .label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
    .hint { display: block; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); margin-bottom: var(--sp-2); }
    input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="date"], [type="tel"], [type="number"], [type="url"]),
    select, textarea {
      font: inherit; color: var(--text); background: var(--bg);
      width: 100%; height: 40px; padding: var(--sp-1) var(--sp-2);
      border: var(--border-width) solid var(--text); border-radius: 0;
    }
    textarea { height: auto; min-height: 120px; resize: vertical; }
    input[readonly] { background: var(--surface-alt); border-color: var(--border); }
    :is(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; }
    .field-error { border-left: 5px solid var(--danger-text); padding-left: var(--sp-4); }
    .field-error :is(input, textarea, select) { border-color: var(--danger-text); }
    .error-message { display: block; color: var(--danger-text); font-weight: 700; margin-bottom: var(--sp-2); }
    .check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-2); font-weight: 400; }
    /* Checkboxes and radios are drawn here, not by the browser, so both modes match: a
       text-coloured border, then a primary fill with a white tick or dot. */
    input:is([type="checkbox"], [type="radio"]) {
      appearance: none; -webkit-appearance: none; flex: none; margin: 0;
      display: inline-grid; place-content: center; vertical-align: middle;
      width: 24px; height: 24px; border: 2px solid var(--text); background: var(--bg); cursor: pointer;
    }
    input[type="checkbox"] { border-radius: 2px; }
    input[type="checkbox"]::after {
      content: ""; width: 7px; height: 13px; border: solid var(--on-fill); border-width: 0 3px 3px 0;
      transform: translateY(-2px) rotate(45deg) scale(0);
    }
    input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
    input[type="checkbox"]:checked::after { transform: translateY(-2px) rotate(45deg); }
    input[type="radio"] { border-radius: 50%; }
    input[type="radio"]:checked { border-color: var(--primary); background: radial-gradient(circle, var(--on-fill) 0 4px, var(--primary) 4.5px); }
    input:is([type="checkbox"], [type="radio"]):disabled { opacity: 0.5; cursor: not-allowed; }
    .check .hint { margin: 0; }
    /* A switch: a checkbox drawn as a track and knob, on the trailing edge of its row. */
    .switch-row { display: flex; align-items: center; gap: var(--sp-3); max-width: 400px; margin-bottom: var(--sp-4); }
    .switch-row label { margin: 0; cursor: pointer; }
    .switch-row .hint { margin: 0; }
    .switch-row > div { flex-grow: 1; }
    .switch-row.compact { justify-content: flex-end; }
    .switch-row.compact { margin: var(--sp-2) 0 0; }
    .compact-demo { max-width: 400px; }
    .compact-demo .btn { width: 100%; justify-content: center; }
    .switch-row.compact label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 400; color: var(--text-muted); }
    input[type="checkbox"].switch { display: inline-block; position: relative; width: 48px; height: 28px; border-radius: 14px; }
    input[type="checkbox"].switch::after {
      position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border: 0; border-radius: 50%;
      background: var(--text); transform: none; transition: left 0.15s;
    }
    input[type="checkbox"].switch:checked { background: var(--primary); border-color: var(--primary); }
    input[type="checkbox"].switch:checked::after { left: 24px; background: var(--on-fill); transform: none; }
    input.switch.is-focus { outline: 3px solid var(--focus); box-shadow: inset 0 0 0 2px #0b0c0c; }
    fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
    legend { font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-lg); margin-bottom: var(--sp-2); padding: 0; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); max-width: 640px; }
    .input-sm, .filter-bar :is(input, select), .clause-add select, .clause-head input {
      height: 32px; padding: 2px var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm);
    }
    .filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; margin-bottom: var(--sp-4); }
    .filter-bar .field { margin: 0; }
    .filter-bar label { font-size: var(--fs-sm); line-height: var(--lh-sm); }

    /* Dense tables, Carbon-style: 32px rows, 24px compact. Cells align on the first baseline. */
    .table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); border: 1px solid var(--border-subtle); }
    table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
    th, td { padding: 6px var(--sp-3); text-align: left; vertical-align: baseline; }
    thead th {
      position: sticky; top: 0; background: var(--surface-alt); font-weight: 600;
      border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: bottom;
    }
    thead tr.group th { font-size: var(--fs-xs); line-height: var(--lh-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 0; padding-bottom: 0; }
    thead tr.group th.span { text-align: center; box-shadow: inset 0 -1px var(--border-subtle); }
    thead th a { color: inherit; text-decoration: none; }
    thead th a:hover { color: var(--link-hover); }
    thead th .sort { color: var(--text-muted); font-weight: 400; margin-left: 2px; }
    thead th.sorted { box-shadow: inset 0 -2px var(--primary); }
    thead th.sorted .sort { color: var(--primary); }
    tbody td { border-bottom: 1px solid var(--border-subtle); }
    tbody tr:last-child td { border-bottom: 0; }
    table.striped tbody tr:nth-child(even) td { background: var(--row-alt); }
    tbody tr:hover td { background: var(--row-hover); }
    td.num, th.num { text-align: right; white-space: nowrap; }
    td.nowrap, td.mono { white-space: nowrap; }
    td.shrink, th.shrink { width: 1px; white-space: nowrap; }
    :is(td, th) input[type="checkbox"] { width: 16px; height: 16px; vertical-align: -3px; }
    :is(td, th) input[type="checkbox"]::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
    td .btn.sm { margin: -3px 0 -1px; }
    td .sub { display: block; color: var(--text-muted); }
    table.compact th, table.compact td { padding: 2px var(--sp-2); }
    table.compact td .btn.sm, table.compact td .tag { margin-block: -2px; }
    .table-summary { display: flex; justify-content: space-between; font-size: var(--fs-sm); line-height: var(--lh-sm); margin-bottom: var(--sp-2); color: var(--text-muted); }
    .op-add { color: var(--success-text); font-weight: 700; }
    .op-remove { color: var(--danger-text); font-weight: 700; }

    /* Group rule clauses */
    .clause { border: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--radius); }
    .clause-head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
    .clause-head input { max-width: 260px; font-weight: 600; }
    .clause-head .grow { flex: 1; font-size: var(--fs-sm); line-height: var(--lh-sm); }
    .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
    .chip {
      display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-sm);
      padding: 2px var(--sp-1) 2px var(--sp-3); border-radius: var(--radius); background: var(--surface-alt);
      border: 1px solid var(--border-subtle);
    }
    .chip.missing { color: var(--danger-text); border-color: var(--danger-text); background: none; }
    .chip button { display: inline-flex; border: 0; background: none; color: inherit; padding: 2px; cursor: pointer; border-radius: var(--radius); }
    .chip button:hover { color: var(--danger-text); }
    .clause-add { display: flex; gap: var(--sp-2); align-items: center; max-width: 420px; }

    /* Colors page */
    .modes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-subtle); margin-bottom: var(--sp-6); }
    .mode { background: var(--bg); color: var(--text); padding: var(--sp-5); }
    .mode h3 { margin-top: 0; }
    .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
    .swatch { font-size: var(--fs-xs); line-height: var(--lh-xs); }
    .swatch .chipcolor { height: 44px; border-radius: var(--radius); border: 1px solid var(--border-subtle); margin-bottom: var(--sp-1); }
    .swatch strong { display: block; font-family: var(--mono); }
    .swatch span { color: var(--text-muted); font-family: var(--mono); }
    .sample-card { border: 1px solid var(--border-subtle); padding: var(--sp-4); border-radius: var(--radius); }
    .sample-card > :last-child { margin-bottom: 0; }

    /* Writing page: rendered Markdown */
    .prose table { display: block; overflow-x: auto; margin-bottom: var(--sp-5); border: 1px solid var(--border-subtle); }
    .prose td { border-bottom: 1px solid var(--border-subtle); }
    .prose td:first-child { font-weight: 600; white-space: nowrap; }
    .prose ul:has(input[type="checkbox"]) { list-style: none; padding-left: 0; }
    .prose li input[type="checkbox"] { width: 16px; height: 16px; margin: 0 var(--sp-2) 0 0; vertical-align: -3px; }
    .prose li input[type="checkbox"]:disabled { opacity: 1; cursor: default; }

    /* Layout page */
    .space-bar { display: inline-block; height: 16px; background: var(--primary); vertical-align: middle; }

    @media (max-width: 800px) {
      .container { padding: 0 var(--sp-4); }
      .guide { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-top: var(--sp-4); }
      .guide-nav ul { position: static; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
      .guide-nav .group { display: none; }
      .guide-nav a { border-left: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius); }
      .guide-nav a[aria-current="page"] { border-color: var(--primary); }
      .modes, .grid-2, .summary, .summary.has-actions { grid-template-columns: minmax(0, 1fr); }
      .summary dt { border-bottom: 0; padding-bottom: 0; }
      .summary dd.action { text-align: left; }
      .brand small { display: none; }
      /* Text cells keep a readable width; the table scrolls instead of squeezing them. */
      .table-wrap td:not(.shrink, .num, .nowrap, .mono) { min-width: 8rem; }
      table.pin-first :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 var(--border-subtle); }
      table.pin-first thead th:first-child { z-index: 2; background: var(--surface-alt); }
      table.pin-first.striped tbody tr:nth-child(even) td:first-child { background: var(--row-alt); }
      .toasts { top: auto; bottom: var(--sp-4); left: var(--sp-4); right: var(--sp-4); width: auto; }
      .clause-head { flex-wrap: wrap; }
      .clause-head input { max-width: none; flex: 1 1 100%; }
    }
<!-- </Web.StyleGuideHTML.styles> -->
.site-bar .container { height: auto; min-height: 56px; flex-wrap: wrap; padding-block: var(--sp-2); }
.design-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.design-nav a { color: #fff; text-decoration: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm); }
.design-nav a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.design-nav a[aria-current=page] { background: var(--accent); color: var(--on-warning); }
.site-switches { display: flex; gap: var(--sp-2); align-items: center; }
#names-toggle { font: inherit; font-size: var(--fs-sm); background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--radius); padding: 2px var(--sp-2); cursor: pointer; }
#names-toggle[aria-pressed=true] { background: rgb(255 255 255 / 0.18); }
.site-page { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.v-intro { padding-bottom: var(--sp-4); }
.v-frame { background: var(--surface-alt); padding: var(--sp-5) 0 var(--sp-8); }
.v-page { max-width: 1200px; margin: 0 auto; background: var(--bg); box-shadow: 0 2px 12px rgb(0 0 0 / 0.12); }
.v-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.v-row { margin-bottom: var(--sp-5); }
.v-row:last-child { margin-bottom: 0; }

/* Component names: a small tag on each piece, linking to the library. */
.cmp { position: relative; }
.cmp-name { position: absolute; z-index: 5; top: -9px; right: 8px; font: 600 11px/16px var(--mono); padding: 0 6px; border-radius: 3px; background: #ffdd00; color: #0b0c0c; text-decoration: none; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
.cmp-name:hover { background: #0b0c0c; color: #ffdd00; }
.cmp .cmp .cmp-name { top: 4px; right: 4px; }
.hide-names .cmp-name { display: none; }
.cmp-plain, .cmp-flush { padding: 0; border: 0; }
.cmp-flush .app-bar { margin: 0; }

/* Overview */
.variation-list { list-style: none; padding: 0; display: grid; gap: var(--sp-6); }
.variation-list > li { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--sp-5); max-width: none; margin: 0; }
.variation-thumb img { width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius); display: block; }
.outline { padding-left: var(--sp-5); }
.outline li { max-width: none; }
.outline code { font-size: 12px; }

/* Library */
.library-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.library-index a { display: block; font-family: var(--mono); font-size: var(--fs-sm); }
.library-item { margin-bottom: var(--sp-6); scroll-margin-top: var(--sp-4); }
.library-item > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); margin-bottom: var(--sp-1); }
.used-in { font-family: var(--mono); margin-left: var(--sp-1); }
.library-demo { max-width: 560px; }
.library-demo.is-wide { max-width: 1160px; }

/* Shared pieces */
.team-header { display: flex; gap: var(--sp-4); align-items: center; }
.team-logo { width: 56px; height: 56px; border-radius: 50%; background: var(--nav); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); max-width: none; margin: 0; }
.rows > li:last-child { border-bottom: 0; }
.row-when { display: flex; flex-direction: column; min-width: 92px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.row-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kind-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.quick-links { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.quick-links li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); margin: 0; max-width: none; }
.quick-links a { font-weight: 600; }

.next-up { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-5); align-items: center; border-left: 4px solid var(--primary); }
.next-up-when { display: flex; flex-direction: column; min-width: 110px; }
.next-up-day { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; }
.next-up-time { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; }
.next-up-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.next-up.is-slim { padding-block: var(--sp-3); }
.next-up.is-slim .next-up-time { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.next-up.is-slim h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.next-up.is-slim .next-up-actions { flex-direction: row; }

.week-strip { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.week-strip > li { margin: 0; background: var(--surface-alt); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); min-height: 120px; display: flex; flex-direction: column; gap: var(--sp-1); }
.week-strip > li.is-today { box-shadow: inset 0 4px 0 var(--accent); }
.week-date { font-weight: 700; }
.week-item { display: block; border-left: 3px solid var(--c); padding-left: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); text-decoration: none; color: var(--text); }
.week-item .small { display: block; }

.timeline { position: relative; padding-top: var(--sp-2); }
.timeline-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; height: 36px; }
.timeline-label { font-size: var(--fs-xs); color: var(--text-muted); }
.timeline-track { position: relative; height: 100%; border-bottom: 1px solid var(--border-subtle); }
.timeline-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg); }
.timeline-dot.is-planned { opacity: 0.55; }
.timeline-dot.is-draft { background: var(--bg); border: 3px solid var(--c); width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.timeline-dot:hover { z-index: 3; transform: scale(1.4); }
.timeline-expiry { position: absolute; top: 50%; width: 0; height: 0; margin: -6px 0 0 -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--warning); }
.timeline-expiry.is-key { position: static; display: inline-block; margin: 0; }
.is-draft-key { background: var(--bg) !important; box-shadow: inset 0 0 0 3px var(--incident); }
.timeline-axis { position: relative; margin-left: 80px; height: 20px; font-size: var(--fs-xs); color: var(--text-muted); }
.timeline-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.timeline-today { color: var(--text); font-weight: 700; }
.timeline-today::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 76px; border-left: 2px solid var(--text); }

.on-call { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.on-call dd { margin: 0; font-weight: 600; }

.attention > li { align-items: flex-start; }
.attention-mark { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--info); }
.is-warning .attention-mark { background: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 35%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--surface-alt); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border-subtle); }
.chip .attention-mark { margin: 0; }
.chip:hover { border-color: var(--link); color: var(--link); }

.task-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.task-cards .dash-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.task-cards .dash-card > .btn { align-self: flex-start; margin-top: auto; }
.task-count { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; margin: 0; }
.task-count span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.meter { display: block; height: 10px; border-radius: 5px; background: var(--shade-1); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); border-radius: 0 5px 5px 0; }

.readiness { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto auto; gap: var(--sp-3) var(--sp-3); align-items: center; }
.readiness > li { display: contents; }
.readiness-name { font-weight: 600; font-size: var(--fs-sm); }
.readiness-bar { position: relative; height: 10px; background: var(--surface-alt); border-radius: 5px; }
.readiness-bar i { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 5px; }
.readiness-bar i.is-short { background: var(--warning); }
.readiness-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }

.heat-table { display: grid; gap: 3px; align-items: center; margin-top: var(--sp-2); }
.heat-month { text-align: center; }
.heat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--sp-2); }
.heat-cell { height: 28px; border-radius: 3px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; color: var(--text); }
.heat-cell.shade-3, .heat-cell.shade-4 { color: var(--on-fill); }

.chart-stats.is-column { grid-template-columns: 1fr; }
.hero-band { background: var(--nav); color: #fff; border-radius: var(--radius); padding: var(--sp-6) var(--sp-6) var(--sp-5) !important; border-bottom: 4px solid var(--accent); }
.hero-band .caps { color: var(--accent); }
.hero-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.hero-numbers div { display: flex; flex-direction: column; }
.hero-value { font-size: 56px; line-height: 64px; font-weight: 700; }
.hero-numbers span:not(.hero-value) { color: rgb(255 255 255 / 0.8); }

.map-hero { position: relative; }
.map-hero-next { position: absolute; top: 12px; right: 12px; width: 340px; z-index: 2; }
.map-hero-next .next-up { grid-template-columns: 1fr; gap: var(--sp-2); box-shadow: 0 2px 10px rgb(0 0 0 / 0.25); }
.map-hero-next .next-up-when { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
.map-hero-legend { top: 12px; left: 12px; }
