/* ChiTransit CSS system. Generated by `go generate ./...` from tokens.json and platforms/web/{base,components,utilities}; do not edit.
   Every page loads this one file before its own styles. Tokens and base are cascade layers, so page rules
   override them; components and utilities are plain class rules. */
@layer ct.tokens, ct.base;

/* --- tokens.css --- */
@layer ct.tokens{
/* Generated from tokens/tokens.json by `go generate ./...`; do not edit.
   go test ./... fails when this file and tokens.json disagree. */
:root{
  --paper:#ffffff;
  --card:#f3f4f7;
  --card-2:#e9ebf1;
  --line:#e3e6ec;
  --inactive:#c9cdd6;
  --ink:#101a2e;
  --muted:#5b6472;
  --accent:#0b4ea2;
  --accent-ink:#ffffff;
  --accent-tint:#eaf1fb;
  --good:#1b5e20;
  --warn:#8a4b00;
  --alert:#e0641a;
  --favorite:#b7800f;
  --scrim:rgba(16,26,46,.62);
  --live-bg:#101a2e;
  --live-ink:#ffffff;
  --red-line:#c60c30;
  --blue-line:#00a1de;
  --brown-line:#62361b;
  --green-line:#009b3a;
  --orange-line:#f9461c;
  --purple-line:#522398;
  --pink-line:#e27ea6;
  --yellow-line:#e3cc00;
  --shadow-sheet:0 -10px 30px rgba(16,26,46,.16);
  --shadow-fab:0 6px 16px rgba(16,26,46,.24);
  --shadow-control:0 1px 4px rgba(16,26,46,.18);
  --always-white:#ffffff;
  --always-black:#101a2e;
  --font:"Figtree",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fs-display:32px;
  --fw-display:750;
  --ls-display:-.02em;
  --fs-title:20px;
  --fw-title:700;
  --ls-title:0;
  --fs-body:16px;
  --fw-body:400;
  --ls-body:0;
  --fs-sub:13px;
  --fw-sub:400;
  --ls-sub:0;
  --fs-cap:11px;
  --fw-cap:400;
  --ls-cap:0;
  --gutter:20px;
  --space-card-padding:14px;
  --space-arrival-vertical-padding:5px;
  --space-arrival-horizontal-padding:14px;
  --space-card-stack-gap:8px;
  --space-arrival-stack-gap:6px;
  --space-route-toggle-gap:6px;
  --space-metadata-control-overlap:12px;
  --space-metadata-control-vertical-overhang:14px;
  --space-header-metadata-gap:4px;
  --space-header-close-vertical-overhang:8px;
  --space-direction-control-vertical-overhang:6px;
  --space-section-gap:24px;
  --r-control:10px;
  --r-card:12px;
  --r-modal:20px;
  --r-sheet:28px;
  --radius-line-bar:3px;
  --radius-chip:6px;
  --radius-segment:8px;
  --radius-pill:999px;
  --fab:52px;
  --size-map-station-marker:26px;
  --size-map-bus-marker:20px;
  --size-map-bus-marker-compact:7px;
  --size-map-station-marker-compact:10px;
  --size-icon-button:44px;
  --size-minimum-tap-target:44px;
  --size-control-glyph:22px;
  --size-alert-glyph:28px;
  --size-metadata-glyph:16px;
  --size-nearby-mode-glyph:12px;
  --size-route-toggle:28px;
  --size-dense-route-toggle:28px;
  --size-route-toggle-minimum-width:44px;
  --size-direction-control:36px;
  --size-line-bar-height:24px;
  --size-line-bar-segment-width:10px;
  --size-line-bar-segment-spacing:3px;
  --size-list-row-minimum-height:56px;
  --size-list-lead:44px;
  --size-arrival-panel-width:128px;
  --size-timeline-row-minimum-height:44px;
  --size-search-field:44px;
  --size-settings-row:52px;
  --size-primary-button:48px;
  --size-tab-bar:64px;
  --size-tab-bar-clearance:88px;
  --size-tab-bar-edge-fade:118px;
  --size-tab-glyph:26px;
  --core-low-h:180px;
  --size-sheet-low-nearby:120px;
  --size-sheet-half-fraction:.5;
  --size-sheet-full-top-offset:4px;
  --core-inset:6px;
  --corebar-h:64px;
  --size-sheet-grabber-zone:28px;
  --size-grabber-width:40px;
  --size-grabber-height:5px;
  --size-focus-ring-width:2.5px;
  --size-focus-ring-offset:2px;
  --space-0:0;
  --space-2:2px;
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --motion-page-duration:.17s;
  --motion-detail-curve:cubic-bezier(.2,.85,.3,1);
  --motion-detail-duration:.39s;
  --motion-sheet-duration:.42s;
  --motion-sheet-bounce:.15;
  --motion-recenter-duration:.45s;
  --motion-swipe-settle-duration:.25s;
  --motion-live-section-duration:.25s;
  --motion-upcoming-placeholder-duration:.2s;
  --motion-upcoming-resize-duration:.25s;
  --motion-upcoming-fade-duration:.15s;
  --motion-live-value-duration:.15s;
  --motion-control-duration:.15s;
  --motion-spin-duration:.6s;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:750;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --paper:#0f141c;
  --card:#171d27;
  --card-2:#1f2733;
  --line:#263041;
  --inactive:#465267;
  --ink:#eef1f6;
  --muted:#98a2b3;
  --accent:#6ea0f0;
  --accent-ink:#0f141c;
  --accent-tint:#182944;
  --good:#7fd48a;
  --warn:#f2b96b;
  --alert:#f08a4a;
  --favorite:#e8a317;
  --live-bg:#eef1f6;
  --live-ink:#0f141c;
  --brown-line:#a8653a;
  --purple-line:#8d61d8;
  --yellow-line:#f9e300;
  --shadow-sheet:0 -10px 30px rgba(238,241,246,.16);
  --shadow-fab:0 6px 16px rgba(238,241,246,.24);
  --shadow-control:0 1px 4px rgba(0,0,0,.4);
}
}
:root[data-theme="dark"]{
  --paper:#0f141c;
  --card:#171d27;
  --card-2:#1f2733;
  --line:#263041;
  --inactive:#465267;
  --ink:#eef1f6;
  --muted:#98a2b3;
  --accent:#6ea0f0;
  --accent-ink:#0f141c;
  --accent-tint:#182944;
  --good:#7fd48a;
  --warn:#f2b96b;
  --alert:#f08a4a;
  --favorite:#e8a317;
  --live-bg:#eef1f6;
  --live-ink:#0f141c;
  --brown-line:#a8653a;
  --purple-line:#8d61d8;
  --yellow-line:#f9e300;
  --shadow-sheet:0 -10px 30px rgba(238,241,246,.16);
  --shadow-fab:0 6px 16px rgba(238,241,246,.24);
  --shadow-control:0 1px 4px rgba(0,0,0,.4);
}
/* Blocks that always show one theme, whatever the page's. */
.theme-light{
  --paper:#ffffff;
  --card:#f3f4f7;
  --card-2:#e9ebf1;
  --line:#e3e6ec;
  --inactive:#c9cdd6;
  --ink:#101a2e;
  --muted:#5b6472;
  --accent:#0b4ea2;
  --accent-ink:#ffffff;
  --accent-tint:#eaf1fb;
  --good:#1b5e20;
  --warn:#8a4b00;
  --alert:#e0641a;
  --favorite:#b7800f;
  --scrim:rgba(16,26,46,.62);
  --live-bg:#101a2e;
  --live-ink:#ffffff;
  --red-line:#c60c30;
  --blue-line:#00a1de;
  --brown-line:#62361b;
  --green-line:#009b3a;
  --orange-line:#f9461c;
  --purple-line:#522398;
  --pink-line:#e27ea6;
  --yellow-line:#e3cc00;
  --shadow-sheet:0 -10px 30px rgba(16,26,46,.16);
  --shadow-fab:0 6px 16px rgba(16,26,46,.24);
  --shadow-control:0 1px 4px rgba(16,26,46,.18);
}
.theme-dark{
  --paper:#0f141c;
  --card:#171d27;
  --card-2:#1f2733;
  --line:#263041;
  --inactive:#465267;
  --ink:#eef1f6;
  --muted:#98a2b3;
  --accent:#6ea0f0;
  --accent-ink:#0f141c;
  --accent-tint:#182944;
  --good:#7fd48a;
  --warn:#f2b96b;
  --alert:#f08a4a;
  --favorite:#e8a317;
  --scrim:rgba(16,26,46,.62);
  --live-bg:#eef1f6;
  --live-ink:#0f141c;
  --red-line:#c60c30;
  --blue-line:#00a1de;
  --brown-line:#a8653a;
  --green-line:#009b3a;
  --orange-line:#f9461c;
  --purple-line:#8d61d8;
  --pink-line:#e27ea6;
  --yellow-line:#f9e300;
  --shadow-sheet:0 -10px 30px rgba(238,241,246,.16);
  --shadow-fab:0 6px 16px rgba(238,241,246,.24);
  --shadow-control:0 1px 4px rgba(0,0,0,.4);
}
/* Component tokens (components.tokens.json): components/<name>.css reads var(--<name>-<token>, var(--ct-<name>-<token>)). */
:root,.theme-light,.theme-dark{
  --ct-badge-background:var(--accent-tint);
  --ct-badge-color:var(--accent);
  --ct-badge-font-size:var(--fs-sub);
  --ct-badge-font-weight:var(--weight-bold);
  --ct-badge-gap:var(--space-8);
  --ct-badge-height:30px;
  --ct-badge-padding-x:var(--space-12);
  --ct-badge-radius:var(--radius-pill);
  --ct-button-background:var(--accent-tint);
  --ct-button-background-primary:var(--accent);
  --ct-button-color:var(--accent);
  --ct-button-color-disabled:var(--inactive);
  --ct-button-color-primary:var(--accent-ink);
  --ct-button-font-size:var(--fs-body);
  --ct-button-font-size-sm:var(--fs-sub);
  --ct-button-font-weight:var(--weight-semibold);
  --ct-button-gap:var(--space-8);
  --ct-button-height:var(--size-minimum-tap-target);
  --ct-button-height-sm:36px;
  --ct-button-icon-size:18px;
  --ct-button-padding-x:18px;
  --ct-button-padding-x-sm:var(--space-12);
  --ct-button-radius:var(--r-card);
  --ct-card-background:var(--card);
  --ct-card-empty-color:var(--muted);
  --ct-card-empty-font-size:var(--fs-sub);
  --ct-card-empty-padding-x:var(--space-16);
  --ct-card-empty-padding-y:var(--space-20);
  --ct-card-gap:var(--space-8);
  --ct-card-padding:var(--space-card-padding);
  --ct-card-radius:var(--r-card);
  --ct-chip-background:var(--card-2);
  --ct-chip-color:var(--ink);
  --ct-chip-font-size:12px;
  --ct-chip-font-weight:var(--weight-semibold);
  --ct-chip-height:22px;
  --ct-chip-outline-width:var(--size-focus-ring-width);
  --ct-chip-padding-x:var(--space-8);
  --ct-chip-radius:var(--radius-chip);
  --ct-icon-button-background:var(--accent-tint);
  --ct-icon-button-background-pressed:var(--accent);
  --ct-icon-button-color:var(--accent);
  --ct-icon-button-color-disabled:var(--inactive);
  --ct-icon-button-color-pressed:var(--accent-ink);
  --ct-icon-button-glyph-size:var(--size-control-glyph);
  --ct-icon-button-radius:var(--radius-pill);
  --ct-icon-button-size:var(--size-icon-button);
  --ct-input-background:var(--card);
  --ct-input-color:var(--ink);
  --ct-input-color-placeholder:var(--muted);
  --ct-input-font-size:var(--fs-body);
  --ct-input-gap:var(--space-10);
  --ct-input-height:var(--size-search-field);
  --ct-input-icon-size:18px;
  --ct-input-label-color:var(--muted);
  --ct-input-label-font-size:var(--fs-sub);
  --ct-input-label-font-weight:var(--weight-semibold);
  --ct-input-label-gap:var(--space-6);
  --ct-input-padding-x:var(--space-12);
  --ct-input-radius:var(--r-card);
  --ct-route-toggle-bus-font-size:var(--fs-body);
  --ct-route-toggle-bus-font-weight:var(--weight-bold);
  --ct-route-toggle-bus-min-width:56px;
  --ct-route-toggle-bus-padding-x:var(--space-14);
  --ct-route-toggle-bus-radius:var(--r-control);
  --ct-route-toggle-duration:var(--motion-control-duration);
  --ct-route-toggle-ring-color:var(--ink);
  --ct-route-toggle-ring-gap:3px;
  --ct-route-toggle-ring-gap-color:var(--paper);
  --ct-route-toggle-ring-width:var(--size-focus-ring-width);
  --ct-route-toggle-size:40px;
  --ct-route-toggle-size-dense:34px;
  --ct-segmented-background:var(--card-2);
  --ct-segmented-background-selected:var(--paper);
  --ct-segmented-color:var(--muted);
  --ct-segmented-color-selected:var(--ink);
  --ct-segmented-font-size:var(--fs-sub);
  --ct-segmented-font-weight:var(--weight-medium);
  --ct-segmented-font-weight-selected:var(--weight-semibold);
  --ct-segmented-gap:var(--space-2);
  --ct-segmented-height:36px;
  --ct-segmented-padding:var(--space-2);
  --ct-segmented-radius:var(--r-control);
  --ct-segmented-segment-padding-x:var(--space-12);
  --ct-segmented-segment-radius:var(--radius-segment);
  --ct-segmented-shadow-selected:var(--shadow-control);
  --ct-spinner-color:var(--accent);
  --ct-spinner-duration:var(--motion-spin-duration);
  --ct-spinner-size:20px;
  --ct-spinner-stroke-width:var(--size-focus-ring-width);
  --ct-spinner-track:var(--line);
  --ct-status-font-weight:var(--weight-bold);
  --ct-status-pill-font-size:var(--fs-cap);
  --ct-status-pill-height:22px;
  --ct-status-pill-padding-x:var(--space-8);
  --ct-status-pill-radius:var(--radius-pill);
  --ct-status-pill-tint:.14;
  --ct-table-cell-padding-x:var(--space-12);
  --ct-table-cell-padding-y:var(--space-10);
  --ct-table-font-size:14px;
  --ct-table-head-background:var(--card);
  --ct-table-head-color:var(--muted);
  --ct-table-head-font-size:var(--fs-cap);
  --ct-table-head-tracking:.04em;
  --ct-table-rule:var(--line);
  --ct-toast-background:var(--live-bg);
  --ct-toast-color:var(--live-ink);
  --ct-toast-duration:var(--motion-live-section-duration);
  --ct-toast-font-size:var(--fs-sub);
  --ct-toast-font-weight:var(--weight-semibold);
  --ct-toast-offset:var(--space-24);
  --ct-toast-padding-x:var(--space-16);
  --ct-toast-padding-y:var(--space-10);
  --ct-toast-radius:var(--radius-pill);
  --ct-tooltip-background:var(--live-bg);
  --ct-tooltip-color:var(--live-ink);
  --ct-tooltip-duration:var(--motion-control-duration);
  --ct-tooltip-font-size:var(--fs-cap);
  --ct-tooltip-font-weight:var(--weight-semibold);
  --ct-tooltip-max-width:240px;
  --ct-tooltip-offset:var(--space-6);
  --ct-tooltip-padding-x:var(--space-8);
  --ct-tooltip-padding-y:var(--space-4);
  --ct-tooltip-radius:var(--radius-chip);
}
}

