@font-face { font-family: 'Roobert Mono'; font-weight: 500; src: url('../../fonts/RoobertMono-Medium.ttf') format('truetype'); }
/* Like the Dart Row, items keep their natural width; when the parent is narrower they shrink and clip their label (overflow: clip), never overflow the track.
   CUIToggle (segmented control) - mirrors cui_toggle.dart + cui_tab_item.dart.
   Track: control surface, pill, 4px padding, 4px gap. Selected pill is a raised indicator that slides (200ms easeOut). */
.cui-toggle { -webkit-font-smoothing: auto; position: relative; display: flex; width: fit-content; margin-inline: auto; vertical-align: top; max-width: 100%; box-sizing: border-box; overflow: hidden; /* ClipRRect */
  padding: var(--cui-space-2xs); background: var(--cui-color-surface-bg-control); border-radius: var(--cui-radius-pill); }
.cui-toggle__row { position: relative; display: flex; gap: var(--cui-space-2xs); min-width: 0; max-width: 100%; }
.cui-toggle__indicator { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
  box-sizing: border-box; background: var(--cui-color-surface-bg-raised);
  border-radius: var(--cui-radius-pill); box-shadow: inset 0 0 0 var(--cui-border-hairline) var(--cui-color-border-hairline), 0 0 5px rgba(143, 128, 107, 0.851); }
.cui-toggle.is-measured .cui-toggle__indicator { opacity: 1; }
.cui-toggle.is-animated .cui-toggle__indicator { transition: left calc(200ms / var(--cui-speed, 1)) ease-out, top calc(200ms / var(--cui-speed, 1)) ease-out,
  width calc(200ms / var(--cui-speed, 1)) ease-out, height calc(200ms / var(--cui-speed, 1)) ease-out; }

.cui-toggle__item { position: relative; appearance: none; margin: 0; border: 0; background: transparent; cursor: pointer; outline: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cui-space-xs); box-sizing: border-box;
  flex: 0 1 auto; min-width: min(var(--cui-size-tab-min-width), 100%); padding: var(--cui-space-xs); white-space: nowrap; overflow: hidden; border-radius: var(--cui-radius-pill);
  font-family: var(--cui-type-code-md-family); font-size: var(--cui-type-code-md-size); font-weight: var(--cui-type-code-md-weight);
  letter-spacing: 0; line-height: round(nearest, var(--cui-type-code-md-line), 1px); color: var(--cui-color-text-subtle); -webkit-tap-highlight-color: transparent; }
.cui-toggle__item[aria-checked="true"] { color: var(--cui-color-text-default); }
.cui-toggle__item[disabled], .cui-toggle__item.is-disabled { cursor: default; }
.cui-toggle__leading { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; }
.cui-toggle__leading--icon { width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); font-size: var(--cui-size-icon-sm); }
.cui-toggle__leading--illustration { width: var(--cui-img-xs); height: var(--cui-img-xs); font-size: 18px; }
.cui-toggle__item:focus-visible, .cui-toggle__item.is-focused { box-shadow: 0 0 0 2px var(--cui-color-border-focus); }