/* Components, ported from the design system backbone and checked against lib/ui/components in the Flutter app. */
@layer components {
  /* Avatar: the member's photo in a hairline circle, or their initials over the quiet diagonal. */
  .rtg-avatar {
    --avatar-size: 40px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    overflow: hidden;
    border: var(--stroke-hairline) solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-low);
    vertical-align: middle;
  }

  .rtg-avatar .rtg-avatar__well {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .rtg-avatar__initials {
    position: relative;
    font-family: var(--font-mono);
    font-size: calc(var(--avatar-size) * 0.32);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    color: var(--icon-faint);
    white-space: nowrap;
  }

  .rtg-avatar__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Badge: a tinted 24px status chip in tracked caps, with a hairline that matches its tone. */
  .rtg-badge {
    --_fill: var(--surface-field);
    --_ink: var(--text-muted);
    --_stroke: var(--border-hairline);
    --_glow: 0 0 0 0 transparent;
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 24px;
    max-width: 100%;
    margin: 0;
    padding: 0 calc(9px - var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--_stroke);
    border-radius: var(--radius-sm);
    background: var(--_fill);
    color: var(--_ink);
    box-shadow: var(--_glow);
    font-family: var(--font-sans);
    font-size: var(--fs-xxs);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
  }

  .rtg-badge__label {
    min-width: 0;
    overflow: hidden;
  }

  .rtg-badge__dot {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .rtg-badge .rtg-icon {
    --icon-size: 12px;
    margin-right: 5px;
  }

  .rtg-badge--primary {
    --_fill: var(--primary-container);
    --_ink: var(--on-primary-container);
    --_stroke: var(--border-accent);
  }

  .rtg-badge--data {
    --_fill: var(--data-container);
    --_ink: var(--on-data-container);
    --_stroke: var(--border-data);
  }

  .rtg-badge--go {
    --_fill: var(--go-container);
    --_ink: var(--on-go-container);
    --_stroke: var(--status-go-quiet);
  }

  .rtg-badge--error {
    --_fill: var(--error-container);
    --_ink: var(--on-error-container);
    --_stroke: var(--border-error);
  }

  .rtg-badge--live {
    --_fill: var(--live-container);
    --_ink: var(--on-live-container);
    --_stroke: var(--border-accent);
    --_glow: var(--glow-accent-soft);
  }

  .rtg-badge--live .rtg-badge__dot {
    box-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent);
  }

  .rtg-badge.rtg-badge--solid {
    --_fill: var(--accent);
    --_ink: var(--text-on-accent);
    --_stroke: var(--border-on-accent);
  }

  .rtg-badge.rtg-badge--solid.rtg-badge--error {
    --_fill: var(--status-danger);
    --_ink: var(--text-on-danger);
    --_stroke: var(--status-danger);
  }

  /* Button: orange fill, white tracked caps and the corner notch. Carries .rtg-notched. */
  .rtg-button {
    --_h: var(--touch-target);
    --_px: 22px;
    --_fs: var(--fs-sm);
    --_icon: 17px;
    --_none: 0 0 0 0 transparent;
    --_fill: var(--accent);
    --_fill-hover: var(--accent-hover);
    --_fill-press: var(--accent-press);
    --_ink: var(--text-on-accent);
    --_ink-press: var(--_ink);
    --_stroke: var(--border-on-accent);
    --_stroke-press: var(--_stroke);
    --_shadow: var(--bloom-accent);
    --_shadow-press: var(--_none);
    --_overlay-hover: transparent;
    --_overlay-press: var(--state-press-on-accent);
    --notch: var(--notch-md);
    --notch-fill: var(--_fill);
    --notch-stroke: var(--_stroke);
    --notch-overlay: transparent;
    --_shadow-now: var(--_shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: var(--_h);
    max-width: 100%;
    margin: 0;
    padding: 0 var(--_px);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--_ink);
    font-family: var(--font-sans);
    font-size: var(--_fs);
    font-weight: 800;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--_shadow-now);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-press) var(--ease-incoming);
  }

  .rtg-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rtg-button .rtg-icon { --icon-size: var(--_icon); }
  .rtg-button .rtg-spinner { --spinner-size: var(--_icon); --spinner-ink: currentColor; }

  .rtg-button--sm { --_h: 36px; --_px: 16px; --_fs: var(--fs-xs); --_icon: 15px; --notch: var(--notch-sm); }
  .rtg-button--lg { --_h: 54px; --_px: 28px; --_fs: var(--fs-base); --_icon: 19px; }

  .rtg-button--block {
    display: flex;
    width: 100%;
  }

  .rtg-button--no-notch::before {
    clip-path: none;
    border-radius: var(--radius-control);
  }

  .rtg-button--no-notch::after { display: none; }

  .rtg-button--outline {
    --_fill: var(--surface-glass);
    --_fill-hover: var(--surface-glass);
    --_fill-press: var(--surface-glass);
    --_ink: var(--text-body);
    --_stroke: var(--border-hairline);
    --_shadow: var(--_none);
    --_overlay-hover: var(--state-hover);
    --_overlay-press: var(--state-press);
  }

  .rtg-button--elevated {
    --_fill: var(--surface-glass-high);
    --_fill-hover: var(--surface-glass-high);
    --_fill-press: var(--surface-glass-high);
    --_ink: var(--text-primary);
    --_stroke: var(--border-subtle);
    --_shadow: var(--elevation-2);
    --_shadow-press: var(--elevation-1);
    --_overlay-hover: var(--state-hover);
    --_overlay-press: var(--state-press);
  }

  .rtg-button--tonal {
    --_fill: var(--primary-container);
    --_fill-hover: var(--primary-container-hover);
    --_fill-press: var(--primary-container-hover);
    --_ink: var(--on-primary-container);
    --_stroke: var(--border-accent);
    --_shadow: var(--_none);
    --_overlay-press: var(--state-press);
  }

  .rtg-button--text {
    --_fill: transparent;
    --_fill-hover: var(--accent-quiet);
    --_fill-press: var(--accent-quiet);
    --_ink: var(--text-accent);
    --_stroke: transparent;
    --_shadow: var(--_none);
    --_overlay-press: var(--state-press);
  }

  .rtg-button--danger {
    --_fill: var(--error-container);
    --_fill-hover: var(--error-container);
    --_fill-press: var(--status-danger-press);
    --_ink: var(--text-danger);
    --_ink-press: var(--text-on-danger);
    --_stroke: var(--border-error);
    --_stroke-press: var(--status-danger-press);
    --_shadow: var(--_none);
    --_shadow-press: var(--bloom-danger);
    --_overlay-hover: var(--state-hover);
    --_overlay-press: var(--state-press-on-accent);
  }

  @media (hover: hover) {
    .rtg-button:hover:not(:disabled, [aria-disabled="true"], .rtg-button--loading) {
      --notch-fill: var(--_fill-hover);
      --notch-overlay: var(--_overlay-hover);
    }
  }

  .rtg-button.is-hovered {
    --notch-fill: var(--_fill-hover);
    --notch-overlay: var(--_overlay-hover);
  }

  .rtg-button:is(:active, .is-pressed):not(:disabled, [aria-disabled="true"], .rtg-button--loading) {
    --notch-fill: var(--_fill-press);
    --notch-stroke: var(--_stroke-press);
    --notch-overlay: var(--_overlay-press);
    --_shadow-now: var(--_shadow-press);
    color: var(--_ink-press);
    transform: scale(var(--press-scale-control));
  }

  .rtg-button:is(:focus-visible, .is-focused) {
    outline: none;
    box-shadow: var(--_shadow-now), var(--focus-ring);
  }

  .rtg-button:is(:disabled, [aria-disabled="true"]) {
    opacity: var(--opacity-disabled);
    cursor: default;
  }

  .rtg-button--loading { cursor: progress; }

  /* Card: the surface primitive. Depth is a tonal fill plus an elevation; the hairline is drawn over the edge. */
  .rtg-card {
    --_none: 0 0 0 0 transparent;
    --_fill: var(--surface-glass);
    --_wash: none;
    --_stroke: var(--border-hairline);
    --_overlay: transparent;
    --_elevation: var(--elevation-1);
    --_elevation-press: var(--elevation-3);
    --_elevation-now: var(--_elevation);
    --_glow: var(--_none);
    --_ring: var(--_none);
    position: relative;
    isolation: isolate;
    display: block;
    margin: 0;
    padding: var(--pad-card);
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--_fill);
    background-image: linear-gradient(var(--_overlay), var(--_overlay)), var(--_wash);
    box-shadow: var(--_ring), var(--_glow), var(--_elevation-now);
    color: var(--text-body);
    font: inherit;
    text-align: inherit;
    text-decoration: none;
  }

  .rtg-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: var(--stroke-hairline) solid var(--_stroke);
    border-radius: inherit;
    pointer-events: none;
  }

  button.rtg-card { width: 100%; }

  .rtg-card--filled { --_fill: var(--surface); }
  .rtg-card--low { --_fill: var(--surface-low); }
  .rtg-card--high { --_fill: var(--surface-high); }

  .rtg-card--flat {
    --_fill: transparent;
    --_elevation: var(--_none);
  }

  .rtg-card:is(.rtg-card--selected, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], .is-selected) {
    --_fill: var(--primary-container);
    --_stroke: var(--border-accent);
    --_glow: var(--glow-accent-soft);
  }

  .rtg-card.rtg-card--accent {
    --_fill: transparent;
    --_wash: var(--grad-accent-soft);
    --_stroke: var(--border-accent);
  }

  .rtg-card.rtg-card--elevation-0 { --_elevation: var(--_none); --_elevation-press: var(--_none); }
  .rtg-card.rtg-card--elevation-1 { --_elevation: var(--elevation-1); --_elevation-press: var(--elevation-1); }
  .rtg-card.rtg-card--elevation-2 { --_elevation: var(--elevation-2); --_elevation-press: var(--elevation-2); }
  .rtg-card.rtg-card--elevation-3 { --_elevation: var(--elevation-3); --_elevation-press: var(--elevation-3); }
  .rtg-card.rtg-card--elevation-4 { --_elevation: var(--elevation-4); --_elevation-press: var(--elevation-4); }
  .rtg-card.rtg-card--elevation-5 { --_elevation: var(--elevation-5); --_elevation-press: var(--elevation-5); }

  .rtg-card--interactive {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--duration-hover) var(--ease-standard),
      box-shadow var(--duration-hover) var(--ease-standard);
  }

  @media (hover: hover) {
    .rtg-card--interactive:hover:not(:active) {
      --_overlay: var(--state-hover);
      --_elevation-now: var(--_elevation-press);
      transform: translateY(var(--hover-lift));
    }
  }

  .rtg-card--interactive:is(:active, .is-pressed) {
    --_overlay: var(--state-press);
    --_elevation-now: var(--_elevation-press);
    transform: scale(var(--press-scale-tile));
  }

  .rtg-card:is(:focus-visible, .is-focused) {
    outline: none;
    --_ring: var(--focus-ring);
  }

  /* Checkbox: a 20px box with a 2px corner on a ControlRow; solid accent and a white check when on. */
  .rtg-checkbox__input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .rtg-checkbox__box {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border: var(--stroke-hairline) solid var(--border-strong);
    border-radius: var(--radius-xs);
    background-color: transparent;
    color: var(--text-on-accent);
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .rtg-checkbox__box .rtg-icon {
    --icon-size: 14px;
    display: none;
  }

  .rtg-checkbox__input:checked + .rtg-checkbox__box {
    border-color: var(--border-on-accent);
    background-color: var(--accent);
  }

  .rtg-checkbox__input:checked + .rtg-checkbox__box .rtg-icon { display: block; }

  .rtg-checkbox__input:focus-visible + .rtg-checkbox__box,
  .rtg-checkbox.is-focused .rtg-checkbox__box {
    box-shadow: var(--focus-ring);
  }

  /* ControlRow: a control beside its label and description, the whole row one 44px hit target. */
  .rtg-control-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    min-height: var(--touch-target);
    margin: 0;
    color: var(--text-body);
    font-family: var(--font-sans);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-control-row__text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .rtg-control-row__label {
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-body);
  }

  .rtg-control-row__description {
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-faint);
  }

  .rtg-control-row--trailing > .rtg-control-row__text { order: -1; }

  .rtg-control-row:is([aria-disabled="true"], :has(input:disabled)) {
    opacity: var(--opacity-disabled);
    cursor: default;
  }

  /* DashedBox: the dashed hairline that marks a slot nothing fills yet, as a well with a message or as a bare outline. */
  .rtg-dashed-box {
    --dashed-box-color: var(--border-subtle);
    --dashed-box-radius: var(--radius-card);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: calc(var(--space-4) + var(--space-1));
    border-radius: var(--dashed-box-radius);
  }

  .rtg-dashed-box--bare {
    display: block;
    padding: 0;
  }

  .rtg-dashed-box__outline {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .rtg-dashed-box__outline rect {
    fill: none;
    stroke: var(--dashed-box-color);
    stroke-width: var(--stroke-hairline);
    stroke-dasharray: 4 4;
  }

  .rtg-dashed-box__message {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    line-height: var(--lh-normal);
    color: var(--text-muted);
  }

  /* Dialog: a stroked-glass modal panel, or a bottom sheet with a grabber, over a blurred scrim. */
  .rtg-dialog {
    --dialog-width: 420px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(var(--dialog-width), 100%);
    min-width: 0;
    padding: calc(var(--pad-sheet) - var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--border-subtle);
    border-radius: var(--radius-modal);
    background: var(--surface-glass-high);
    -webkit-backdrop-filter: blur(var(--blur-modal)) saturate(var(--saturation-modal));
    backdrop-filter: blur(var(--blur-modal)) saturate(var(--saturation-modal));
    box-shadow: var(--elevation-4);
    color: var(--text-body);
    animation: rtg-dialog-in var(--duration-enter) var(--ease-out) both;
  }

  .rtg-dialog-frame {
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
  }

  .rtg-dialog-frame:not([open]) { display: none; }

  .rtg-dialog-frame:modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--pad-screen-mobile);
  }

  .rtg-dialog-frame::backdrop {
    background: var(--surface-scrim);
    -webkit-backdrop-filter: blur(calc(var(--blur-scrim) / 2));
    backdrop-filter: blur(calc(var(--blur-scrim) / 2));
    animation: rtg-fade var(--duration-enter) ease both;
  }

  .rtg-dialog-frame > .rtg-dialog {
    max-width: min(var(--dialog-width), 100%);
    max-height: 100%;
  }

  .rtg-dialog__grabber {
    flex: none;
    align-self: center;
    width: 36px;
    height: 4px;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }

  .rtg-dialog__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-snug);
    color: var(--text-primary);
  }

  .rtg-dialog__description {
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--text-body);
  }

  .rtg-dialog__content {
    flex: 0 1 auto;
    min-height: 0;
    margin-top: var(--space-6);
    overflow: auto;
  }

  .rtg-dialog__actions {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: var(--gap-inline);
    margin-top: var(--space-7);
  }

  .rtg-dialog__actions > * { min-width: 0; }

  .rtg-dialog--sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding-bottom: calc(var(--pad-sheet) + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    animation-name: rtg-sheet-in;
    animation-duration: var(--duration-sheet);
  }

  @media (max-width: 719px) {
    .rtg-dialog-frame--sheet:modal {
      align-items: flex-end;
      padding: 0;
    }

    .rtg-dialog-frame > .rtg-dialog--sheet {
      max-width: none;
    }
  }

  @media (min-width: 720px) {
    .rtg-dialog--sheet,
    .rtg-dialog-frame > .rtg-dialog--sheet {
      width: 100%;
      max-width: min(var(--dialog-width), 100%);
      margin: 0;
      padding-bottom: calc(var(--pad-sheet) - var(--stroke-hairline));
      border-bottom: var(--stroke-hairline) solid var(--border-subtle);
      border-radius: var(--radius-modal);
      animation-name: rtg-dialog-in;
      animation-duration: var(--duration-enter);
    }

    .rtg-dialog--sheet .rtg-dialog__grabber { display: none; }
  }

  @keyframes rtg-dialog-in {
    from { opacity: 0; transform: translateY(4vh); }
  }

  @keyframes rtg-sheet-in {
    from { opacity: 0; transform: translateY(12vh); }
  }

  /* ErrorState: a centred low card that says why a screen has no content, with a retry. */
  .rtg-error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .rtg-error-state__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rtg-error-state__icon {
    --icon-size: var(--icon-feature);
    margin-bottom: var(--space-4);
    color: var(--text-muted);
  }

  .rtg-error-state--danger .rtg-error-state__icon { color: var(--text-danger); }

  .rtg-error-state__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-normal);
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .rtg-error-state__message {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
  }

  /* FeatureCard: the notched surface panel a screen leads with, behind a live rail. Carries .rtg-notched. */
  .rtg-feature-card {
    --notch: var(--notch-lg);
    --notch-fill: var(--surface);
    --notch-stroke: var(--border-hairline);
    --notch-overlay: transparent;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: var(--elevation-1);
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
  }

  button.rtg-feature-card { width: 100%; }

  .rtg-feature-card__body {
    display: block;
    padding: calc(var(--space-4) + var(--space-1));
  }

  .rtg-feature-card--interactive {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-press) var(--ease-incoming);
  }

  @media (hover: hover) {
    .rtg-feature-card--interactive:hover:not(:active) { --notch-overlay: var(--state-hover); }
  }

  .rtg-feature-card--interactive:is(:active, .is-pressed) {
    --notch-overlay: var(--state-press);
    transform: scale(var(--press-scale-tile));
  }

  /* FieldShell: label, filled well and hint row shared by Input and Select. */
  .rtg-field-shell {
    --_label-ink: var(--text-muted);
    --_hint-ink: var(--text-faint);
    --_stroke: var(--border-hairline);
    --_ring: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    font-family: var(--font-sans);
  }

  .rtg-field-shell__label {
    display: block;
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--_label-ink);
  }

  .rtg-field-shell__ring {
    border: var(--stroke-field-focus-ring) solid var(--_ring);
    border-radius: calc(var(--radius-input) + var(--stroke-field-focus-ring));
  }

  .rtg-field-shell__well {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: var(--pad-control-y) var(--pad-control-x);
    border-radius: var(--radius-input);
    background: var(--surface-field);
    box-shadow: inset 0 0 0 var(--stroke-hairline) var(--_stroke);
  }

  @media (hover: hover) {
    .rtg-field-shell:not([aria-disabled="true"]) .rtg-field-shell__well:hover { background: var(--surface-field-hover); }
  }

  .rtg-field-shell__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--_hint-ink);
  }

  .rtg-field-shell:is(.is-focused, :has(:is(input, textarea):focus, :focus-visible)):not(.rtg-field-shell--error, :has([aria-invalid="true"])) {
    --_stroke: var(--accent-bright);
    --_ring: color-mix(in srgb, var(--accent-bright) 28%, transparent);
  }

  .rtg-field-shell:is(.rtg-field-shell--error, :has([aria-invalid="true"])) {
    --_label-ink: var(--text-danger);
    --_hint-ink: var(--text-danger);
    --_stroke: var(--border-error);
  }

  .rtg-field-shell:is([aria-disabled="true"], :has(:is(input, textarea, button):disabled)) {
    opacity: var(--opacity-disabled);
  }

  /* FlowBar: the top bar of a step flow, with its way out, the step being filled and a mono progress readout. */
  .rtg-flow-bar {
    display: flex;
    align-items: center;
    gap: calc(var(--space-2) + var(--space-1));
    height: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: env(safe-area-inset-top, 0px) var(--space-3) 0;
    background: var(--surface-glass-bar);
    border-bottom: var(--stroke-hairline) solid var(--border-subtle);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  .rtg-flow-bar__heading {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .rtg-flow-bar__title {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-flow-bar__subtitle,
  .rtg-flow-bar__step,
  .rtg-flow-bar__count {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
  }

  .rtg-flow-bar__subtitle {
    margin: 0;
    overflow: hidden;
    color: var(--text-faint);
    font-size: var(--fs-xxs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-flow-bar__step {
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--fs-step-row);
  }

  .rtg-flow-bar__count {
    flex: none;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    white-space: nowrap;
  }

  /* IconButton: an icon-only square control at radius-control, for bars, toolbars and card corners. */
  .rtg-icon-button {
    --_size: var(--touch-target);
    --_icon: var(--icon-base);
    --_none: 0 0 0 0 transparent;
    --_fill: transparent;
    --_fill-press: var(--_fill);
    --_fill-now: var(--_fill);
    --_ink: var(--text-body);
    --_stroke: transparent;
    --_overlay: transparent;
    --_overlay-press: var(--state-press);
    --_shadow: var(--_none);
    --_shadow-press: var(--_none);
    --_shadow-now: var(--_shadow);
    --_ring: var(--_none);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--_size);
    height: var(--_size);
    margin: 0;
    padding: 0;
    border: var(--stroke-hairline) solid var(--_stroke);
    border-radius: var(--radius-control);
    background-color: var(--_fill-now);
    background-image: linear-gradient(var(--_overlay), var(--_overlay));
    color: var(--_ink);
    box-shadow: var(--_ring), var(--_shadow-now);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-press) var(--ease-incoming);
  }

  .rtg-icon-button .rtg-icon { --icon-size: var(--_icon); }

  .rtg-icon-button--sm { --_size: 36px; --_icon: var(--icon-control); }
  .rtg-icon-button--lg { --_size: var(--control-height-lg); --_icon: var(--icon-nav); }

  .rtg-icon-button--stroked {
    --_fill: var(--surface-glass);
    --_stroke: var(--border-hairline);
  }

  .rtg-icon-button:is(.rtg-icon-button--tonal, .rtg-icon-button--active, [aria-pressed="true"], .is-on) {
    --_fill: var(--primary-container);
    --_ink: var(--on-primary-container);
    --_stroke: var(--border-accent);
  }

  .rtg-icon-button.rtg-icon-button--filled {
    --_fill: var(--accent);
    --_fill-press: var(--accent-press);
    --_ink: var(--text-on-accent);
    --_stroke: var(--border-on-accent);
    --_shadow: var(--bloom-accent);
    --_overlay-press: var(--state-press-on-accent);
  }

  @media (hover: hover) {
    .rtg-icon-button:hover:not(:disabled, [aria-disabled="true"], :active) { --_overlay: var(--state-hover); }
    .rtg-icon-button--filled:hover:not(:disabled, [aria-disabled="true"], :active) { --_fill-now: var(--accent-hover); --_overlay: var(--state-hover-on-accent); }
  }

  .rtg-icon-button:is(:active, .is-pressed):not(:disabled, [aria-disabled="true"]) {
    --_fill-now: var(--_fill-press);
    --_overlay: var(--_overlay-press);
    --_shadow-now: var(--_shadow-press);
    transform: scale(var(--press-scale-control));
  }

  .rtg-icon-button:is(:focus-visible, .is-focused) {
    outline: none;
    --_ring: var(--focus-ring);
  }

  .rtg-icon-button:is(:disabled, [aria-disabled="true"]) {
    opacity: var(--opacity-disabled);
    cursor: default;
  }

  /* Input: a text field in the FieldShell well, with an optional icon and unit; tabular mono when numeric. */
  .rtg-input__icon {
    --icon-size: var(--icon-control);
    margin-right: var(--gap-inline);
    color: var(--icon-faint);
  }

  .rtg-input__control {
    display: block;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: calc(var(--fs-base) * var(--lh-normal));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    -webkit-text-fill-color: currentColor;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    caret-color: var(--accent-bright);
    opacity: 1;
    appearance: none;
  }

  .rtg-input__control::placeholder {
    color: var(--text-faint);
    -webkit-text-fill-color: var(--text-faint);
    opacity: 1;
  }

  textarea.rtg-input__control {
    height: auto;
    overflow: auto;
    resize: none;
  }

  .rtg-input--numeric .rtg-input__control {
    height: calc(var(--fs-base) * var(--lh-snug));
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
  }

  .rtg-input--numeric textarea.rtg-input__control { height: auto; }

  .rtg-input__suffix {
    flex: none;
    margin-left: var(--gap-inline);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    white-space: nowrap;
  }

  /* ListLabel: tracked micro-caps heading a list or settings group, with a mono figure pinned right. */
  .rtg-list-label {
    display: flex;
    align-items: baseline;
    min-width: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-xxxs);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .rtg-list-label__text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rtg-list-label__meta {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }

  /* Logo: the RTG lockup and mark, two-colour on themed grounds, mono white over photography. */
  .rtg-logo {
    --logo-height: 28px;
    display: inline-flex;
    flex: none;
    height: var(--logo-height);
    line-height: 0;
  }

  .rtg-logo img {
    display: block;
    height: 100%;
    width: auto;
  }

  .rtg-logo--clear-space {
    padding: calc(var(--logo-height) * 0.125);
  }

  .rtg-logo--auto .rtg-logo__on-light { display: none; }
  [data-theme="light"] .rtg-logo--auto .rtg-logo__on-dark { display: none; }
  [data-theme="light"] .rtg-logo--auto .rtg-logo__on-light { display: block; }

  /* ProgressBar: a hairline pill track with a bright fill, for work with a known extent or a looping sweep. */
  .rtg-progress-bar {
    --progress-height: 6px;
    --_fill: var(--accent-bright);
    --_glow: 0 0 0 0 transparent;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .rtg-progress-bar__head {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-bottom: var(--space-3);
  }

  .rtg-progress-bar__label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: var(--lh-normal);
    color: var(--text-muted);
  }

  .rtg-progress-bar__caption {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
  }

  .rtg-progress-bar__track {
    height: var(--progress-height);
    padding: var(--stroke-hairline);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-field);
    box-shadow: inset 0 0 0 var(--stroke-hairline) var(--border-hairline);
  }

  .rtg-progress-bar__fill {
    width: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--_fill);
    box-shadow: var(--_glow);
    transition: width var(--duration-slow) var(--ease-out);
    animation: rtg-progress-grow var(--duration-slow) var(--ease-out);
  }

  .rtg-progress-bar--error { --_fill: var(--status-danger); }
  .rtg-progress-bar--glow { --_glow: var(--glow-accent-soft); }
  .rtg-progress-bar--glow.rtg-progress-bar--error { --_glow: var(--glow-danger); }

  .rtg-progress-bar--indeterminate .rtg-progress-bar__fill {
    width: 40%;
    transition: none;
    animation: rtg-progress-sweep 1400ms linear infinite;
  }

  @keyframes rtg-progress-grow {
    from { width: 0; }
  }

  @keyframes rtg-progress-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
  }

  /* Radio: a 20px ring on a ControlRow; a 2px bright ring and a 10px accent dot when chosen. */
  .rtg-radio__input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .rtg-radio__ring {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border: var(--stroke-hairline) solid var(--border-strong);
    border-radius: 50%;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      border-width var(--duration-fast) var(--ease-standard);
  }

  .rtg-radio__ring::after {
    content: "";
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }

  .rtg-radio__input:checked + .rtg-radio__ring {
    border-width: var(--stroke-focus-ring);
    border-color: var(--accent-bright);
  }

  .rtg-radio__input:checked + .rtg-radio__ring::after { display: block; }

  .rtg-radio__input:focus-visible + .rtg-radio__ring,
  .rtg-radio.is-focused .rtg-radio__ring {
    box-shadow: var(--focus-ring);
  }

  /* ScreenFooter: the glass footer that holds a screen's primary action above the home indicator. */
  .rtg-screen-footer {
    display: block;
    margin: 0;
    padding: var(--space-5) var(--pad-screen-mobile) max(var(--space-7), env(safe-area-inset-bottom, 0px));
    background: var(--surface-glass-bar);
    border-top: var(--stroke-hairline) solid var(--border-subtle);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  /* SectionHeading: the one place Ethnocentric appears in product UI: eyebrow, title and hatch rule. */
  .rtg-section-heading {
    --_title: var(--fs-xl);
    --_title-lh: var(--lh-tight);
    --_rule: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .rtg-section-heading__eyebrow {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .rtg-section-heading__row {
    display: flex;
    align-items: flex-end;
    gap: var(--gap-section);
    align-self: stretch;
    min-width: 0;
  }

  .rtg-section-heading__title {
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--_title);
    font-weight: 400;
    letter-spacing: var(--tracking-title);
    line-height: var(--_title-lh);
    text-transform: uppercase;
    overflow-wrap: break-word;
    color: var(--text-primary);
  }

  .rtg-section-heading__row > .rtg-section-heading__title { flex: 1 1 auto; }
  .rtg-section-heading__action { flex: none; }

  .rtg-section-heading__rule {
    --speed-rule-width: var(--_rule);
    --speed-rule-height: 8px;
    margin-top: var(--space-4);
  }

  .rtg-section-heading__meta {
    max-width: var(--prose-width);
    margin: var(--space-4) 0 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
  }

  .rtg-section-heading--sm { --_title: var(--fs-lg); }
  .rtg-section-heading--lg { --_title: var(--fs-xxl); }

  .rtg-section-heading--display {
    --_title: var(--fs-xxxl);
    --_title-lh: var(--lh-display);
    --_rule: 220px;
  }

  .rtg-section-heading--no-rule .rtg-section-heading__rule { display: none; }

  /* SegmentedControl: a field-toned capsule of two to four options with an accent indicator that slides to the pick. */
  .rtg-segmented-control {
    --_h: var(--control-height);
    --_px: 12px;
    --_fs: var(--fs-xs);
    --_count: 1;
    --_index: 0;
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: var(--_h);
    max-width: 100%;
    margin: 0;
    padding: 3px;
    background: var(--surface-field);
    border: var(--stroke-hairline) solid var(--border-hairline);
    border-radius: var(--radius-control);
    vertical-align: middle;
  }

  .rtg-segmented-control::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    width: calc((100% - 6px) / var(--_count));
    background: var(--primary-container);
    border: var(--stroke-hairline) solid var(--border-accent);
    border-radius: var(--radius-control);
    box-shadow: var(--glow-accent-soft);
    opacity: 0;
    transform: translateX(calc(var(--_index) * 100%));
    transition: transform var(--duration-base) var(--ease-standard);
    pointer-events: none;
  }

  .rtg-segmented-control:has(> :nth-child(2):last-child) { --_count: 2; }
  .rtg-segmented-control:has(> :nth-child(3):last-child) { --_count: 3; }
  .rtg-segmented-control:has(> :nth-child(4):last-child) { --_count: 4; }

  .rtg-segmented-control:has(> :is([aria-checked="true"], [aria-selected="true"], .is-selected))::before { opacity: 1; }
  .rtg-segmented-control:has(> :nth-child(2):is([aria-checked="true"], [aria-selected="true"], .is-selected)) { --_index: 1; }
  .rtg-segmented-control:has(> :nth-child(3):is([aria-checked="true"], [aria-selected="true"], .is-selected)) { --_index: 2; }
  .rtg-segmented-control:has(> :nth-child(4):is([aria-checked="true"], [aria-selected="true"], .is-selected)) { --_index: 3; }

  .rtg-segmented-control--sm {
    --_h: var(--control-height-sm);
    --_px: 8px;
    --_fs: var(--fs-xxs);
  }

  .rtg-segmented-control--block {
    display: grid;
    width: 100%;
  }

  .rtg-segmented-control__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 0 var(--_px);
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--_fs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-segmented-control__segment .rtg-icon {
    --icon-size: 15px;
    margin-right: 6px;
  }

  .rtg-segmented-control__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rtg-segmented-control__segment:is([aria-checked="true"], [aria-selected="true"], .is-selected) {
    color: var(--on-primary-container);
  }

  @media (hover: hover) {
    .rtg-segmented-control__segment:hover:not([aria-checked="true"], [aria-selected="true"], .is-selected, :disabled, [aria-disabled="true"], :active) { background: var(--state-hover); color: var(--text-body); }
  }

  .rtg-segmented-control__segment:is(:active, .is-pressed):not([aria-checked="true"], [aria-selected="true"], .is-selected, :disabled, [aria-disabled="true"]) {
    background: var(--state-press);
  }

  .rtg-segmented-control__segment:is(:focus-visible, .is-focused) {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .rtg-segmented-control__segment:is(:disabled, [aria-disabled="true"]) {
    cursor: default;
  }

  /* Select: a FieldShell trigger with a chevron that opens a surface-high menu over the field. */
  .rtg-select .rtg-field-shell__well { padding-right: var(--space-4); }

  .rtg-select__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-select__trigger:disabled { cursor: default; }

  .rtg-select__value,
  .rtg-select__placeholder {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-select__placeholder { color: var(--text-faint); }

  .rtg-select__chevron {
    --icon-size: var(--icon-control);
    color: var(--icon-faint);
  }

  .rtg-select { position: relative; }

  .rtg-select__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    max-height: 320px;
    margin: 0;
    padding: var(--space-2) 0;
    overflow-y: auto;
    list-style: none;
    border: var(--stroke-hairline) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-glass-bar);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    box-shadow: var(--elevation-3);
    animation: rtg-fade var(--duration-fast) var(--ease-out);
  }

  .rtg-select__menu[hidden] { display: none; }

  .rtg-select__option {
    --_hover: transparent;
    --_focus: transparent;
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0 var(--space-5);
    background: linear-gradient(var(--_hover), var(--_hover)), linear-gradient(var(--_focus), var(--_focus));
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    cursor: pointer;
  }

  @media (hover: hover) {
    .rtg-select__option:hover { --_hover: var(--state-hover); }
  }

  .rtg-select__option.is-hovered { --_hover: var(--state-hover); }
  .rtg-select__option.is-focused { --_focus: var(--state-hover); }
  .rtg-select__option[aria-selected="true"] { --_focus: var(--state-selected); color: var(--on-primary-container); }

  /* SettingsRow: a hairline-divided row with a glyph, a label, an optional mono readout and a chevron. */
  .rtg-settings-row {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    width: 100%;
    margin: 0;
    padding: var(--space-4) 0;
    background: transparent;
    border: 0;
    border-top: var(--stroke-hairline) solid var(--divider);
    border-radius: 0;
    color: var(--text-body);
    font-family: var(--font-sans);
    text-align: left;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-settings-row:is(button, a[href]) {
    cursor: pointer;
    user-select: none;
  }

  .rtg-settings-row--last {
    border-bottom: var(--stroke-hairline) solid var(--divider);
  }

  .rtg-settings-row__icon {
    --icon-size: var(--icon-control);
    color: var(--text-body);
  }

  .rtg-settings-row__label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    line-height: var(--lh-relaxed);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-settings-row__value {
    flex: none;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .rtg-settings-row__chevron {
    --icon-size: var(--icon-control);
    color: var(--icon-faint);
  }

  @media (hover: hover) {
    .rtg-settings-row:is(button, a[href]):hover:not(:disabled, [aria-disabled="true"], :active) { background: var(--state-hover); }
  }

  .rtg-settings-row:is(button, a[href]):is(:active, .is-pressed):not(:disabled, [aria-disabled="true"]) {
    background: var(--state-press);
  }

  .rtg-settings-row:is(:focus-visible, .is-focused) {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .rtg-settings-row:is(:disabled, [aria-disabled="true"]) {
    cursor: default;
  }

  /* Slider: a 6px track, an 8 by 24 bar handle and a tabular-mono readout. Set --slider-value from 0 to 1. */
  .rtg-slider {
    --slider-value: 0;
    --_active: var(--accent-bright);
    --_inactive: var(--surface-field);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    font-family: var(--font-sans);
  }

  .rtg-slider__header {
    display: flex;
    align-items: center;
  }

  .rtg-slider__label {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    color: var(--text-muted);
  }

  .rtg-slider__readout {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }

  .rtg-slider__control {
    --_inset: 6px;
    --_stop: 0px;
    --_x: calc(var(--_inset) + var(--_stop) + var(--slider-value) * (100% - 2 * var(--_inset) - 2 * var(--_stop)));
    position: relative;
    height: 24px;
  }

  .rtg-slider__control:has(.rtg-slider__input:not([step="any"])) { --_stop: 3px; }

  .rtg-slider__track {
    position: absolute;
    top: 9px;
    left: calc(var(--_x) - 3px);
    right: var(--_inset);
    height: 6px;
    border-radius: 3px;
    background: var(--_inactive);
  }

  .rtg-slider__fill {
    position: absolute;
    top: 8px;
    left: var(--_inset);
    width: max(0px, calc(var(--_x) - 3px));
    height: 8px;
    border-radius: 4px;
    background: var(--_active);
  }

  .rtg-slider__thumb {
    position: absolute;
    top: calc(50% - (24px + var(--stroke-hairline)) / 2);
    left: calc(var(--_x) - (8px + var(--stroke-hairline)) / 2);
    width: calc(8px + var(--stroke-hairline));
    height: calc(24px + var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--border-on-accent);
    border-radius: calc((8px + var(--stroke-hairline)) / 2);
    background: var(--accent);
    pointer-events: none;
  }

  .rtg-slider__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .rtg-slider__input::-webkit-slider-runnable-track { height: 24px; background: transparent; }
  .rtg-slider__input::-moz-range-track { height: 24px; background: transparent; }

  .rtg-slider__input::-webkit-slider-thumb {
    width: calc(2 * (var(--_inset) + var(--_stop)));
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
  }

  .rtg-slider__input::-moz-range-thumb {
    width: calc(2 * (var(--_inset) + var(--_stop)));
    height: 24px;
    border: 0;
  }

  .rtg-slider__control:has(.rtg-slider__input:focus-visible) .rtg-slider__thumb,
  .rtg-slider.is-focused .rtg-slider__thumb {
    box-shadow: var(--focus-ring);
  }

  .rtg-slider:is([aria-disabled="true"], :has(.rtg-slider__input:disabled)) {
    --_active: color-mix(in srgb, var(--text-body) 38%, transparent);
    --_inactive: color-mix(in srgb, var(--text-body) 12%, transparent);
    opacity: var(--opacity-disabled);
  }

  .rtg-slider__input:disabled { cursor: default; }

  /* SpeedRule: the 115° hatch used as a rule, in four inks. Carries .rtg-hatch. */
  .rtg-speed-rule {
    --hatch-ink: var(--accent);
    display: block;
    flex: none;
    width: var(--speed-rule-width, 100%);
    height: var(--speed-rule-height, 10px);
  }

  .rtg-speed-rule--light { --hatch-ink: var(--border-subtle); }
  .rtg-speed-rule--data { --hatch-ink: var(--border-data); }

  .rtg-speed-rule--dense {
    --hatch-ink: var(--border-hairline);
    background: repeating-linear-gradient(var(--hatch-angle), var(--hatch-ink) 0 var(--hatch-dense-stripe), transparent var(--hatch-dense-stripe) var(--hatch-dense-period));
  }

  .rtg-speed-rule--no-fade {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Spinner: a short round-capped arc for unknown-duration work in a small space. */
  .rtg-spinner {
    --spinner-size: 20px;
    --spinner-ink: var(--accent-bright);
    --spinner-speed: 1100ms;
    display: inline-block;
    flex: none;
    width: var(--spinner-size);
    height: var(--spinner-size);
    color: var(--spinner-ink);
    vertical-align: middle;
  }

  .rtg-spinner svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: rtg-spinner-turn var(--spinner-speed) linear infinite;
  }

  .rtg-spinner circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 28 72;
    transform: rotate(-90deg);
    transform-origin: 50px 50px;
    animation: rtg-spinner-sweep var(--spinner-speed) ease-in-out infinite;
  }

  .rtg-spinner .rtg-spinner__track {
    stroke: var(--border-hairline);
    stroke-linecap: butt;
    stroke-dasharray: none;
    animation: none;
  }

  .rtg-spinner .rtg-spinner__halo {
    stroke-width: 31.2;
    stroke-opacity: 0.10;
  }

  .rtg-spinner .rtg-spinner__glow {
    stroke-width: 20.4;
    stroke-opacity: 0.18;
  }

  .rtg-spinner--no-glow .rtg-spinner__halo,
  .rtg-spinner--no-glow .rtg-spinner__glow {
    display: none;
  }

  .rtg-spinner--error { --spinner-ink: var(--status-danger); }
  .rtg-spinner--on-accent { --spinner-ink: var(--text-on-accent); }
  .rtg-spinner--inherit { --spinner-ink: currentColor; }

  @media (prefers-reduced-motion: reduce) {
    .rtg-spinner svg { animation-duration: calc(var(--spinner-speed) * 3); }
    .rtg-spinner circle { animation: none; }
  }

  @keyframes rtg-spinner-turn {
    to { transform: rotate(720deg); }
  }

  @keyframes rtg-spinner-sweep {
    0%, 100% { stroke-dasharray: 14 86; }
    50% { stroke-dasharray: 42 58; }
  }

  /* StatTile: a tracked caption over a big skewed mono figure, on its own tile or bare. */
  .rtg-stat-tile {
    --_value: var(--fs-xxl);
    --_label: var(--fs-xxs);
    --_pad: 18px;
    --_ink: var(--text-primary);
    --_delta-ink: var(--text-go);
    --_shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: calc(var(--_pad) - var(--stroke-hairline));
    background: var(--surface);
    border: var(--stroke-hairline) solid var(--border-hairline);
    border-radius: var(--radius-tile);
    box-shadow: var(--_shadow);
  }

  .rtg-stat-tile__label {
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: var(--_label);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    line-height: var(--lh-normal);
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .rtg-stat-tile__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: 100%;
    min-width: 0;
  }

  .rtg-stat-tile__value {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--_value);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    color: var(--_ink);
  }

  .rtg-stat-tile__unit {
    flex: none;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .rtg-stat-tile__delta {
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    color: var(--_delta-ink);
  }

  .rtg-stat-tile--sm { --_value: var(--fs-xl); --_label: var(--fs-xxxs); --_pad: 14px; }
  .rtg-stat-tile--lg { --_value: var(--fs-xxxl); --_pad: 22px; }

  .rtg-stat-tile--tone-accent { --_ink: var(--text-accent); }
  .rtg-stat-tile--tone-data { --_ink: var(--text-data); }
  .rtg-stat-tile--tone-go { --_ink: var(--text-go); }
  .rtg-stat-tile--tone-danger { --_ink: var(--text-danger); }

  .rtg-stat-tile--delta-tone-neutral { --_delta-ink: var(--text-primary); }
  .rtg-stat-tile--delta-tone-accent { --_delta-ink: var(--text-accent); }
  .rtg-stat-tile--delta-tone-data { --_delta-ink: var(--text-data); }
  .rtg-stat-tile--delta-tone-danger { --_delta-ink: var(--text-danger); }

  .rtg-stat-tile--glow { --_shadow: var(--glow-accent-soft), var(--elevation-1); }

  .rtg-stat-tile--rail { padding-left: calc(var(--_pad) + var(--rail-width) - var(--stroke-hairline)); }

  .rtg-stat-tile--no-skew .rtg-stat-tile__value { transform: none; }

  .rtg-stat-tile--no-surface {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .rtg-stat-tile--no-surface.rtg-live-rail::before { content: none; }

  /* StepRail: skewed 4px bars that track the live step of a short flow, and the mono step count for its top bar. */
  .rtg-step-rail {
    display: flex;
    gap: calc(var(--space-2) + var(--space-1));
    margin: 0;
  }

  .rtg-step-rail__bar {
    flex: 1 1 0;
    min-width: 0;
    height: var(--rail-width);
    background: var(--border-strong);
  }

  .rtg-step-rail__bar[aria-current="step"],
  .rtg-step-rail__bar:has(~ [aria-current="step"]) {
    background: var(--accent);
  }

  .rtg-step-rail__bar[aria-current="step"] {
    box-shadow: var(--glow-accent-soft);
  }

  .rtg-step-rail__count {
    display: inline-block;
    flex: none;
    padding: 0 var(--space-3);
    color: var(--text-body);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Switch: a 52 by 32 pill track after the label; orange with a soft glow when on. */
  .rtg-switch__input {
    position: absolute;
    width: 52px;
    height: 32px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .rtg-switch__track {
    --_none: 0 0 0 0 transparent;
    --_glow: var(--_none);
    display: flex;
    align-items: center;
    flex: none;
    width: 52px;
    height: 32px;
    padding: 3px;
    border: var(--stroke-hairline) solid var(--border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--surface-field);
    box-shadow: var(--_glow);
    transition:
      background-color var(--duration-base) var(--ease-standard),
      border-color var(--duration-base) var(--ease-standard),
      box-shadow var(--duration-base) var(--ease-standard);
  }

  .rtg-switch__thumb {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .rtg-switch__input:checked + .rtg-switch__track {
    --_glow: var(--glow-accent-soft);
    border-color: var(--border-on-accent);
    background-color: var(--accent);
  }

  .rtg-switch__input:checked + .rtg-switch__track .rtg-switch__thumb {
    background: var(--text-on-accent);
    transform: translateX(20px);
  }

  .rtg-switch__input:focus-visible + .rtg-switch__track,
  .rtg-switch.is-focused .rtg-switch__track {
    box-shadow: var(--_glow), var(--focus-ring);
  }

  /* TabBar: the bottom navigation, a blurred glass bar with a rounded indicator behind the active destination. */
  .rtg-tab-bar {
    display: block;
    margin: 0;
    padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .rtg-tab-bar__bar {
    display: flex;
    padding: 0 var(--space-3);
    background: var(--surface-glass-bar);
    border: var(--stroke-hairline) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-2);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  .rtg-tab-bar--no-floating {
    padding: 0 0 env(safe-area-inset-bottom, 0px);
  }

  .rtg-tab-bar--no-floating .rtg-tab-bar__bar {
    border-radius: 0;
  }

  .rtg-tab-bar__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 64px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-press) var(--ease-incoming);
  }

  .rtg-tab-bar__indicator {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 60px;
    max-width: 100%;
    height: 32px;
    background-color: transparent;
    border: var(--stroke-hairline) solid transparent;
    border-radius: var(--radius-control);
    transition:
      background-color var(--duration-base) var(--ease-standard),
      border-color var(--duration-base) var(--ease-standard);
  }

  .rtg-tab-bar__indicator .rtg-icon {
    --icon-size: var(--icon-nav);
  }

  .rtg-tab-bar__badge {
    position: absolute;
    top: 4px;
    right: 14px;
    width: 7px;
    height: 7px;
    background: var(--accent-bright);
    border-radius: 50%;
  }

  .rtg-tab-bar__label {
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    font-size: var(--fs-xxxs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .rtg-tab-bar__item:is([aria-selected="true"], .is-selected) {
    color: var(--on-primary-container);
  }

  .rtg-tab-bar__item:is([aria-selected="true"], .is-selected) .rtg-tab-bar__indicator {
    background-color: var(--primary-container);
    border-color: var(--border-accent);
  }

  @media (hover: hover) {
    .rtg-tab-bar__item:hover:not([aria-selected="true"], .is-selected, :active) .rtg-tab-bar__indicator { background-color: var(--state-hover); }
  }

  .rtg-tab-bar__item:is(:active, .is-pressed):not(:disabled, [aria-disabled="true"]) {
    transform: scale(var(--press-scale-tile));
  }

  .rtg-tab-bar__item:is(:active, .is-pressed):not([aria-selected="true"], .is-selected, :disabled, [aria-disabled="true"]) .rtg-tab-bar__indicator {
    background-color: var(--state-press);
  }

  .rtg-tab-bar__item:is(:focus-visible, .is-focused) {
    outline: none;
  }

  .rtg-tab-bar__item:is(:focus-visible, .is-focused) .rtg-tab-bar__indicator {
    box-shadow: var(--focus-ring);
  }

  .rtg-tab-bar__item:is(:disabled, [aria-disabled="true"]) {
    cursor: default;
  }

  /* Tabs: an in-screen view switcher, tracked caps over a divider with a 2px accent indicator under the pick. */
  .rtg-tabs {
    display: flex;
    margin: 0;
    box-shadow: inset 0 calc(-1 * var(--stroke-hairline)) 0 var(--divider);
  }

  .rtg-tabs--scrollable {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rtg-tabs--scrollable::-webkit-scrollbar {
    display: none;
  }

  .rtg-tabs__tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--control-height-lg);
    margin: 0;
    padding: 0 var(--space-4) 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-tabs--scrollable .rtg-tabs__tab {
    flex: none;
  }

  .rtg-tabs__tab::after {
    content: "";
    position: absolute;
    right: var(--space-4);
    bottom: 0;
    left: var(--space-4);
    height: 2px;
    background-color: transparent;
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-base) var(--ease-standard);
  }

  .rtg-tabs__tab .rtg-icon {
    --icon-size: 16px;
    margin-right: 6px;
  }

  .rtg-tabs__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rtg-tabs__count {
    flex: none;
    margin-left: 6px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    font-variant-numeric: tabular-nums;
    text-transform: none;
  }

  .rtg-tabs__tab:is([aria-selected="true"], .is-selected) {
    color: var(--text-accent);
  }

  .rtg-tabs__tab:is([aria-selected="true"], .is-selected)::after {
    background-color: var(--accent-bright);
  }

  @media (hover: hover) {
    .rtg-tabs__tab:hover:not([aria-selected="true"], .is-selected, :disabled, [aria-disabled="true"], :active) { background: var(--state-hover); color: var(--text-body); }
  }

  .rtg-tabs__tab:is(:active, .is-pressed):not([aria-selected="true"], .is-selected, :disabled, [aria-disabled="true"]) {
    background: var(--state-press);
  }

  .rtg-tabs__tab:is(:focus-visible, .is-focused) {
    z-index: 1;
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .rtg-tabs__tab:is(:disabled, [aria-disabled="true"]) {
    cursor: default;
  }

  /* Tag: a 32px filter or input chip with a hairline stroke; selected takes the accent container. */
  .rtg-tag {
    --_fill: var(--surface-glass);
    --_ink: var(--text-body);
    --_stroke: var(--border-hairline);
    --_overlay: transparent;
    --_ring: 0 0 0 0 transparent;
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    max-width: 100%;
    margin: 0;
    padding: 0 calc(12px - var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--_stroke);
    border-radius: var(--radius-sm);
    background-color: var(--_fill);
    background-image: linear-gradient(var(--_overlay), var(--_overlay));
    color: var(--_ink);
    box-shadow: var(--_ring);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
    line-height: var(--lh-snug);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-tag__label {
    min-width: 0;
    overflow: hidden;
  }

  .rtg-tag > .rtg-icon {
    --icon-size: 14px;
    margin-right: var(--gap-inline);
  }

  .rtg-tag--removable {
    padding-right: calc(6px - var(--stroke-hairline));
  }

  .rtg-tag__remove {
    display: inline-flex;
    flex: none;
    margin: 0 0 0 4px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--icon-faint);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .rtg-tag__remove .rtg-icon { --icon-size: 14px; }

  .rtg-tag__remove:is(:active, .is-pressed) { color: var(--text-body); }

  .rtg-tag:is(.rtg-tag--selected, [aria-pressed="true"], [aria-selected="true"], .is-selected) {
    --_fill: var(--primary-container);
    --_ink: var(--on-primary-container);
    --_stroke: var(--border-accent);
  }

  .rtg-tag--interactive {
    cursor: pointer;
    user-select: none;
    transition: transform var(--duration-press) var(--ease-incoming);
  }

  @media (hover: hover) {
    .rtg-tag--interactive:hover:not(:active) { --_overlay: var(--state-hover); }
    .rtg-tag__remove:hover { color: var(--text-body); }
  }

  .rtg-tag--interactive:is(:active, .is-pressed) {
    --_overlay: var(--state-press);
    transform: scale(var(--press-scale-control));
  }

  .rtg-tag:is(:focus-visible, .is-focused) {
    outline: none;
    --_ring: var(--focus-ring);
  }

  /* Toast: a stroked, blurred snackbar with one optional accent text action. */
  .rtg-toast {
    --_stroke: var(--border-subtle);
    --_glyph: var(--text-accent);
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: calc(var(--space-4) - var(--stroke-hairline)) calc(var(--space-5) - var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--_stroke);
    border-radius: var(--radius-md);
    background: var(--surface-glass-bar);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    box-shadow: var(--elevation-3);
    color: var(--text-body);
  }

  .rtg-toast--error {
    --_stroke: var(--border-error);
    --_glyph: var(--text-danger);
  }

  .rtg-toast__icon {
    --icon-size: var(--icon-control);
    margin-right: var(--gap-tight);
    color: var(--_glyph);
  }

  .rtg-toast__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .rtg-toast__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-snug);
    color: var(--text-primary);
  }

  .rtg-toast__message {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-normal);
    color: var(--text-body);
  }

  .rtg-toast__action {
    flex: none;
    margin: 0 0 0 var(--gap-tight);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--text-accent);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  @media (hover: hover) {
    .rtg-toast__action:hover { color: var(--link-hover); }
  }

  .rtg-toast__action:is(:active, .is-pressed) { color: var(--link-press); }

  .rtg-toast__action:is(:focus-visible, .is-focused) {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .rtg-toast .rtg-toast__dismiss { margin-left: var(--space-2); }

  .rtg-toast__host {
    position: fixed;
    z-index: 100;
    right: var(--pad-screen-mobile);
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    left: var(--pad-screen-mobile);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .rtg-toast__host > .rtg-toast {
    max-width: 520px;
    pointer-events: auto;
    animation: rtg-toast-in var(--duration-enter) var(--ease-out) both;
  }

  .rtg-toast__host.is-leaving > .rtg-toast {
    animation: rtg-toast-out var(--duration-fast) var(--ease-incoming) both;
  }

  @keyframes rtg-toast-in {
    from { opacity: 0; transform: translateY(8px); }
  }

  @keyframes rtg-toast-out {
    to { opacity: 0; transform: translateY(8px); }
  }

  /* Tooltip: a stroked-glass label pinned above or below an icon-only control. */
  .rtg-tooltip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }

  .rtg-tooltip__bubble {
    position: absolute;
    bottom: calc(100% + var(--space-3));
    left: 50%;
    width: max-content;
    max-width: 260px;
    padding: calc(var(--space-3) - var(--stroke-hairline)) calc(var(--space-4) - var(--stroke-hairline));
    border: var(--stroke-hairline) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-glass-bar);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    box-shadow: var(--elevation-3);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-snug);
    text-align: left;
    white-space: normal;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-fast) linear, visibility 0s linear var(--duration-fast);
  }

  .rtg-tooltip--prefer-below .rtg-tooltip__bubble {
    top: calc(100% + var(--space-3));
    bottom: auto;
  }

  .rtg-tooltip:is(.is-open, :hover, :focus-within) .rtg-tooltip__bubble {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-fast) linear, visibility 0s;
  }

  /* TopBar: the 64px glass bar at the top of a screen, with a back arrow, a title or the wordmark, and actions. */
  .rtg-top-bar {
    --_edge: transparent;
    --_shadow: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: calc(var(--top-bar-height) + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: env(safe-area-inset-top, 0px) var(--space-3) 0;
    background: var(--surface-glass-bar);
    border-bottom: var(--stroke-hairline) solid var(--_edge);
    box-shadow: var(--_shadow);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  .rtg-top-bar--scrolled {
    --_edge: var(--border-subtle);
    --_shadow: var(--elevation-2);
  }

  .rtg-top-bar--transparent {
    --_edge: transparent;
    --_shadow: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .rtg-top-bar__heading {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin-left: var(--space-3);
  }

  .rtg-top-bar > * + .rtg-top-bar__heading {
    margin-left: var(--space-1);
  }

  .rtg-top-bar__title {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: var(--tracking-tightest);
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-top-bar__subtitle {
    margin: 0;
    overflow: hidden;
    color: var(--text-faint);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-top-bar .rtg-top-bar__wordmark {
    --logo-height: 22px;
    align-self: flex-start;
  }

  /* Track outline, well and panel (lib/ui/components/laps/track_outline.dart), shared by the laps and circuits screens. */
  .rtg-track-outline {
    position: relative;
    display: block;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .rtg-track-outline__drawing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
  }

  .rtg-track-outline__edge {
    stroke: var(--border-subtle);
    stroke-width: var(--stroke-hairline);
  }

  .rtg-track-well {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-low);
  }

  .rtg-track-well__glyph {
    --icon-size: var(--icon-control);
    color: var(--icon-faint);
  }

  .rtg-track-panel {
    position: relative;
    overflow: hidden;
    border: var(--stroke-hairline) solid var(--border-hairline);
    border-radius: var(--radius-media);
    background-color: var(--surface-low);
  }

  .rtg-track-panel__drawing {
    position: absolute;
    inset: var(--space-5) var(--space-7);
  }

  .rtg-track-panel__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    text-align: center;
  }

  .rtg-track-panel__gates {
    position: absolute;
    left: var(--space-4);
    bottom: var(--pad-control-y);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xxs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .rtg-track-panel__tick {
    width: var(--notch-md);
    height: var(--space-1);
    background: var(--text-primary);
  }
}