/* --- base/reset.css --- */
@layer ct.base{
/* Reset: predictable box sizing and form controls that inherit the page's type. Zero specificity
   (:where) and the ct.base layer keep every page and component rule in charge. */
:where(*,*::before,*::after){box-sizing:border-box}
:where(body){margin:0}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button){-webkit-appearance:none;appearance:none}
:where(img,svg,video){max-width:100%}
:where(table){border-collapse:collapse}
@media (prefers-reduced-motion:reduce){
  :where(*,*::before,*::after){transition-duration:0s;animation-duration:0s;animation-iteration-count:1;scroll-behavior:auto}
}
}

/* --- base/global.css --- */
@layer ct.base{
/* Global type and colour from the tokens; focus rings use the focus token everywhere. */
:where(body){background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);-webkit-font-smoothing:antialiased}
:where(code,kbd,pre,samp){font-family:var(--mono)}
:where(h1){font-size:var(--fs-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display)}
:where(h2){font-size:var(--fs-title);font-weight:var(--fw-title)}
:where(a){color:var(--accent)}
:where(:focus-visible){outline:var(--size-focus-ring-width) solid var(--focus-color,var(--accent));outline-offset:var(--size-focus-ring-offset)}
}

/* --- components/badge.css --- */
/* Badge: a pill label with an optional leading glyph.
   Reads: height, paddingX, gap, radius, fontSize, fontWeight, background, color. */
.ct-badge{display:inline-flex;align-items:center;gap:var(--badge-gap,var(--ct-badge-gap));height:var(--badge-height,var(--ct-badge-height));padding:0 var(--badge-padding-x,var(--ct-badge-padding-x));border-radius:var(--badge-radius,var(--ct-badge-radius));
  background:var(--badge-background,var(--ct-badge-background));color:var(--badge-color,var(--ct-badge-color));font-size:var(--badge-font-size,var(--ct-badge-font-size));font-weight:var(--badge-font-weight,var(--ct-badge-font-weight));white-space:nowrap}
.ct-badge svg{width:var(--badge-font-size,var(--ct-badge-font-size));height:var(--badge-font-size,var(--ct-badge-font-size));flex:none;fill:currentColor}

/* --- components/button.css --- */
/* Button. Variants: --primary (Brand fill), --ghost (text only), --block (full width); size --sm.
   Reads: height, paddingX, gap, radius, fontSize, fontWeight, iconSize, background, color,
   background.primary, color.primary, color.disabled, height.sm, paddingX.sm, fontSize.sm. */
.ct-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--button-gap,var(--ct-button-gap));
  min-height:var(--button-height,var(--ct-button-height));padding:0 var(--button-padding-x,var(--ct-button-padding-x));border:0;border-radius:var(--button-radius,var(--ct-button-radius));
  background:var(--button-background,var(--ct-button-background));color:var(--button-color,var(--ct-button-color));
  font-family:inherit;font-size:var(--button-font-size,var(--ct-button-font-size));font-weight:var(--button-font-weight,var(--ct-button-font-weight));line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-control-duration),color var(--motion-control-duration)}
.ct-button svg{width:var(--button-icon-size,var(--ct-button-icon-size));height:var(--button-icon-size,var(--ct-button-icon-size));flex:none}
.ct-button:hover{text-decoration:none}
.ct-button--primary{background:var(--button-background-primary,var(--ct-button-background-primary));color:var(--button-color-primary,var(--ct-button-color-primary))}
.ct-button--ghost{background:transparent;padding-inline:0}
.ct-button--block{display:flex;width:100%}
.ct-button--sm{min-height:var(--button-height-sm,var(--ct-button-height-sm));padding:0 var(--button-padding-x-sm,var(--ct-button-padding-x-sm));font-size:var(--button-font-size-sm,var(--ct-button-font-size-sm))}
.ct-button:disabled,.ct-button[aria-disabled="true"]{color:var(--button-color-disabled,var(--ct-button-color-disabled));cursor:default}
.ct-button--primary:disabled{background:var(--button-background,var(--ct-button-background))}

/* --- components/card.css --- */
/* Card: grey on white, no shadow; the layout unit. --empty centres a muted message; --hairline
   adds a 1px rule for cards on a card-coloured surface.
   Reads: background, radius, padding, gap, empty.paddingY, empty.paddingX, empty.fontSize, empty.color. */
.ct-card{display:grid;gap:var(--card-gap,var(--ct-card-gap));padding:var(--card-padding,var(--ct-card-padding));border-radius:var(--card-radius,var(--ct-card-radius));background:var(--card-background,var(--ct-card-background))}
.ct-card--empty{justify-items:center;padding:var(--card-empty-padding-y,var(--ct-card-empty-padding-y)) var(--card-empty-padding-x,var(--ct-card-empty-padding-x));color:var(--card-empty-color,var(--ct-card-empty-color));font-size:var(--card-empty-font-size,var(--ct-card-empty-font-size));text-align:center}
.ct-card--empty b{color:var(--ink);font-size:var(--fs-body);font-weight:var(--weight-semibold)}
.ct-card--hairline{box-shadow:inset 0 0 0 1px var(--line)}

/* --- components/chip.css --- */
/* Chip: small labels (route type, change type, metadata). Variants: --muted, --accent, --solid,
   --outline, --good, --warn, --alert.
   Reads: height, paddingX, radius, fontSize, fontWeight, background, color, outline.width. */
.ct-chip{display:inline-flex;align-items:center;gap:var(--space-4);height:var(--chip-height,var(--ct-chip-height));padding:0 var(--chip-padding-x,var(--ct-chip-padding-x));border-radius:var(--chip-radius,var(--ct-chip-radius));
  background:var(--chip-background,var(--ct-chip-background));color:var(--chip-color,var(--ct-chip-color));font-size:var(--chip-font-size,var(--ct-chip-font-size));font-weight:var(--chip-font-weight,var(--ct-chip-font-weight));line-height:1;white-space:nowrap;flex:none}
.ct-chip--muted{color:var(--muted)}
.ct-chip--accent{background:var(--accent-tint);color:var(--accent)}
.ct-chip--solid{background:var(--accent);color:var(--accent-ink)}
.ct-chip--outline,.ct-chip--good,.ct-chip--warn,.ct-chip--alert{background:transparent;box-shadow:inset 0 0 0 var(--chip-outline-width,var(--ct-chip-outline-width)) currentColor}
.ct-chip--good{color:var(--good)}
.ct-chip--warn{color:var(--warn)}
.ct-chip--alert{color:var(--alert)}

/* --- components/icon-button.css --- */
/* Icon button: a round glyph button with a full 44pt hit area. aria-pressed="true" fills it.
   Reads: size, glyphSize, radius, background, color, background.pressed, color.pressed, color.disabled. */
.ct-icon-button{display:inline-grid;place-items:center;flex:none;width:var(--icon-button-size,var(--ct-icon-button-size));height:var(--icon-button-size,var(--ct-icon-button-size));padding:0;border:0;
  border-radius:var(--icon-button-radius,var(--ct-icon-button-radius));background:var(--icon-button-background,var(--ct-icon-button-background));color:var(--icon-button-color,var(--ct-icon-button-color));cursor:pointer;
  transition:background-color var(--motion-control-duration),color var(--motion-control-duration)}
.ct-icon-button svg{width:var(--icon-button-glyph-size,var(--ct-icon-button-glyph-size));height:var(--icon-button-glyph-size,var(--ct-icon-button-glyph-size))}
.ct-icon-button[aria-pressed="true"]{background:var(--icon-button-background-pressed,var(--ct-icon-button-background-pressed));color:var(--icon-button-color-pressed,var(--ct-icon-button-color-pressed))}
.ct-icon-button:disabled{color:var(--icon-button-color-disabled,var(--ct-icon-button-color-disabled));cursor:default}

/* --- components/input.css --- */
/* Inputs: .ct-input, .ct-select and .ct-search (a field with a leading glyph and a bare input).
   .ct-field stacks a label above its control.
   Reads: height, radius, paddingX, gap, fontSize, iconSize, background, color, color.placeholder,
   label.fontSize, label.fontWeight, label.color, label.gap. */
.ct-input,.ct-select{width:100%;min-height:var(--input-height,var(--ct-input-height));padding:0 var(--input-padding-x,var(--ct-input-padding-x));border:0;border-radius:var(--input-radius,var(--ct-input-radius));
  background:var(--input-background,var(--ct-input-background));color:var(--input-color,var(--ct-input-color));font-family:inherit;font-size:var(--input-font-size,var(--ct-input-font-size))}
.ct-select{cursor:pointer}
.ct-input::placeholder,.ct-search input::placeholder{color:var(--input-color-placeholder,var(--ct-input-color-placeholder))}
.ct-search{display:flex;align-items:center;gap:var(--input-gap,var(--ct-input-gap));min-height:var(--input-height,var(--ct-input-height));padding:0 var(--input-padding-x,var(--ct-input-padding-x));border-radius:var(--input-radius,var(--ct-input-radius));background:var(--input-background,var(--ct-input-background))}
.ct-search svg{width:var(--input-icon-size,var(--ct-input-icon-size));height:var(--input-icon-size,var(--ct-input-icon-size));flex:none;color:var(--input-color-placeholder,var(--ct-input-color-placeholder))}
.ct-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--input-color,var(--ct-input-color));font-family:inherit;font-size:var(--input-font-size,var(--ct-input-font-size))}
.ct-search:focus-within{outline:var(--size-focus-ring-width) solid var(--focus-color,var(--accent));outline-offset:var(--size-focus-ring-offset)}
.ct-field{display:grid;gap:var(--input-label-gap,var(--ct-input-label-gap))}
.ct-field>label,.ct-field>.ct-field-label{font-size:var(--input-label-font-size,var(--ct-input-label-font-size));font-weight:var(--input-label-font-weight,var(--ct-input-label-font-weight));color:var(--input-label-color,var(--ct-input-label-color))}

/* --- components/route-toggle.css --- */
/* Route toggle: a line-colour circle (set --route) or a Brand bus capsule (--bus). aria-pressed="true"
   shows the selection ring; an unselected bus capsule is outlined. --dense inside crowded stops.
   Reads: size, size.dense, bus.minWidth, bus.paddingX, bus.radius, bus.fontSize, bus.fontWeight,
   ring.gap, ring.width, ring.gapColor, ring.color, duration. */
.ct-route-toggle{--route:var(--accent);flex:none;width:var(--route-toggle-size,var(--ct-route-toggle-size));height:var(--route-toggle-size,var(--ct-route-toggle-size));padding:0;border:0;border-radius:50%;
  background:var(--route);cursor:pointer;transition:box-shadow var(--route-toggle-duration,var(--ct-route-toggle-duration))}
.ct-route-toggle[aria-pressed="true"]{box-shadow:0 0 0 var(--route-toggle-ring-gap,var(--ct-route-toggle-ring-gap)) var(--route-toggle-ring-gap-color,var(--ct-route-toggle-ring-gap-color)),0 0 0 calc(var(--route-toggle-ring-gap,var(--ct-route-toggle-ring-gap)) + var(--route-toggle-ring-width,var(--ct-route-toggle-ring-width))) var(--route-toggle-ring-color,var(--ct-route-toggle-ring-color))}
.ct-route-toggle--bus{width:auto;min-width:var(--route-toggle-bus-min-width,var(--ct-route-toggle-bus-min-width));padding:0 var(--route-toggle-bus-padding-x,var(--ct-route-toggle-bus-padding-x));border-radius:var(--route-toggle-bus-radius,var(--ct-route-toggle-bus-radius));
  background:var(--accent);color:var(--accent-ink);font-size:var(--route-toggle-bus-font-size,var(--ct-route-toggle-bus-font-size));font-weight:var(--route-toggle-bus-font-weight,var(--ct-route-toggle-bus-font-weight))}
.ct-route-toggle--bus[aria-pressed="false"]{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 var(--route-toggle-ring-width,var(--ct-route-toggle-ring-width)) var(--accent)}
.ct-route-toggle--dense{width:var(--route-toggle-size-dense,var(--ct-route-toggle-size-dense));height:var(--route-toggle-size-dense,var(--ct-route-toggle-size-dense))}
.ct-route-toggle--bus.ct-route-toggle--dense{width:auto}

/* --- components/segmented.css --- */
/* Segmented control: buttons or links inside .ct-segmented. The current one carries
   aria-pressed="true", aria-selected="true" or aria-current (or .is-selected). Segments size to their
   labels; --fill makes --count equal columns across the full width.
   Reads: height, padding, gap, radius, background, segment.radius, segment.paddingX, fontSize,
   fontWeight, color, background.selected, color.selected, fontWeight.selected, shadow.selected. */
.ct-segmented{display:inline-flex;flex:none;gap:var(--segmented-gap,var(--ct-segmented-gap));
  height:var(--segmented-height,var(--ct-segmented-height));padding:var(--segmented-padding,var(--ct-segmented-padding));border-radius:var(--segmented-radius,var(--ct-segmented-radius));background:var(--segmented-background,var(--ct-segmented-background))}
.ct-segmented--fill{display:grid;grid-template-columns:repeat(var(--count,2),minmax(0,1fr))}
.ct-segmented>button,.ct-segmented>a{display:inline-grid;place-items:center;min-width:0;padding:0 var(--segmented-segment-padding-x,var(--ct-segmented-segment-padding-x));border:0;
  border-radius:var(--segmented-segment-radius,var(--ct-segmented-segment-radius));background:transparent;color:var(--segmented-color,var(--ct-segmented-color));
  font-family:inherit;font-size:var(--segmented-font-size,var(--ct-segmented-font-size));font-weight:var(--segmented-font-weight,var(--ct-segmented-font-weight));line-height:1;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ct-segmented>:hover{color:var(--segmented-color-selected,var(--ct-segmented-color-selected));text-decoration:none}
.ct-segmented>[aria-pressed="true"],.ct-segmented>[aria-selected="true"],.ct-segmented>[aria-current]:not([aria-current="false"]),.ct-segmented>.is-selected{
  background:var(--segmented-background-selected,var(--ct-segmented-background-selected));color:var(--segmented-color-selected,var(--ct-segmented-color-selected));font-weight:var(--segmented-font-weight-selected,var(--ct-segmented-font-weight-selected));box-shadow:var(--segmented-shadow-selected,var(--ct-segmented-shadow-selected))}

/* --- components/spinner.css --- */
/* Spinner: an indeterminate ring (role="status" with a label). .ct-icon-spin turns a glyph once
   per press (site.js adds it to refresh buttons). Both stop under Reduce Motion.
   Reads: size, strokeWidth, color, track, duration. */
@keyframes ct-spin{to{transform:rotate(1turn)}}
.ct-spinner{display:inline-block;width:var(--spinner-size,var(--ct-spinner-size));height:var(--spinner-size,var(--ct-spinner-size));border-radius:50%;flex:none;
  border:var(--spinner-stroke-width,var(--ct-spinner-stroke-width)) solid var(--spinner-track,var(--ct-spinner-track));border-top-color:var(--spinner-color,var(--ct-spinner-color));animation:ct-spin var(--spinner-duration,var(--ct-spinner-duration)) linear infinite}
.ct-icon-spin{animation:ct-spin var(--spinner-duration,var(--ct-spinner-duration)) ease-in-out 1}
@media (prefers-reduced-motion:reduce){.ct-spinner,.ct-icon-spin{animation:none}}

/* --- components/status.css --- */
/* Status: the word carries the meaning and colour reinforces it. Variants: --good (Due, OK),
   --warn (Delayed, errors), --alert, --muted; --pill adds a tinted background.
   Reads: fontWeight, pill.height, pill.paddingX, pill.radius, pill.fontSize, pill.tint (share of the colour). */
.ct-status{font-weight:var(--status-font-weight,var(--ct-status-font-weight));color:var(--status-color,var(--ink))}
.ct-status--good{--status-color:var(--good)}
.ct-status--warn{--status-color:var(--warn)}
.ct-status--alert{--status-color:var(--alert)}
.ct-status--muted{--status-color:var(--muted)}
.ct-status--pill{display:inline-flex;align-items:center;height:var(--status-pill-height,var(--ct-status-pill-height));padding:0 var(--status-pill-padding-x,var(--ct-status-pill-padding-x));border-radius:var(--status-pill-radius,var(--ct-status-pill-radius));
  font-size:var(--status-pill-font-size,var(--ct-status-pill-font-size));white-space:nowrap;
  background:color-mix(in srgb,var(--status-color,var(--ink)) calc(var(--status-pill-tint,var(--ct-status-pill-tint)) * 100%),transparent)}

/* --- components/table.css --- */
/* Table: tabular figures, a muted uppercase header row, hairline rules. Wrap in .ct-table-wrap to
   scroll sideways on narrow screens; --numeric right-aligns every column but the first.
   Reads: cell.paddingY, cell.paddingX, fontSize, head.fontSize, head.tracking, head.color, head.background, rule. */
.ct-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ct-table{width:100%;border-collapse:collapse;font-size:var(--table-font-size,var(--ct-table-font-size));font-variant-numeric:tabular-nums}
.ct-table th,.ct-table td{padding:var(--table-cell-padding-y,var(--ct-table-cell-padding-y)) var(--table-cell-padding-x,var(--ct-table-cell-padding-x));text-align:left;border-bottom:1px solid var(--table-rule,var(--ct-table-rule))}
.ct-table th{font-size:var(--table-head-font-size,var(--ct-table-head-font-size));font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--table-head-tracking,var(--ct-table-head-tracking));
  color:var(--table-head-color,var(--ct-table-head-color));background:var(--table-head-background,var(--ct-table-head-background));white-space:nowrap}
.ct-table tr:last-child td{border-bottom:0}
.ct-table--numeric :is(th,td):not(:first-child){text-align:right}

/* --- components/toast.css --- */
/* Toast: a transient confirmation on the live surface, centred at the bottom of its positioned
   container (--fixed: the viewport). Add .is-visible to show it; it fades and rises.
   Reads: background, color, fontSize, fontWeight, paddingY, paddingX, radius, offset, duration. */
.ct-toast{position:absolute;z-index:90;left:50%;bottom:var(--toast-offset,var(--ct-toast-offset));max-width:calc(100% - 2 * var(--toast-offset,var(--ct-toast-offset)));
  padding:var(--toast-padding-y,var(--ct-toast-padding-y)) var(--toast-padding-x,var(--ct-toast-padding-x));border-radius:var(--toast-radius,var(--ct-toast-radius));background:var(--toast-background,var(--ct-toast-background));color:var(--toast-color,var(--ct-toast-color));
  font-size:var(--toast-font-size,var(--ct-toast-font-size));font-weight:var(--toast-font-weight,var(--ct-toast-font-weight));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transform:translate(-50%,var(--toast-offset,var(--ct-toast-offset)));transition:opacity var(--toast-duration,var(--ct-toast-duration)),transform var(--toast-duration,var(--ct-toast-duration))}
.ct-toast--fixed{position:fixed;bottom:calc(var(--toast-offset,var(--ct-toast-offset)) + env(safe-area-inset-bottom,0px))}
.ct-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* --- components/tooltip.css --- */
/* Tooltip: put the hint in data-tooltip on any .ct-tooltip element; it shows on hover and focus.
   --below places it under the element. Keep hints short; never put essential information only here.
   Reads: background, color, fontSize, fontWeight, paddingY, paddingX, radius, offset, maxWidth, duration. */
.ct-tooltip{position:relative}
.ct-tooltip::after{content:attr(data-tooltip);position:absolute;z-index:10;left:50%;bottom:calc(100% + var(--tooltip-offset,var(--ct-tooltip-offset)));
  width:max-content;max-width:var(--tooltip-max-width,var(--ct-tooltip-max-width));padding:var(--tooltip-padding-y,var(--ct-tooltip-padding-y)) var(--tooltip-padding-x,var(--ct-tooltip-padding-x));border-radius:var(--tooltip-radius,var(--ct-tooltip-radius));
  background:var(--tooltip-background,var(--ct-tooltip-background));color:var(--tooltip-color,var(--ct-tooltip-color));font-size:var(--tooltip-font-size,var(--ct-tooltip-font-size));font-weight:var(--tooltip-font-weight,var(--ct-tooltip-font-weight));line-height:1.3;
  text-align:center;white-space:normal;pointer-events:none;opacity:0;transform:translateX(-50%);transition:opacity var(--tooltip-duration,var(--ct-tooltip-duration))}
.ct-tooltip--below::after{bottom:auto;top:calc(100% + var(--tooltip-offset,var(--ct-tooltip-offset)))}
.ct-tooltip:is(:hover,:focus-visible,:focus-within)::after,.ct-tooltip.is-visible::after{opacity:1}

/* --- utilities/layout.css --- */
/* Flex and grid helpers. Gaps come from the spacing utilities (.ct-gap-8, …). */
.ct-flex{display:flex}
.ct-inline-flex{display:inline-flex}
.ct-flex-col{display:flex;flex-direction:column}
.ct-flex-wrap{flex-wrap:wrap}
.ct-items-start{align-items:flex-start}
.ct-items-center{align-items:center}
.ct-items-end{align-items:flex-end}
.ct-items-baseline{align-items:baseline}
.ct-justify-start{justify-content:flex-start}
.ct-justify-center{justify-content:center}
.ct-justify-end{justify-content:flex-end}
.ct-justify-between{justify-content:space-between}
.ct-grow{flex:1 1 0;min-width:0}
.ct-shrink-0{flex-shrink:0}
.ct-grid{display:grid}
.ct-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min,var(--size-arrival-panel-width)),1fr))}
.ct-place-center{place-items:center}

/* --- utilities/visual.css --- */
/* Visual helpers. Radius, shadow, colour and background utilities are generated (generated.css). */
.ct-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ct-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-tabular{font-variant-numeric:tabular-nums}
.ct-hairline{border:1px solid var(--line)}
.ct-hairline-b{border-bottom:1px solid var(--line)}
.ct-round{border-radius:50%}

/* --- utilities/generated.css --- */
/* Generated from tokens/tokens.json by `go generate ./...`; do not edit. */
/* Spacing: m/p = all sides; t r b l = one side; x y = inline/block axis; gap, gap-x, gap-y. */
.ct-m-0{margin:var(--space-0)}
.ct-mt-0{margin-top:var(--space-0)}
.ct-mr-0{margin-right:var(--space-0)}
.ct-mb-0{margin-bottom:var(--space-0)}
.ct-ml-0{margin-left:var(--space-0)}
.ct-mx-0{margin-inline:var(--space-0)}
.ct-my-0{margin-block:var(--space-0)}
.ct-p-0{padding:var(--space-0)}
.ct-pt-0{padding-top:var(--space-0)}
.ct-pr-0{padding-right:var(--space-0)}
.ct-pb-0{padding-bottom:var(--space-0)}
.ct-pl-0{padding-left:var(--space-0)}
.ct-px-0{padding-inline:var(--space-0)}
.ct-py-0{padding-block:var(--space-0)}
.ct-gap-0{gap:var(--space-0)}
.ct-gap-x-0{column-gap:var(--space-0)}
.ct-gap-y-0{row-gap:var(--space-0)}
.ct-m-2{margin:var(--space-2)}
.ct-mt-2{margin-top:var(--space-2)}
.ct-mr-2{margin-right:var(--space-2)}
.ct-mb-2{margin-bottom:var(--space-2)}
.ct-ml-2{margin-left:var(--space-2)}
.ct-mx-2{margin-inline:var(--space-2)}
.ct-my-2{margin-block:var(--space-2)}
.ct-p-2{padding:var(--space-2)}
.ct-pt-2{padding-top:var(--space-2)}
.ct-pr-2{padding-right:var(--space-2)}
.ct-pb-2{padding-bottom:var(--space-2)}
.ct-pl-2{padding-left:var(--space-2)}
.ct-px-2{padding-inline:var(--space-2)}
.ct-py-2{padding-block:var(--space-2)}
.ct-gap-2{gap:var(--space-2)}
.ct-gap-x-2{column-gap:var(--space-2)}
.ct-gap-y-2{row-gap:var(--space-2)}
.ct-m-4{margin:var(--space-4)}
.ct-mt-4{margin-top:var(--space-4)}
.ct-mr-4{margin-right:var(--space-4)}
.ct-mb-4{margin-bottom:var(--space-4)}
.ct-ml-4{margin-left:var(--space-4)}
.ct-mx-4{margin-inline:var(--space-4)}
.ct-my-4{margin-block:var(--space-4)}
.ct-p-4{padding:var(--space-4)}
.ct-pt-4{padding-top:var(--space-4)}
.ct-pr-4{padding-right:var(--space-4)}
.ct-pb-4{padding-bottom:var(--space-4)}
.ct-pl-4{padding-left:var(--space-4)}
.ct-px-4{padding-inline:var(--space-4)}
.ct-py-4{padding-block:var(--space-4)}
.ct-gap-4{gap:var(--space-4)}
.ct-gap-x-4{column-gap:var(--space-4)}
.ct-gap-y-4{row-gap:var(--space-4)}
.ct-m-6{margin:var(--space-6)}
.ct-mt-6{margin-top:var(--space-6)}
.ct-mr-6{margin-right:var(--space-6)}
.ct-mb-6{margin-bottom:var(--space-6)}
.ct-ml-6{margin-left:var(--space-6)}
.ct-mx-6{margin-inline:var(--space-6)}
.ct-my-6{margin-block:var(--space-6)}
.ct-p-6{padding:var(--space-6)}
.ct-pt-6{padding-top:var(--space-6)}
.ct-pr-6{padding-right:var(--space-6)}
.ct-pb-6{padding-bottom:var(--space-6)}
.ct-pl-6{padding-left:var(--space-6)}
.ct-px-6{padding-inline:var(--space-6)}
.ct-py-6{padding-block:var(--space-6)}
.ct-gap-6{gap:var(--space-6)}
.ct-gap-x-6{column-gap:var(--space-6)}
.ct-gap-y-6{row-gap:var(--space-6)}
.ct-m-8{margin:var(--space-8)}
.ct-mt-8{margin-top:var(--space-8)}
.ct-mr-8{margin-right:var(--space-8)}
.ct-mb-8{margin-bottom:var(--space-8)}
.ct-ml-8{margin-left:var(--space-8)}
.ct-mx-8{margin-inline:var(--space-8)}
.ct-my-8{margin-block:var(--space-8)}
.ct-p-8{padding:var(--space-8)}
.ct-pt-8{padding-top:var(--space-8)}
.ct-pr-8{padding-right:var(--space-8)}
.ct-pb-8{padding-bottom:var(--space-8)}
.ct-pl-8{padding-left:var(--space-8)}
.ct-px-8{padding-inline:var(--space-8)}
.ct-py-8{padding-block:var(--space-8)}
.ct-gap-8{gap:var(--space-8)}
.ct-gap-x-8{column-gap:var(--space-8)}
.ct-gap-y-8{row-gap:var(--space-8)}
.ct-m-10{margin:var(--space-10)}
.ct-mt-10{margin-top:var(--space-10)}
.ct-mr-10{margin-right:var(--space-10)}
.ct-mb-10{margin-bottom:var(--space-10)}
.ct-ml-10{margin-left:var(--space-10)}
.ct-mx-10{margin-inline:var(--space-10)}
.ct-my-10{margin-block:var(--space-10)}
.ct-p-10{padding:var(--space-10)}
.ct-pt-10{padding-top:var(--space-10)}
.ct-pr-10{padding-right:var(--space-10)}
.ct-pb-10{padding-bottom:var(--space-10)}
.ct-pl-10{padding-left:var(--space-10)}
.ct-px-10{padding-inline:var(--space-10)}
.ct-py-10{padding-block:var(--space-10)}
.ct-gap-10{gap:var(--space-10)}
.ct-gap-x-10{column-gap:var(--space-10)}
.ct-gap-y-10{row-gap:var(--space-10)}
.ct-m-12{margin:var(--space-12)}
.ct-mt-12{margin-top:var(--space-12)}
.ct-mr-12{margin-right:var(--space-12)}
.ct-mb-12{margin-bottom:var(--space-12)}
.ct-ml-12{margin-left:var(--space-12)}
.ct-mx-12{margin-inline:var(--space-12)}
.ct-my-12{margin-block:var(--space-12)}
.ct-p-12{padding:var(--space-12)}
.ct-pt-12{padding-top:var(--space-12)}
.ct-pr-12{padding-right:var(--space-12)}
.ct-pb-12{padding-bottom:var(--space-12)}
.ct-pl-12{padding-left:var(--space-12)}
.ct-px-12{padding-inline:var(--space-12)}
.ct-py-12{padding-block:var(--space-12)}
.ct-gap-12{gap:var(--space-12)}
.ct-gap-x-12{column-gap:var(--space-12)}
.ct-gap-y-12{row-gap:var(--space-12)}
.ct-m-14{margin:var(--space-14)}
.ct-mt-14{margin-top:var(--space-14)}
.ct-mr-14{margin-right:var(--space-14)}
.ct-mb-14{margin-bottom:var(--space-14)}
.ct-ml-14{margin-left:var(--space-14)}
.ct-mx-14{margin-inline:var(--space-14)}
.ct-my-14{margin-block:var(--space-14)}
.ct-p-14{padding:var(--space-14)}
.ct-pt-14{padding-top:var(--space-14)}
.ct-pr-14{padding-right:var(--space-14)}
.ct-pb-14{padding-bottom:var(--space-14)}
.ct-pl-14{padding-left:var(--space-14)}
.ct-px-14{padding-inline:var(--space-14)}
.ct-py-14{padding-block:var(--space-14)}
.ct-gap-14{gap:var(--space-14)}
.ct-gap-x-14{column-gap:var(--space-14)}
.ct-gap-y-14{row-gap:var(--space-14)}
.ct-m-16{margin:var(--space-16)}
.ct-mt-16{margin-top:var(--space-16)}
.ct-mr-16{margin-right:var(--space-16)}
.ct-mb-16{margin-bottom:var(--space-16)}
.ct-ml-16{margin-left:var(--space-16)}
.ct-mx-16{margin-inline:var(--space-16)}
.ct-my-16{margin-block:var(--space-16)}
.ct-p-16{padding:var(--space-16)}
.ct-pt-16{padding-top:var(--space-16)}
.ct-pr-16{padding-right:var(--space-16)}
.ct-pb-16{padding-bottom:var(--space-16)}
.ct-pl-16{padding-left:var(--space-16)}
.ct-px-16{padding-inline:var(--space-16)}
.ct-py-16{padding-block:var(--space-16)}
.ct-gap-16{gap:var(--space-16)}
.ct-gap-x-16{column-gap:var(--space-16)}
.ct-gap-y-16{row-gap:var(--space-16)}
.ct-m-20{margin:var(--space-20)}
.ct-mt-20{margin-top:var(--space-20)}
.ct-mr-20{margin-right:var(--space-20)}
.ct-mb-20{margin-bottom:var(--space-20)}
.ct-ml-20{margin-left:var(--space-20)}
.ct-mx-20{margin-inline:var(--space-20)}
.ct-my-20{margin-block:var(--space-20)}
.ct-p-20{padding:var(--space-20)}
.ct-pt-20{padding-top:var(--space-20)}
.ct-pr-20{padding-right:var(--space-20)}
.ct-pb-20{padding-bottom:var(--space-20)}
.ct-pl-20{padding-left:var(--space-20)}
.ct-px-20{padding-inline:var(--space-20)}
.ct-py-20{padding-block:var(--space-20)}
.ct-gap-20{gap:var(--space-20)}
.ct-gap-x-20{column-gap:var(--space-20)}
.ct-gap-y-20{row-gap:var(--space-20)}
.ct-m-24{margin:var(--space-24)}
.ct-mt-24{margin-top:var(--space-24)}
.ct-mr-24{margin-right:var(--space-24)}
.ct-mb-24{margin-bottom:var(--space-24)}
.ct-ml-24{margin-left:var(--space-24)}
.ct-mx-24{margin-inline:var(--space-24)}
.ct-my-24{margin-block:var(--space-24)}
.ct-p-24{padding:var(--space-24)}
.ct-pt-24{padding-top:var(--space-24)}
.ct-pr-24{padding-right:var(--space-24)}
.ct-pb-24{padding-bottom:var(--space-24)}
.ct-pl-24{padding-left:var(--space-24)}
.ct-px-24{padding-inline:var(--space-24)}
.ct-py-24{padding-block:var(--space-24)}
.ct-gap-24{gap:var(--space-24)}
.ct-gap-x-24{column-gap:var(--space-24)}
.ct-gap-y-24{row-gap:var(--space-24)}
.ct-m-32{margin:var(--space-32)}
.ct-mt-32{margin-top:var(--space-32)}
.ct-mr-32{margin-right:var(--space-32)}
.ct-mb-32{margin-bottom:var(--space-32)}
.ct-ml-32{margin-left:var(--space-32)}
.ct-mx-32{margin-inline:var(--space-32)}
.ct-my-32{margin-block:var(--space-32)}
.ct-p-32{padding:var(--space-32)}
.ct-pt-32{padding-top:var(--space-32)}
.ct-pr-32{padding-right:var(--space-32)}
.ct-pb-32{padding-bottom:var(--space-32)}
.ct-pl-32{padding-left:var(--space-32)}
.ct-px-32{padding-inline:var(--space-32)}
.ct-py-32{padding-block:var(--space-32)}
.ct-gap-32{gap:var(--space-32)}
.ct-gap-x-32{column-gap:var(--space-32)}
.ct-gap-y-32{row-gap:var(--space-32)}
.ct-m-40{margin:var(--space-40)}
.ct-mt-40{margin-top:var(--space-40)}
.ct-mr-40{margin-right:var(--space-40)}
.ct-mb-40{margin-bottom:var(--space-40)}
.ct-ml-40{margin-left:var(--space-40)}
.ct-mx-40{margin-inline:var(--space-40)}
.ct-my-40{margin-block:var(--space-40)}
.ct-p-40{padding:var(--space-40)}
.ct-pt-40{padding-top:var(--space-40)}
.ct-pr-40{padding-right:var(--space-40)}
.ct-pb-40{padding-bottom:var(--space-40)}
.ct-pl-40{padding-left:var(--space-40)}
.ct-px-40{padding-inline:var(--space-40)}
.ct-py-40{padding-block:var(--space-40)}
.ct-gap-40{gap:var(--space-40)}
.ct-gap-x-40{column-gap:var(--space-40)}
.ct-gap-y-40{row-gap:var(--space-40)}
/* Text: size and tracking from the type ramp, weight, colour. */
.ct-text-display{font-size:var(--fs-display);letter-spacing:var(--ls-display)}
.ct-text-title{font-size:var(--fs-title);letter-spacing:var(--ls-title)}
.ct-text-body{font-size:var(--fs-body);letter-spacing:var(--ls-body)}
.ct-text-sub{font-size:var(--fs-sub);letter-spacing:var(--ls-sub)}
.ct-text-cap{font-size:var(--fs-cap);letter-spacing:var(--ls-cap)}
.ct-weight-regular{font-weight:var(--weight-regular)}
.ct-weight-medium{font-weight:var(--weight-medium)}
.ct-weight-semibold{font-weight:var(--weight-semibold)}
.ct-weight-bold{font-weight:var(--weight-bold)}
.ct-weight-heavy{font-weight:var(--weight-heavy)}
.ct-color-paper{color:var(--paper)}
.ct-color-card{color:var(--card)}
.ct-color-card2{color:var(--card-2)}
.ct-color-line{color:var(--line)}
.ct-color-inactive{color:var(--inactive)}
.ct-color-ink{color:var(--ink)}
.ct-color-muted{color:var(--muted)}
.ct-color-accent{color:var(--accent)}
.ct-color-accent-ink{color:var(--accent-ink)}
.ct-color-accent-tint{color:var(--accent-tint)}
.ct-color-good{color:var(--good)}
.ct-color-warn{color:var(--warn)}
.ct-color-alert{color:var(--alert)}
.ct-color-favorite{color:var(--favorite)}
.ct-color-scrim{color:var(--scrim)}
.ct-color-live-bg{color:var(--live-bg)}
.ct-color-live-ink{color:var(--live-ink)}
.ct-bg-paper{background-color:var(--paper)}
.ct-bg-card{background-color:var(--card)}
.ct-bg-card2{background-color:var(--card-2)}
.ct-bg-line{background-color:var(--line)}
.ct-bg-inactive{background-color:var(--inactive)}
.ct-bg-ink{background-color:var(--ink)}
.ct-bg-muted{background-color:var(--muted)}
.ct-bg-accent{background-color:var(--accent)}
.ct-bg-accent-ink{background-color:var(--accent-ink)}
.ct-bg-accent-tint{background-color:var(--accent-tint)}
.ct-bg-good{background-color:var(--good)}
.ct-bg-warn{background-color:var(--warn)}
.ct-bg-alert{background-color:var(--alert)}
.ct-bg-favorite{background-color:var(--favorite)}
.ct-bg-scrim{background-color:var(--scrim)}
.ct-bg-live-bg{background-color:var(--live-bg)}
.ct-bg-live-ink{background-color:var(--live-ink)}
/* Visual: radius and elevation. */
.ct-radius-control{border-radius:var(--r-control)}
.ct-radius-card{border-radius:var(--r-card)}
.ct-radius-dialog{border-radius:var(--r-modal)}
.ct-radius-sheet{border-radius:var(--r-sheet)}
.ct-radius-line-bar{border-radius:var(--radius-line-bar)}
.ct-radius-chip{border-radius:var(--radius-chip)}
.ct-radius-segment{border-radius:var(--radius-segment)}
.ct-radius-pill{border-radius:var(--radius-pill)}
.ct-shadow-sheet{box-shadow:var(--shadow-sheet)}
.ct-shadow-floating{box-shadow:var(--shadow-fab)}
.ct-shadow-control{box-shadow:var(--shadow-control)}