/*! Strand UI v0.64.1 | MIT License | dillingerstaffing.com */

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-actiondock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  background: var(--strand-surface-elevated);
  border-block-start: 1px solid var(--strand-border-subtle);
  box-shadow: var(--strand-elevation-3, 0 -8px 28px rgba(15, 23, 42, 0.12));
  padding: var(--strand-space-4);
  padding-block-end: calc( var(--strand-space-4) + env(safe-area-inset-bottom, 0px) );
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform var(--strand-duration-normal, 200ms) var(--strand-ease-out-quart, ease-out),
    visibility var(--strand-duration-normal, 200ms);
}

.strand-actiondock[data-strand-actiondock="visible"] {
  transform: translateY(0);
  visibility: visible;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-alert {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--strand-space-6);
  border-radius: var(--strand-radius-md);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  background: var(--strand-alert-bg, var(--strand-surface-recessed));
  color: var(--strand-alert-color, inherit);
}

.strand-alert--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--strand-space-3);
}

.strand-alert__status {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  margin-right: var(--strand-space-3);
  flex-shrink: 0;
}

.strand-alert--info .strand-alert__status {
  color: var(--strand-alert-info-status-color, var(--strand-blue-deep));
}

.strand-alert--success .strand-alert__status {
  color: var(--strand-alert-success-status-color, var(--strand-on-teal-tint));
}

.strand-alert--warning .strand-alert__status {
  color: var(--strand-alert-warning-status-color, var(--strand-on-amber-tint));
}

.strand-alert--error .strand-alert__status {
  color: var(--strand-alert-error-status-color, var(--strand-red-alert-deep));
}

.strand-alert__content {
  flex: 1;
  min-width: 0;
}

.strand-alert__title {
  font-weight: var(--strand-weight-semibold);
  margin-bottom: var(--strand-space-1);
}

.strand-alert__action {
  flex-shrink: 0;
  margin-left: var(--strand-space-3);
}

.strand-alert__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-space-6);
  height: var(--strand-space-6);
  margin-left: var(--strand-space-4);
  padding: 0;
  border: none;
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-alert-dismiss-color, var(--strand-gray-500));
  font-size: var(--strand-text-base);
  cursor: pointer;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-alert__dismiss:hover {
  background: var(--strand-alert-dismiss-hover-bg, var(--strand-gray-100));
  color: var(--strand-alert-dismiss-hover-color, var(--strand-gray-600));
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-app-shell {
  inline-size: 100%;
  max-inline-size: var(--strand-frame-max);
  margin-inline: auto;
  background: var(--strand-surface-primary);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-xl);
  overflow: clip;
  box-shadow: var(--strand-elevation-3);
}

@media (max-width: 767.98px) {
  .strand-app-shell {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-auth-indicator {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-500);
  letter-spacing: var(--strand-tracking-wide);
  white-space: nowrap;
}

.strand-auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-blue-glow);
  color: var(--strand-blue-deep);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strand-radius-full);
  background: var(--strand-avatar-bg, var(--strand-surface-recessed));
  overflow: hidden;
  flex-shrink: 0;
  font-family: var(--strand-font-sans);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-avatar-fg, var(--strand-gray-600));
  user-select: none;
}

.strand-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--strand-radius-full);
}

.strand-avatar__initials {
  text-transform: uppercase;
  line-height: 1;
}

.strand-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--strand-text-xs);
}

.strand-avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--strand-text-sm);
}

.strand-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--strand-text-base);
}

.strand-avatar--xl {
  width: var(--strand-space-16);
  height: var(--strand-space-16);
  font-size: var(--strand-text-lg);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-badge {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.strand-badge--inline {
  display: inline-flex;
}

.strand-badge__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--strand-font-sans);
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-on-blue-primary);
}

.strand-badge:not(.strand-badge--inline) > .strand-badge__indicator {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 1;
}

.strand-badge--dot {
  width: 8px;
  height: 8px;
  border-radius: var(--strand-radius-full);
  font-size: 0;
  padding: 0;
}

.strand-badge--count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--strand-space-1);
  border-radius: var(--strand-radius-full);
  font-size: var(--strand-text-xs);
  line-height: 20px;
}

.strand-badge--default {
  background: var(--strand-gray-500);
}

.strand-badge--teal {
  background: var(--strand-teal-deep);
}

.strand-badge--blue {
  background: var(--strand-blue-deep);
}

.strand-badge--amber {
  background: var(--strand-amber-caution);
  color: var(--strand-blue-midnight);
}

.strand-badge--red {
  background: var(--strand-red-alert-deep);
}

.strand-badge--live {
  animation: strand-pulse-glow 3s var(--strand-ease-in-out-sine) infinite;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  padding: var(--strand-space-3) var(--strand-space-4);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  line-height: var(--strand-leading-normal);
  text-align: center;
  border-bottom: 1px solid transparent;
}

.strand-banner ~ .strand-nav--glass {
  top: var(--strand-banner-height, 0px);
}

.strand-banner ~ .strand-nav:not(.strand-nav--glass) {
  margin-top: var(--strand-banner-height, 0px);
}

body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
  height: calc(100vh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
  height: calc(100dvh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
}

body.strand-banner-active .strand-instrument-viewport--full-bleed {
  height: calc(100vh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
  height: calc(100dvh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
}

.strand-banner--info {
  background: var(--strand-blue-glow);
  color: var(--strand-blue-deep);
  border-bottom-color: var(--strand-blue-indicator);
}

.strand-banner--warning {
  background: var(--strand-amber-tint);
  color: var(--strand-on-amber-tint);
  border-bottom-color: var(--strand-amber-caution);
}

.strand-banner--critical {
  background: var(--strand-red-tint);
  color: var(--strand-on-red-tint);
  border-bottom-color: var(--strand-red-alert);
}

.strand-banner__text {
  margin: 0 auto;
  max-width: 65ch;
  font-weight: var(--strand-weight-medium);
}

.strand-banner__dismiss {
  position: absolute;
  right: var(--strand-space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: var(--strand-space-2);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strand-radius-md);
  transition: opacity var(--strand-duration-fast) ease;
}

.strand-banner__dismiss:hover {
  opacity: 1;
}

.strand-banner__dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-bar-chart {
  display: flex;
  gap: var(--strand-space-2);
  align-items: flex-end;
  height: var(--strand-space-40);
  padding: var(--strand-space-4);
}

.strand-bar-chart__col {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: end;
  justify-items: center;
  gap: var(--strand-space-1);
  height: 100%;
}

.strand-bar-chart__bar {
  width: 100%;
  background: var(--strand-blue-indicator);
  border-radius: var(--strand-radius-sm) var(--strand-radius-sm) 0 0;
  min-height: var(--strand-space-1);
}

.strand-bar-chart__amount {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-bar-chart-amount-color, var(--strand-gray-500));
  font-variant-numeric: tabular-nums;
}

.strand-bar-chart__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-bar-chart-label-color, var(--strand-gray-500));
}

.strand-bar-chart--sm {
  height: var(--strand-space-24);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-big-mono-time {
  display: block;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-2xl);
  font-weight: var(--strand-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--strand-tracking-tight);
  line-height: var(--strand-leading-none);
  color: var(--strand-big-mono-time-color, var(--strand-blue-midnight));
}

.strand-big-mono-time--lg {
  font-size: var(--strand-text-3xl);
}

.strand-big-mono-time--sm {
  font-size: var(--strand-text-xl);
}

.strand-big-mono-time__sep {
  color: var(--strand-big-mono-time-sep-color, var(--strand-gray-500));
  padding-inline: var(--strand-space-1);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
}

.strand-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
}

.strand-breadcrumb__separator {
  color: var(--strand-gray-500);
  user-select: none;
}

.strand-breadcrumb__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--strand-gray-500);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-breadcrumb__link:hover {
  color: var(--strand-gray-600);
}

.strand-breadcrumb__current {
  color: var(--strand-gray-600);
  font-weight: var(--strand-weight-medium);
}

.strand-breadcrumb--instrument .strand-breadcrumb__list {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-ultra);
  text-transform: uppercase;
}

.strand-breadcrumb--instrument .strand-breadcrumb__link {
  color: var(--strand-blue-deep);
}

.strand-breadcrumb--instrument .strand-breadcrumb__current {
  color: var(--strand-gray-700);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--strand-space-2);
  border: 1px solid transparent;
  border-radius: var(--strand-radius-md);
  font-family: var(--strand-font-sans);
  font-weight: var(--strand-weight-medium);
  line-height: var(--strand-leading-snug);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart),
    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-btn:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: 75ms;
}

.strand-btn:disabled {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-btn--sm {
  padding: var(--strand-space-2) var(--strand-space-5);
  font-size: var(--strand-text-sm);
  min-height: var(--strand-btn-min-block-size, var(--strand-touch-target));
}

.strand-btn--md {
  padding: var(--strand-space-3) var(--strand-space-8);
  font-size: var(--strand-text-sm);
  min-height: var(--strand-btn-min-block-size, var(--strand-touch-target));
}

.strand-btn--lg {
  padding: var(--strand-space-3) var(--strand-space-10);
  font-size: var(--strand-text-base);
  min-height: var(--strand-btn-min-block-size, var(--strand-touch-target));
}

.strand-btn--compact:not(.strand-btn--icon-only) {
  padding-inline: var(--strand-space-3);
}

.strand-btn--icon-only.strand-btn--sm {
  padding: var(--strand-space-1);
  min-width: var(--strand-touch-target);
}

.strand-btn--icon-only.strand-btn--md {
  padding: var(--strand-space-2);
  min-width: var(--strand-touch-target);
}

.strand-btn--icon-only.strand-btn--lg {
  padding: var(--strand-space-3);
  min-width: 48px;
}

.strand-btn--circular {
  border-radius: var(--strand-radius-full);
  aspect-ratio: 1;
}

.strand-btn--full-width {
  width: 100%;
}

.strand-btn--primary {
  background: var(--strand-blue-deep);
  color: var(--strand-on-blue-deep);
}

.strand-btn--primary:hover:not(:disabled) {
  background: var(--strand-blue-midnight);
  transform: translateY(-1px);
  box-shadow: var(--strand-hover-shadow-primary);
}

.strand-btn--primary:active:not(:disabled) {
  background: var(--strand-blue-abyss);
}

.strand-btn--secondary {
  background: var(--strand-surface-elevated);
  color: var(--strand-blue-midnight);
  border-color: var(--strand-gray-200);
}

.strand-btn--secondary:hover:not(:disabled) {
  background: var(--strand-blue-glow);
  border-color: var(--strand-blue-indicator);
  transform: translateY(-1px);
  box-shadow: var(--strand-elevation-1);
}

.strand-btn--secondary:active:not(:disabled) {
  background: var(--strand-blue-wash);
}

.strand-btn--ghost {
  background: transparent;
  color: var(--strand-btn-ghost-color, var(--strand-blue-midnight));
  border-color: var(--strand-btn-ghost-border-color, transparent);
}

.strand-btn--ghost:hover:not(:disabled) {
  background: var(--strand-blue-glow);
  transform: translateY(-1px);
}

.strand-btn--ghost:active:not(:disabled) {
  background: var(--strand-blue-wash);
}

.strand-btn--danger {
  background: var(--strand-red-alert-vivid);
  color: var(--strand-on-red-alert-vivid);
}

.strand-btn--danger:hover:not(:disabled) {
  background: var(--strand-red-alert-deep);
  transform: translateY(-1px);
  box-shadow: var(--strand-hover-shadow-danger);
}

.strand-btn--danger:active:not(:disabled) {
  background: var(--strand-red-alert-abyss);
}

.strand-btn--loading {
  pointer-events: none;
}

.strand-btn--loading .strand-btn__content {
  visibility: hidden;
}

.strand-btn__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--strand-radius-full);
  animation: strand-btn-spin 0.8s linear infinite;
  opacity: 0.8;
}

.strand-btn--lg .strand-btn__spinner {
  width: 20px;
  height: 20px;
}

@keyframes strand-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.strand-btn__content {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .strand-btn:hover:not(:disabled) {
    transform: none;
  }

  .strand-btn__spinner {
    animation: none;
    border-style: dotted;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--strand-gray-200);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
}

.strand-calendar-grid__header,
.strand-calendar-grid__week {
  display: contents;
}

.strand-calendar-grid__axis {
  padding-block: var(--strand-space-2);
  padding-inline: var(--strand-space-2);
  background: var(--strand-surface-recessed);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-gray-500);
  text-align: center;
}

.strand-calendar-grid__day {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-1);
  min-block-size: var(--strand-calendar-grid-day-size, var(--strand-space-20));
  padding: var(--strand-space-2);
  background: var(--strand-surface-elevated);
  text-align: start;
}

.strand-calendar-grid__day--adjacent {
  background: var(--strand-gray-50);
}

.strand-calendar-grid__day--adjacent .strand-calendar-grid__date {
  color: var(--strand-gray-500);
}

.strand-calendar-grid__day--selected {
  background: var(--strand-blue-glow);
}

.strand-calendar-grid__day:focus-visible {
  outline: 2px solid var(--strand-blue-primary);
  outline-offset: -2px;
}

.strand-calendar-grid__date {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--strand-gray-600);
}

.strand-calendar-grid__day--today .strand-calendar-grid__date {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  min-block-size: 20px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-blue-deep);
  color: var(--strand-surface-elevated);
}

.strand-calendar-grid__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-block-size: 0;
  overflow: hidden;
}

.strand-calendar-grid__remainder {
  margin-block-start: auto;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-500);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-card {
  border-radius: var(--strand-radius-lg);
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-border-subtle, rgba(148, 163, 184, 0.12));
  box-shadow: var(--strand-elevation-1);
  padding: var(--strand-space-6);
  font-family: var(--strand-font-sans);
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.strand-card--outlined {
  box-shadow: none;
  border: 1px solid var(--strand-gray-200);
}

.strand-card--flat {
  box-shadow: none;
  border: none;
}

.strand-card--warm {
  box-shadow: var(--strand-elevation-1-warm);
}

.strand-card--warm.strand-card--interactive:hover {
  box-shadow: var(--strand-elevation-2-warm);
}

.strand-card--interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  transition:
    transform var(--strand-duration-normal) var(--strand-ease-out-expo),
    box-shadow var(--strand-duration-normal) ease;
}

.strand-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--strand-elevation-2);
}

.strand-card--active {

}

.strand-card--pad-none {
  padding: 0;
}

.strand-card--pad-sm {
  padding: var(--strand-space-4);
}

.strand-card--pad-md {
  padding: var(--strand-space-6);
}

.strand-card--pad-lg {
  padding: var(--strand-space-8);
}

.strand-card--pad-xl {
  padding: var(--strand-space-10);
}

.strand-card__section {
  display: block;
  padding: var(--strand-space-5) var(--strand-space-6);
  border-top: 1px solid var(--strand-gray-200);
}

.strand-card__section:first-child {
  border-top: 0;
}

.strand-card__section--header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--strand-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .strand-card--interactive:hover {
    transform: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-card-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--strand-space-3);
  padding-bottom: var(--strand-space-2);
  border-bottom: 1px solid var(--strand-gray-200);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-channel-grid {
  align-items: stretch;
}

.strand-channel-grid > .strand-card {
  display: flex;
  flex-direction: column;
}

.strand-channel-grid > .strand-card > .strand-stack--vertical {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.strand-channel-grid > .strand-card > .strand-stack--vertical > .strand-stack--horizontal:last-child {
  margin-top: auto;
}

.strand-channel-title {
  margin: 0;
  line-height: var(--strand-leading-snug);
}

.strand-channel-description {
  margin: 0;
}

.strand-channel-next {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--strand-space-2);
  margin-top: var(--strand-space-1);
  padding-top: var(--strand-space-2);
  border-top: 1px dashed var(--strand-gray-200);
  font-size: var(--strand-text-xs);
  line-height: var(--strand-leading-snug);
}

.strand-channel-next__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-gray-500);
}

.strand-channel-next__title {
  color: var(--strand-gray-900);
  font-weight: var(--strand-weight-medium);
}

.strand-channel-next__when {
  color: var(--strand-gray-600);
  font-variant-numeric: tabular-nums;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  min-height: var(--strand-touch-target);
  cursor: pointer;
  user-select: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

.strand-checkbox__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-control-size);
  height: var(--strand-control-size);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-sm);
  background: var(--strand-surface-elevated);
  color: var(--strand-on-blue-primary);
  flex-shrink: 0;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-checkbox__icon {
  display: none;
  width: 14px;
  height: 14px;
}

.strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

.strand-checkbox__native:checked ~ .strand-checkbox__control,
.strand-checkbox__native:indeterminate ~ .strand-checkbox__control {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-checkbox__native:checked:not(:indeterminate) ~ .strand-checkbox__control .strand-checkbox__icon--check,
.strand-checkbox__native:indeterminate ~ .strand-checkbox__control .strand-checkbox__icon--mixed {
  display: block;
}

.strand-checkbox:hover .strand-checkbox__native:enabled ~ .strand-checkbox__control {
  border-color: var(--strand-blue-indicator);
}

.strand-checkbox:hover .strand-checkbox__native:enabled:checked ~ .strand-checkbox__control,
.strand-checkbox:hover .strand-checkbox__native:enabled:indeterminate ~ .strand-checkbox__control {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

.strand-checkbox__label {
  color: var(--strand-checkbox-label-color, var(--strand-gray-900));
}

.strand-checkbox:has(.strand-checkbox__native:disabled) {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

@media (pointer: fine) {
  .strand-checkbox--compact {
    min-height: 30px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-chip--joined {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  flex-shrink: 0;
  padding: 2px var(--strand-space-2);
  background: var(--strand-blue-glow);
  color: var(--strand-blue-deep);
  border: 1px solid var(--strand-blue-indicator);
  border-radius: var(--strand-radius-full);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  line-height: 1;
  letter-spacing: var(--strand-tracking-tight);
  cursor: pointer;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-chip--joined:hover:not(:disabled) {
  background: var(--strand-blue-tint);
  border-color: var(--strand-blue-deep);
}

.strand-chip--joined:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.strand-chip--joined__check {
  font-size: 0.875em;
  line-height: 1;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strand-space-2);
}

.strand-chip-set--scroll {
  flex-wrap: nowrap;
}

.strand-chip-set__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  padding-block: var(--strand-space-1);
  padding-inline: var(--strand-space-3);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-600);
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-300);
  border-radius: var(--strand-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--strand-duration-fast) ease,
    border-color var(--strand-duration-fast) ease,
    color var(--strand-duration-fast) ease;
}

@media (pointer: coarse) {
  .strand-chip-set__chip {
    min-block-size: 44px;
  }
}

.strand-chip-set__chip:hover {
  border-color: var(--strand-gray-400);
  color: var(--strand-gray-800);
}

.strand-chip-set__chip[aria-pressed="true"],
.strand-chip-set__chip[aria-checked="true"] {
  background: var(--strand-blue-midnight);
  border-color: var(--strand-blue-midnight);
  color: var(--strand-on-blue-primary);
}

.strand-chip-set__chip[aria-pressed="true"]:hover,
.strand-chip-set__chip[aria-checked="true"]:hover {
  background: var(--strand-blue-abyss);
  border-color: var(--strand-blue-abyss);
  color: var(--strand-on-blue-primary);
}

.strand-chip-set--sm .strand-chip-set__chip {
  padding-block: var(--strand-space-1);
  padding-inline: var(--strand-space-2);
  font-size: var(--strand-text-xs);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strand-radius-full);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-instrument-text-primary);
  border: 2px solid rgba(59, 142, 246, 0.6);
  box-shadow: 0 0 20px rgba(59, 142, 246, 0.4), 0 0 40px rgba(59, 142, 246, 0.15);
  cursor: pointer;
  transition:
    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
    box-shadow var(--strand-duration-fast) ease;
}

.strand-cluster-marker:hover {
  transform: scale(1.15);
  box-shadow: 0 0 28px rgba(59, 142, 246, 0.6), 0 0 56px rgba(59, 142, 246, 0.25);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-code-block {
  position: relative;
}

.strand-code-block__label {
  display: block;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-gray-600);
  margin-bottom: var(--strand-space-2);
}

.strand-code-block__pre,
.strand-code-block__pre code {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  line-height: var(--strand-leading-relaxed);
  color: var(--strand-blue-abyss);
  background-color: var(--strand-surface-recessed);
}

.strand-code-block__pre {
  border-radius: var(--strand-radius-lg);
  padding: var(--strand-space-3) var(--strand-space-4);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  margin: 0;
  border: 1px solid var(--strand-gray-200);
  min-height: var(--strand-touch-target);
}

.strand-code-block[data-strand-copy] > .strand-code-block__pre {
  padding-right: var(--strand-space-10);
}

.strand-code-block__copy {
  position: absolute;
  top: calc(var(--strand-space-2) - 2px);
  right: calc(var(--strand-space-2) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-space-8);
  height: var(--strand-space-8);
  padding: 0;
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  background-color: var(--strand-surface-elevated);
  color: var(--strand-gray-500);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity var(--strand-duration-fast) var(--strand-ease-out-expo),
    color var(--strand-duration-fast) ease,
    border-color var(--strand-duration-fast) ease,
    background-color var(--strand-duration-fast) ease,
    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-code-block__copy::before {
  content: "";
  position: absolute;
  inset: calc((var(--strand-touch-target) - var(--strand-space-8)) / -2);
}

.strand-code-block:hover .strand-code-block__copy,
.strand-code-block__copy:hover,
.strand-code-block__copy:focus-visible {
  opacity: 1;
  color: var(--strand-blue-deep);
  border-color: var(--strand-blue-primary);
}

.strand-code-block__copy:hover {
  transform: translateY(-1px);
}

.strand-code-block__copy:active {
  transform: translateY(0);
  transition-duration: 75ms;
}

.strand-code-block__copy--copied,
.strand-code-block__copy--copied:hover {
  opacity: 1;
  color: var(--strand-green-positive-deep);
  border-color: var(--strand-green-positive);
  transform: translateY(0);
}

.strand-code-block__copy-icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.strand-code-block__copy-icon--check {
  display: none;
}

.strand-code-block__copy--copied .strand-code-block__copy-icon--clipboard {
  display: none;
}

.strand-code-block__copy--copied .strand-code-block__copy-icon--check {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .strand-code-block__copy:hover,
  .strand-code-block__copy:active,
  .strand-code-block__copy--copied {
    transform: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-command-palette {
  align-self: flex-start;
  margin-top: 12vh;
  max-width: 30rem;
  padding: 0;
  overflow: hidden;
}

.strand-command-palette .strand-dialog__body {
  padding: 0;
}

.strand-command-palette .strand-dialog__close {
  display: none;
}

.strand-command-palette__search {
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
  padding: var(--strand-space-2) var(--strand-space-3);
  border-bottom: 1px solid var(--strand-gray-200);
}

.strand-command-palette__icon {
  flex: none;
  color: var(--strand-gray-500);
}

.strand-command-palette__input {
  flex: 1;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  outline: none;
}

.strand-command-palette__input::placeholder {
  color: var(--strand-gray-500);
}

.strand-command-palette__list {
  max-height: min(24rem, 50vh);
  overflow-y: auto;
  padding: var(--strand-space-2);
}

.strand-command-palette__option {
  display: flex;
  align-items: baseline;
  gap: var(--strand-space-3);
  padding: var(--strand-space-2) var(--strand-space-3);
  border-radius: var(--strand-radius-md);
  cursor: pointer;
  transition: background-color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

@media (pointer: coarse) {
  .strand-command-palette__option {
    padding-block: var(--strand-space-3);
  }
}

.strand-command-palette__option--active {
  background: var(--strand-blue-wash);
}

.strand-command-palette__label {
  flex: none;
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

.strand-command-palette__sublabel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-600);
}

.strand-command-palette__badge {
  flex: none;
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.strand-command-palette__empty {
  margin: 0;
  padding: var(--strand-space-4) var(--strand-space-3);
  text-align: center;
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-500);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-container {
  width: 100%;
  max-width: var(--strand-content-full);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.strand-container--narrow {
  max-width: var(--strand-content-narrow);
}

.strand-container--default {
  max-width: var(--strand-content-default);
}

.strand-container--wide {
  max-width: var(--strand-content-wide);
}

.strand-container--full {
  max-width: var(--strand-content-full);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-container-scale {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-4);
}

.strand-container-scale__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strand-container-scale__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
}

.strand-container-scale__label code {
  font-family: var(--strand-font-mono);
  font-size: 11px;
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-medium);
  background: transparent;
  padding: 0;
}

.strand-container-scale__caption {
  color: var(--strand-gray-500);
}

.strand-container-scale__track {
  height: 22px;
  background: var(--strand-surface-recessed);
  border-radius: var(--strand-radius-sm);
  position: relative;
  border: 1px solid var(--strand-gray-200);
}

.strand-container-scale__bar {
  height: 100%;
  background: linear-gradient( 90deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.22) );
  border-right: 2px solid var(--strand-blue-primary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--strand-space-2);
  transition: width 300ms var(--strand-ease-out-expo);
}

.strand-container-scale__px {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  font-weight: var(--strand-weight-medium);
  color: var(--strand-blue-deep);
}

.strand-container-scale__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--strand-space-1);
  font-family: var(--strand-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--strand-gray-500);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-coord-readout {
  position: absolute;
  bottom: var(--strand-space-4);
  left: var(--strand-space-4);
  z-index: 10;
  font-family: var(--strand-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--strand-tracking-widest);
  color: rgba(148, 163, 184, 0.65);
  display: flex;
  align-items: center;
  gap: var(--strand-space-4);
  background: var(--strand-instrument-bg-overlay);
  border: 1px solid var(--strand-instrument-border);
  border-radius: var(--strand-radius-sm);
  padding: var(--strand-space-2) var(--strand-space-3);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.strand-coord-readout::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--strand-instrument-glow-strong);
  border-radius: var(--strand-radius-sm);
  animation: strand-coord-blink 1.2s steps(2) infinite;
}

@keyframes strand-coord-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.strand-coord-readout__lat,
.strand-coord-readout__lng {
  display: inline-block;
}

@media (max-width: 640px) {
  .strand-coord-readout {
    display: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-data-readout {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-1);
}

.strand-data-readout__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-data-readout-label-size, var(--strand-text-xs));
  font-weight: var(--strand-data-readout-label-weight, var(--strand-weight-medium));
  letter-spacing: var(--strand-tracking-ultra);
  text-transform: uppercase;
  color: var(--strand-data-readout-label-color, var(--strand-gray-500));
  line-height: var(--strand-leading-normal);
}

.strand-data-readout__value {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-data-readout-value-size, var(--strand-text-3xl));
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-tighter);
  color: var(--strand-data-readout-value-color, var(--strand-blue-midnight));
  line-height: var(--strand-leading-tight);
  font-variant-numeric: tabular-nums;
}

.strand-data-readout--sm {
  --strand-data-readout-value-size: var(--strand-text-xl);
}

.strand-data-readout--lg {
  --strand-data-readout-value-size: var(--strand-text-4xl);
}

.strand-data-readout--xl {
  --strand-data-readout-value-size: clamp(4.5rem, 10vw, 7rem);
}

.strand-idle-readout .strand-data-readout__value::before {
  content: "--";
  color: var(--strand-gray-300);
  font-variant-numeric: tabular-nums;
}

.strand-idle-readout .strand-data-readout__value > * {
  display: none;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100%;
  height: 100%;
  z-index: 20;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.97) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-left: 1px solid rgba(59, 142, 246, 0.1);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.25), inset 1px 0 0 rgba(255, 255, 255, 0.4);
  padding: 120px var(--strand-space-6) var(--strand-space-8);
  transform: translateX(100%);
  transition: transform var(--strand-duration-slow) var(--strand-ease-out-expo);
  overflow-y: auto;
}

.strand-detail-panel[hidden] {
  display: none;
}

.strand-detail-panel.is-open,
.strand-detail-panel.open {
  transform: translateX(0);
}

.strand-detail-panel.is-open > .strand-overline,
.strand-detail-panel.open > .strand-overline {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.1s both;
}

.strand-detail-panel.is-open .strand-detail-panel__title,
.strand-detail-panel.open .strand-detail-panel__title {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.18s both;
}

.strand-detail-panel.is-open .strand-detail-panel__meta,
.strand-detail-panel.open .strand-detail-panel__meta {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.26s both;
}

.strand-detail-panel.is-open .strand-detail-panel__salary,
.strand-detail-panel.open .strand-detail-panel__salary {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.34s both;
}

.strand-detail-panel.is-open .strand-detail-panel__cta,
.strand-detail-panel.open .strand-detail-panel__cta {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.42s both;
}

.strand-detail-panel.is-open .strand-detail-panel__source,
.strand-detail-panel.open .strand-detail-panel__source {
  animation: strand-detail-fade var(--strand-duration-slow) var(--strand-ease-out-expo) 0.48s both;
}

@keyframes strand-detail-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.strand-detail-panel__close {
  position: absolute;
  top: 80px;
  right: var(--strand-space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  font-size: var(--strand-text-lg);
  color: var(--strand-gray-500);
  cursor: pointer;
  transition:
    color var(--strand-duration-fast) ease,
    border-color var(--strand-duration-fast) ease,
    background var(--strand-duration-fast) ease;
}

.strand-detail-panel__close:hover {
  color: var(--strand-blue-primary);
  border-color: rgba(59, 142, 246, 0.3);
  background: rgba(59, 142, 246, 0.05);
}

.strand-detail-panel__close-text {
  display: none;
}

.strand-detail-panel__close-icon {
  display: inline;
}

.strand-detail-panel__title {
  font-size: 1.375rem;
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-tight);
  color: var(--strand-gray-900);
  margin: 0 0 var(--strand-space-4);
  line-height: 1.3;
}

.strand-detail-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-1);
  padding-bottom: var(--strand-space-4);
  border-bottom: 1px solid rgba(59, 142, 246, 0.08);
  margin-bottom: var(--strand-space-5);
}

.strand-detail-panel__company,
.strand-detail-panel__location {
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-700);
  line-height: 1.4;
}

.strand-detail-panel__salary {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-lg);
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-tight);
  color: var(--strand-blue-midnight);
  margin-bottom: var(--strand-space-6);
}

.strand-detail-panel__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: var(--strand-space-3);
  transition:
    box-shadow var(--strand-duration-fast) ease,
    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-detail-panel__cta:hover {
  box-shadow: 0 8px 24px rgba(29, 90, 216, 0.25);
}

.strand-detail-panel__cta:active {
  transform: translateY(0) scale(0.98);
}

.strand-detail-panel__source {
  display: block;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wide);
  color: var(--strand-gray-500);
  text-align: center;
}

@media (max-width: 640px) {
  .strand-detail-panel {
    width: 100%;
    height: auto;
    max-height: 70vh;
    top: auto;
    bottom: 0;
    border-radius: var(--strand-radius-xl) var(--strand-radius-xl) 0 0;
    padding: 0 var(--strand-space-4) var(--strand-space-6);
    transform: translateY(100%);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.2);
  }

  .strand-detail-panel.is-open,
  .strand-detail-panel.open {
    transform: translateY(0);
  }

  .strand-detail-panel__close {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--strand-gray-200);
    background: transparent;
    font-family: var(--strand-font-mono);
    font-size: var(--strand-text-sm);
    font-weight: var(--strand-weight-medium);
    letter-spacing: var(--strand-tracking-wider);
    color: var(--strand-blue-primary);
    margin-bottom: var(--strand-space-4);
  }

  .strand-detail-panel__close:hover {
    background: var(--strand-blue-glow);
  }

  .strand-detail-panel__close-icon {
    display: none;
  }

  .strand-detail-panel__close-text {
    display: inline;
  }

  .strand-detail-panel > .strand-overline {
    margin-bottom: var(--strand-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-detail-panel.is-open > .strand-overline,
  .strand-detail-panel.open > .strand-overline,
  .strand-detail-panel.is-open .strand-detail-panel__title,
  .strand-detail-panel.open .strand-detail-panel__title,
  .strand-detail-panel.is-open .strand-detail-panel__meta,
  .strand-detail-panel.open .strand-detail-panel__meta,
  .strand-detail-panel.is-open .strand-detail-panel__salary,
  .strand-detail-panel.open .strand-detail-panel__salary,
  .strand-detail-panel.is-open .strand-detail-panel__cta,
  .strand-detail-panel.open .strand-detail-panel__cta,
  .strand-detail-panel.is-open .strand-detail-panel__source,
  .strand-detail-panel.open .strand-detail-panel__source {
    animation: none;
  }
}

.strand-detail-panel {
  --strand-alert-bg: initial;
  --strand-alert-color: var(--strand-gray-700);
  --strand-alert-dismiss-color: initial;
  --strand-alert-dismiss-hover-bg: initial;
  --strand-alert-dismiss-hover-color: var(--strand-gray-500);
  --strand-alert-error-status-color: initial;
  --strand-alert-info-status-color: initial;
  --strand-alert-success-status-color: initial;
  --strand-alert-warning-status-color: initial;
  --strand-bar-chart-amount-color: initial;
  --strand-bar-chart-label-color: initial;
  --strand-big-mono-time-color: initial;
  --strand-big-mono-time-sep-color: initial;
  --strand-btn-ghost-border-color: initial;
  --strand-btn-ghost-color: initial;
  --strand-checkbox-label-color: initial;
  --strand-data-readout-label-color: initial;
  --strand-data-readout-value-color: initial;
  --strand-form-field-hint-color: initial;
  --strand-form-field-label-color: initial;
  --strand-heading-sm-color: initial;
  --strand-headline-color: initial;
  --strand-kv-label-color: initial;
  --strand-kv-value-color: initial;
  --strand-kv-value-status-color: var(--strand-gray-700);
  --strand-lead-color: initial;
  --strand-link-color: initial;
  --strand-link-mono-color: var(--strand-blue-deep);
  --strand-link-mono-hover-color: initial;
  --strand-link-underline: initial;
  --strand-log-text-color: initial;
  --strand-log-text-strong-color: initial;
  --strand-log-time-color: initial;
  --strand-overline-accent-color: initial;
  --strand-overline-color: initial;
  --strand-progress-track-color: initial;
  --strand-radio-label-color: initial;
  --strand-stat-strip-border-color: initial;
  --strand-stat-strip-label-color: initial;
  --strand-stat-strip-value-color: initial;
  --strand-status-chip-committed-color: initial;
  --strand-status-chip-neutral-bg: initial;
  --strand-status-chip-neutral-border: initial;
  --strand-status-chip-neutral-color: initial;
  --strand-switch-label-color: initial;
  --strand-text-secondary-color: initial;
  --strand-text-secondary-xs-color: var(--strand-gray-500);
  --strand-title-color: initial;
  --strand-value-negative-color: initial;
  --strand-value-positive-color: initial;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--strand-backdrop);
}

.strand-dialog__panel {
  position: relative;
  inline-size: var(--strand-dialog-inline-size, min(560px, 100%));
  margin: var(--strand-space-4);
  padding: var(--strand-space-8);
  background: var(--strand-surface-elevated);
  border: var(--strand-dialog-border, none);
  border-radius: var(--strand-dialog-radius, var(--strand-radius-xl));
  box-shadow: var(--strand-elevation-4);
  font-family: var(--strand-font-sans);
  outline: none;
}

.strand-dialog__panel--align-start {
  align-self: flex-start;
  margin-block-start: var(--strand-dialog-inset-block-start, 12vh);
}

.strand-dialog__panel--align-end {
  align-self: flex-end;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  border: none;
  border-start-start-radius: var(--strand-dialog-radius, var(--strand-radius-xl));
  border-start-end-radius: var(--strand-dialog-radius, var(--strand-radius-xl));
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  max-block-size: var(--strand-dialog-block-size, 78vh);
  overflow: hidden;
  box-shadow: var(--strand-elevation-4);
  animation: strand-dialog-sheet-in var(--strand-duration-normal) var(--strand-ease-out-quart);
}

@keyframes strand-dialog-sheet-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: none;
  }
}

.strand-dialog__panel--pad-none {
  padding: 0;
  overflow: hidden;
}

.strand-dialog__panel--pad-none .strand-dialog__body {
  padding: 0;
}

.strand-dialog__panel--pad-sm {
  padding: var(--strand-space-4);
}

.strand-dialog__panel--pad-md {
  padding: var(--strand-space-6);
}

.strand-dialog__panel--pad-lg {
  padding: var(--strand-space-8);
}

.strand-dialog__panel--pad-xl {
  padding: var(--strand-space-10);
}

.strand-dialog__header {
  margin-bottom: var(--strand-space-4);
  padding-right: var(--strand-space-8);
}

.strand-dialog__title {
  margin: 0;
  font-size: var(--strand-text-lg);
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-blue-midnight);
  line-height: var(--strand-leading-snug);
}

.strand-dialog__close {
  position: absolute;
  top: var(--strand-space-6);
  right: var(--strand-space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-gray-500);
  font-size: var(--strand-text-lg);
  cursor: pointer;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-dialog__close:hover {
  background: var(--strand-gray-200);
  color: var(--strand-gray-900);
}

.strand-dialog__body {
  padding-top: var(--strand-space-6);
  color: var(--strand-gray-600);
  font-size: var(--strand-text-sm);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-divider {
  border: 0;
  margin: 0;
  padding: 0;
}

.strand-divider--horizontal {
  width: 100%;
  border-top: 1px solid var(--strand-gray-200);
}

.strand-divider--vertical {
  align-self: stretch;
  border-left: 1px solid var(--strand-gray-200);
}

.strand-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
  border-top: 0;
}

.strand-divider__line {
  flex: 1;
  height: 0;
  border-top: 1px solid var(--strand-gray-200);
}

.strand-divider__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-gray-500);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
}

.strand-divider--gradient {
  border-top: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--strand-blue-indicator) 50%, transparent 100%);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-empty-collection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--strand-space-16) var(--strand-space-6);
  text-align: center;
  color: var(--strand-gray-500);
  font-family: var(--strand-font-sans);
}

.strand-empty-collection__message {
  font-size: var(--strand-text-base);
  color: var(--strand-gray-500);
  margin: 0;
}

.strand-empty-collection .strand-empty-collection__action {
  margin-top: var(--strand-space-4);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-blue-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--strand-blue-primary), var(--strand-blue-primary));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size var(--strand-duration-normal) var(--strand-ease-out-expo);
}

.strand-empty-collection .strand-empty-collection__action:hover {
  background-size: 100% 1px;
}

.strand-empty-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--strand-space-12) var(--strand-space-6);
  text-align: center;
}

.strand-empty-search__count {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-gray-500);
  margin-bottom: var(--strand-space-2);
}

.strand-empty-search__suggestion {
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-500);
  line-height: var(--strand-leading-relaxed);
  max-width: 50ch;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-feature-surface {
  background: var(--strand-blue-midnight);
  color: var(--strand-gray-200);
  border: 1px solid var(--strand-instrument-border);
  border-radius: var(--strand-radius-lg);
  padding: var(--strand-space-6);
}

.strand-feature-surface--pad-none {
  padding: 0;
  overflow: hidden;
}

.strand-feature-surface--pad-sm {
  padding: var(--strand-space-4);
}

.strand-feature-surface--pad-md {
  padding: var(--strand-space-6);
}

.strand-feature-surface--pad-lg {
  padding: var(--strand-space-8);
}

.strand-feature-surface--pad-xl {
  padding: var(--strand-space-10);
}

.strand-feature-surface {
  --strand-alert-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-alert-color: var(--strand-on-blue-primary);
  --strand-alert-error-status-color: var(--strand-red-tint);
  --strand-alert-info-status-color: var(--strand-blue-indicator);
  --strand-alert-success-status-color: var(--strand-teal-tint);
  --strand-alert-warning-status-color: var(--strand-amber-tint);
  --strand-big-mono-time-color: var(--strand-on-blue-primary);
  --strand-big-mono-time-sep-color: var(--strand-gray-300);
  --strand-btn-ghost-border-color: var(--strand-instrument-border-strong);
  --strand-btn-ghost-color: var(--strand-on-blue-primary);
  --strand-data-readout-label-color: var(--strand-gray-300);
  --strand-data-readout-value-color: var(--strand-on-blue-primary);
  --strand-heading-sm-color: var(--strand-on-blue-primary);
  --strand-headline-color: var(--strand-on-blue-primary);
  --strand-kv-label-color: var(--strand-gray-300);
  --strand-kv-value-color: var(--strand-on-blue-primary);
  --strand-kv-value-status-color: var(--strand-on-blue-primary);
  --strand-lead-color: var(--strand-gray-200);
  --strand-link-color: var(--strand-blue-indicator);
  --strand-link-mono-color: var(--strand-blue-indicator);
  --strand-link-mono-hover-color: var(--strand-blue-indicator);
  --strand-overline-accent-color: var(--strand-blue-indicator);
  --strand-overline-color: var(--strand-gray-300);
  --strand-progress-track-color: var(--strand-instrument-border);
  --strand-stat-strip-border-color: var(--strand-instrument-border);
  --strand-stat-strip-label-color: var(--strand-gray-300);
  --strand-stat-strip-value-color: var(--strand-on-blue-primary);
  --strand-status-chip-neutral-bg: color-mix(in srgb, var(--strand-gray-300) 14%, transparent);
  --strand-status-chip-neutral-border: 1px solid color-mix(in srgb, var(--strand-gray-300) 22%, transparent);
  --strand-status-chip-neutral-color: var(--strand-gray-200);
  --strand-text-secondary-color: var(--strand-gray-200);
  --strand-text-secondary-xs-color: var(--strand-gray-300);
  --strand-title-color: var(--strand-on-blue-primary);
  --strand-value-negative-color: var(--strand-red-tint);
  --strand-value-positive-color: var(--strand-teal-tint);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-footer {
  padding: var(--strand-space-12) 0;
  border-top: 1px solid var(--strand-gray-200);
  text-align: center;
}

.strand-footer__nav {
  display: flex;
  justify-content: center;
  gap: var(--strand-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--strand-space-6);
}

.strand-footer__link {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wider);
  color: var(--strand-gray-500);
  text-decoration: none;
  transition: color var(--strand-duration-fast) ease;
}

.strand-footer__link:hover {
  color: var(--strand-blue-deep);
}

.strand-footer__copy {
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-500);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-2);
}

.strand-form-field__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-form-field-label-color, var(--strand-gray-500));
  line-height: var(--strand-leading-snug);
}

.strand-form-field__required {
  color: var(--strand-blue-deep);
  margin-left: var(--strand-space-1);
}

.strand-form-field__control {
  display: flex;
  flex-direction: column;
}

.strand-form-field__hint {
  margin: 0;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  color: var(--strand-form-field-hint-color, var(--strand-gray-500));
  line-height: var(--strand-leading-normal);
}

.strand-form-field__error {
  margin: 0;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  color: var(--strand-red-alert-deep);
  line-height: var(--strand-leading-normal);
}

.strand-form-field__success {
  margin: 0;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  color: var(--strand-green-positive-deep);
  line-height: var(--strand-leading-normal);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-form-grid {
  display: grid;
  gap: var(--strand-space-6);
}

.strand-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--strand-space-6);
}

@media (max-width: 639px) {
  .strand-form-row {
    grid-template-columns: 1fr;
  }
}

.strand-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-glass-surface {
  background: var(--strand-glass-bg);
  -webkit-backdrop-filter: blur(var(--strand-glass-blur));
  backdrop-filter: blur(var(--strand-glass-blur));
  border: 1px solid var(--strand-glass-border);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-grid {
  display: grid;
  max-width: 100%;
  box-sizing: border-box;
}

.strand-grid > * {
  min-width: 0;
}

.strand-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.strand-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.strand-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.strand-grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.strand-grid--auto-220 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.strand-grid--auto-md {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.strand-grid--auto-260 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.strand-grid--gap-3 {
  gap: var(--strand-space-3);
}

.strand-grid--gap-4 {
  gap: var(--strand-space-4);
}

.strand-grid--gap-5 {
  gap: var(--strand-space-5);
}

.strand-grid--gap-6 {
  gap: var(--strand-space-6);
}

.strand-grid--gap-8 {
  gap: var(--strand-space-8);
}

.strand-grid--sidebar {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .strand-grid--sidebar {
    grid-template-columns: 264px minmax(0, 1fr);
  }
}

.strand-grid--split {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .strand-grid--split {
    grid-template-columns: minmax(0, 1fr) var(--strand-split-panel, 600px);
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.strand-hero-bg > * {
  width: 100%;
  height: 100%;
}

.strand-hero-grid {
  color: var(--strand-blue-deep);
}

.strand-hero-grid svg {
  width: 100%;
  height: 100%;
}

.strand-hero-grid__nodes {
  fill: currentColor;
  opacity: 0.2;
}

.strand-hero-grid__lines {
  stroke: currentColor;
  fill: none;
  stroke-width: 0.5;
  opacity: 0.08;
}

.strand-hero-grid__line {
  animation: strand-hero-grid-glow 12s var(--strand-ease-in-out-sine) infinite;
}

.strand-hero-grid__line--1 {
  animation-delay: 0s;
}

.strand-hero-grid__line--2 {
  animation-delay: 1s;
}

.strand-hero-grid__line--3 {
  animation-delay: 2s;
}

.strand-hero-grid__line--4 {
  animation-delay: 0.5s;
}

.strand-hero-grid__line--5 {
  animation-delay: 3s;
}

.strand-hero-grid__line--6 {
  animation-delay: 1.5s;
}

.strand-hero-grid__line--7 {
  animation-delay: 4s;
}

.strand-hero-grid__line--8 {
  animation-delay: 2.5s;
}

.strand-hero-grid__line--9 {
  animation-delay: 5s;
}

.strand-hero-grid__line--10 {
  animation-delay: 3.5s;
}

.strand-hero-grid__line--11 {
  animation-delay: 6s;
}

.strand-hero-grid__line--12 {
  animation-delay: 4.5s;
}

.strand-hero-grid__line--13 {
  animation-delay: 7s;
}

.strand-hero-grid__line--14 {
  animation-delay: 5.5s;
}

.strand-hero-grid__line--15 {
  animation-delay: 8s;
}

.strand-hero-grid__line--16 {
  animation-delay: 6.5s;
}

.strand-hero-grid__line--17 {
  animation-delay: 9s;
}

.strand-hero-grid__line--18 {
  animation-delay: 7.5s;
}

@keyframes strand-hero-grid-glow {
  0%,
  100% {
    stroke-opacity: 0.08;
  }

  50% {
    stroke-opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-hero-bg {
    display: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  transition:
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-input:focus-within {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

.strand-input__field {
  flex: 1;
  width: 100%;
  padding: var(--strand-space-3) var(--strand-space-4);
  background: transparent;
  border: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-base);
  color: var(--strand-gray-900);
  outline: none;
}

.strand-input__field::placeholder {
  color: var(--strand-gray-500);
}

.strand-input__leading,
.strand-input__trailing {
  display: flex;
  align-items: center;
  color: var(--strand-gray-500);
  font-size: var(--strand-text-sm);
}

.strand-input__leading {
  padding-left: var(--strand-space-3);
}

.strand-input__trailing {
  padding-right: var(--strand-space-3);
}

.strand-input--has-leading .strand-input__field {
  padding-left: var(--strand-space-2);
}

.strand-input--has-trailing .strand-input__field {
  padding-right: var(--strand-space-2);
}

.strand-input--error {
  border-color: var(--strand-red-alert);
}

.strand-input--error:focus-within {
  border-color: var(--strand-red-alert);
  box-shadow: var(--strand-focus-ring-error);
}

.strand-input--disabled {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-input--disabled .strand-input__field {
  cursor: not-allowed;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-instrument-viewport {
  background: var(--strand-blue-abyss);
  color: var(--strand-gray-100);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
  position: relative;
  padding: var(--strand-space-5);
}

.strand-instrument-viewport__label {
  color: var(--strand-gray-400);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
}

.strand-instrument-viewport__value {
  color: var(--strand-on-blue-primary);
  font-family: var(--strand-font-mono);
  font-variant-numeric: tabular-nums;
}

.strand-instrument-viewport .strand-instrument-viewport__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.strand-instrument-viewport--grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--strand-viewport-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--strand-viewport-grid-line) 1px, transparent 1px);
  background-size: var(--strand-viewport-grid-size) var(--strand-viewport-grid-size);
  pointer-events: none;
}

.strand-instrument-viewport--full-bleed {
  width: 100%;
  height: calc(100vh - var(--strand-nav-height));
  height: calc(100dvh - var(--strand-nav-height));
  border-radius: 0;
}

.strand-instrument-viewport--full-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--strand-viewport-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--strand-viewport-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 3;
}

.strand-instrument-viewport--full-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( ellipse 60% 50% at 50% 40%, var(--strand-instrument-glow-soft) 0%, transparent 70% );
  pointer-events: none;
  z-index: 2;
  animation: strand-instrument-breathe 8s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-instrument-breathe {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.strand-body--instrument {
  background: var(--strand-instrument-bg);
  overflow: hidden;
}

.strand-instrument-viewport .maplibregl-marker {
  z-index: 6 !important;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-left {
  opacity: 0.25;
  transition: opacity var(--strand-duration-fast) ease;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-left:hover {
  opacity: 0.7;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right {
  bottom: 40px;
  right: 12px;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  background: rgba(15, 25, 42, 0.85);
  border: 1px solid rgba(59, 142, 246, 0.2);
  border-radius: var(--strand-radius-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--strand-gray-300);
  cursor: pointer;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button:hover {
  color: var(--strand-blue-primary);
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(59, 142, 246, 0.15);
}

.strand-instrument-viewport .maplibregl-popup-content {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  background: var(--strand-instrument-bg-translucent);
  color: var(--strand-instrument-text-primary);
  border: 1px solid rgba(59, 142, 246, 0.2);
  border-radius: var(--strand-radius-md);
  padding: var(--strand-space-2) var(--strand-space-3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.strand-instrument-viewport .maplibregl-popup-tip {
  border-top-color: var(--strand-instrument-bg-translucent);
}

.strand-instrument-viewport,
.strand-body--instrument {
  --strand-alert-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-alert-color: var(--strand-on-blue-primary);
  --strand-alert-dismiss-color: var(--strand-gray-300);
  --strand-alert-dismiss-hover-bg: color-mix(in srgb, var(--strand-gray-400) 20%, transparent);
  --strand-alert-dismiss-hover-color: var(--strand-on-blue-primary);
  --strand-alert-error-status-color: var(--strand-red-tint);
  --strand-alert-info-status-color: var(--strand-blue-indicator);
  --strand-alert-success-status-color: var(--strand-teal-tint);
  --strand-alert-warning-status-color: var(--strand-amber-tint);
  --strand-bar-chart-amount-color: var(--strand-gray-300);
  --strand-bar-chart-label-color: var(--strand-gray-400);
  --strand-big-mono-time-color: var(--strand-on-blue-primary);
  --strand-big-mono-time-sep-color: var(--strand-gray-300);
  --strand-btn-ghost-border-color: rgba(255, 255, 255, 0.2);
  --strand-btn-ghost-color: var(--strand-on-blue-primary);
  --strand-checkbox-label-color: var(--strand-on-blue-primary);
  --strand-data-readout-label-color: var(--strand-gray-400);
  --strand-data-readout-value-color: var(--strand-on-blue-primary);
  --strand-form-field-hint-color: var(--strand-gray-300);
  --strand-form-field-label-color: var(--strand-gray-300);
  --strand-heading-sm-color: var(--strand-on-blue-primary);
  --strand-headline-color: var(--strand-on-blue-primary);
  --strand-kv-label-color: var(--strand-gray-400);
  --strand-kv-value-color: var(--strand-gray-200);
  --strand-kv-value-status-color: var(--strand-teal-vital);
  --strand-lead-color: var(--strand-on-blue-primary);
  --strand-link-color: currentColor;
  --strand-link-mono-color: currentColor;
  --strand-link-mono-hover-color: currentColor;
  --strand-link-underline: none;
  --strand-log-text-color: var(--strand-gray-300);
  --strand-log-text-strong-color: var(--strand-gray-100);
  --strand-log-time-color: var(--strand-gray-400);
  --strand-overline-accent-color: var(--strand-blue-indicator);
  --strand-overline-color: var(--strand-gray-400);
  --strand-progress-track-color: var(--strand-instrument-border);
  --strand-radio-label-color: var(--strand-on-blue-primary);
  --strand-stat-strip-border-color: var(--strand-instrument-border);
  --strand-stat-strip-label-color: var(--strand-gray-300);
  --strand-stat-strip-value-color: var(--strand-on-blue-primary);
  --strand-status-chip-committed-color: var(--strand-teal-vital);
  --strand-status-chip-neutral-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-status-chip-neutral-border: 1px solid color-mix(in srgb, var(--strand-gray-400) 20%, transparent);
  --strand-status-chip-neutral-color: var(--strand-gray-300);
  --strand-switch-label-color: var(--strand-on-blue-primary);
  --strand-text-secondary-color: var(--strand-gray-200);
  --strand-text-secondary-xs-color: var(--strand-gray-300);
  --strand-title-color: var(--strand-on-blue-primary);
  --strand-value-negative-color: var(--strand-red-alert);
  --strand-value-positive-color: var(--strand-teal-vital);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--strand-space-2) var(--strand-space-4);
}

.strand-kv + .strand-kv {
  border-top: 1px solid var(--strand-border-subtle);
}

.strand-kv__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-kv-label-color, var(--strand-gray-500));
}

.strand-kv__value {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  color: var(--strand-kv-value-color, var(--strand-gray-700));
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.strand-kv__value--status {
  color: var(--strand-kv-value-status-color, var(--strand-on-teal-tint));
}

.strand-kv--editorial {
  padding: 6px 0;
  font-size: var(--strand-text-sm);
  line-height: 1.4;
}

.strand-kv--editorial + .strand-kv--editorial {
  border-top: 1px dashed var(--strand-gray-200);
}

.strand-kv--editorial .strand-kv__label {
  letter-spacing: var(--strand-tracking-ultra);
  flex: none;
  white-space: nowrap;
}

.strand-kv--editorial .strand-kv__value {
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-kv-value-color, var(--strand-blue-midnight));
  font-weight: var(--strand-weight-medium);
  font-variant-numeric: normal;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-frame {
  background: var(--strand-surface-recessed);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
}

.strand-ref-frame__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--strand-surface-subtle);
  border-bottom: 1px solid var(--strand-gray-200);
}

.strand-ref-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.strand-ref-frame__title {
  margin-left: var(--strand-space-3);
  font-family: var(--strand-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--strand-gray-600);
}

.strand-ref-frame__body {
  position: relative;
  min-height: 280px;
  background: var(--strand-surface-elevated);
}

.strand-ref-frame__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--strand-space-5);
  padding: var(--strand-space-8) 36px;
  transition: filter 180ms var(--strand-ease-out-quart), opacity 180ms var(--strand-ease-out-quart);
}

.strand-ref-frame__content[aria-hidden="true"] {
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
}

.strand-ref-frame__content-head {

}

.strand-ref-frame__actions {
  display: flex;
  gap: 10px;
}

.strand-ref-frame__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: strand-ref-frame-overlay-in 160ms var(--strand-ease-out-quart) forwards;
  padding: var(--strand-space-6);
}

@keyframes strand-ref-frame-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.strand-ref-frame__panel {
  background: var(--strand-surface-elevated);
  border-radius: var(--strand-radius-lg);
  box-shadow: 0 20px 50px rgba(15, 25, 42, 0.25), 0 2px 6px rgba(15, 25, 42, 0.12);
  width: min(440px, 100%);
  overflow: hidden;
  animation: strand-ref-frame-panel-in 180ms var(--strand-ease-out-expo) forwards;
  transform-origin: center;
}

@keyframes strand-ref-frame-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.strand-ref-frame__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--strand-space-5) 22px 14px;
  gap: var(--strand-space-4);
}

.strand-ref-frame__panel-title {
  margin: 4px 0 0;
  font-family: var(--strand-font-sans);
  font-size: 18px;
  font-weight: var(--strand-weight-medium);
  line-height: 1.3;
  color: var(--strand-blue-midnight);
  letter-spacing: -0.01em;
}

.strand-ref-frame__panel-close {
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--strand-radius-md);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--strand-gray-500);
  cursor: pointer;
  flex: none;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-ref-frame__panel-close:hover {
  background: var(--strand-surface-recessed);
  color: var(--strand-blue-midnight);
}

.strand-ref-frame__panel-body {
  padding: 0 22px var(--strand-space-5);
  font-size: 14px;
  line-height: 1.55;
  color: var(--strand-gray-700);
}

.strand-ref-frame__panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--strand-space-4) 22px var(--strand-space-5);
  border-top: 1px solid var(--strand-gray-100);
  background: var(--strand-surface-recessed);
}

@media (prefers-reduced-motion: reduce) {
  .strand-ref-frame__overlay,
  .strand-ref-frame__panel {
    animation: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-glass-stage {
  position: relative;
  padding: var(--strand-space-10) var(--strand-space-8);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(59, 142, 246, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(20, 184, 166, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, var(--strand-blue-midnight) 0%, var(--strand-blue-abyss) 100%);
}

.strand-ref-glass-panel {
  position: relative;
  padding: 22px var(--strand-space-6);
  border-radius: var(--strand-radius-lg);
  background: rgba(15, 25, 42, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--strand-on-blue-primary);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-reveal-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--strand-space-5) 0;
}

.strand-ref-reveal-line {
  opacity: 0;
  transform: translateY(8px);
  animation: strand-ref-reveal-in 2400ms var(--strand-ease-out-quart) forwards;
  font-family: var(--strand-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--strand-blue-midnight);
  padding: 10px 14px;
  background: var(--strand-surface-elevated);
  border-left: 2px solid var(--strand-blue-primary);
}

.strand-ref-reveal-line:nth-child(1) {
  animation-delay: 0ms;
}

.strand-ref-reveal-line:nth-child(2) {
  animation-delay: 180ms;
}

.strand-ref-reveal-line:nth-child(3) {
  animation-delay: 360ms;
}

.strand-ref-reveal-line:nth-child(4) {
  animation-delay: 540ms;
}

@keyframes strand-ref-reveal-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  25% {
    opacity: 1;
    transform: translateY(0);
  }

  85% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-ref-reveal-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-shell {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
}

.strand-ref-shell__sidebar {
  position: sticky;
  top: var(--strand-ref-sticky-top, 0);
  height: calc(100vh - var(--strand-ref-sticky-top, 0px));
  height: calc(100dvh - var(--strand-ref-sticky-top, 0px));
  max-height: calc(100vh - var(--strand-ref-sticky-top, 0px));
  max-height: calc(100dvh - var(--strand-ref-sticky-top, 0px));
  background: var(--strand-surface-elevated);
  border-right: 1px solid var(--strand-gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.strand-ref-shell__sidebar-head {
  padding: var(--strand-space-6) var(--strand-space-5) 18px;
  border-bottom: 1px solid var(--strand-gray-100);
  flex: none;
  background: var(--strand-surface-elevated);
}

.strand-ref-shell__sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  padding: var(--strand-space-4) var(--strand-space-5) var(--strand-space-6);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.strand-ref-shell__brand {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
}

.strand-ref-shell__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--strand-radius-md);
  background: var(--strand-blue-midnight);
  color: var(--strand-on-blue-primary);
  display: grid;
  place-items: center;
  font-family: var(--strand-font-mono);
  font-weight: var(--strand-weight-semibold);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.strand-ref-shell__brand-title {
  font-family: var(--strand-font-mono);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-blue-midnight);
  font-size: 15px;
}

.strand-ref-shell__brand-sub {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--strand-tracking-ultra);
  color: var(--strand-gray-500);
}

.strand-ref-shell__group {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-1);
  padding-top: 10px;
  border-top: 1px solid var(--strand-gray-100);
}

.strand-ref-shell__group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.strand-ref-shell__group-label {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--strand-blue-midnight);
  font-weight: var(--strand-weight-semibold);
  padding: 6px 10px 8px;
}

.strand-ref-shell__group-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.strand-ref-shell__group-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--strand-radius-md);
  font-family: var(--strand-font-sans);
  font-size: 13px;
  color: var(--strand-gray-700);
  text-decoration: none;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-ref-shell__group-link:hover {
  background: var(--strand-surface-recessed);
  color: var(--strand-blue-midnight);
}

.strand-ref-shell__group-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--strand-gray-300);
  flex: none;
}

.strand-ref-shell__group-link:hover .strand-ref-shell__group-dot {
  background: var(--strand-blue-primary);
}

.strand-ref-shell__main {
  padding: 56px var(--strand-space-16) 96px;
  max-width: 1120px;
  min-width: 0;
}

.strand-ref-header {
  padding-bottom: var(--strand-space-10);
  border-bottom: 1px solid var(--strand-gray-200);
  margin-bottom: var(--strand-space-8);
}

.strand-ref-header__title {
  font-family: var(--strand-font-sans);
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-tight);
  color: var(--strand-blue-midnight);
  font-size: 40px;
  margin: var(--strand-space-3) 0 0;
}

.strand-ref-header__lead {
  max-width: 620px;
  margin: var(--strand-space-4) 0 0;
  font-family: var(--strand-font-sans);
  font-size: 20px;
  color: var(--strand-gray-500);
  line-height: 1.5;
}

.strand-ref-header__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 48px;
  margin: var(--strand-space-8) 0 0;
  justify-content: start;
}

.strand-ref-header__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-2);
  margin: 0;
}

.strand-ref-header__meta-label {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--strand-gray-500);
  margin: 0;
}

.strand-ref-header__meta-value {
  font-family: var(--strand-font-sans);
  font-size: 22px;
  font-weight: var(--strand-weight-light);
  letter-spacing: -0.01em;
  color: var(--strand-blue-midnight);
  margin: 0;
  line-height: 1.2;
}

.strand-ref-taxonomy {
  margin-top: var(--strand-space-6);
  padding: var(--strand-space-5) 22px;
  background: var(--strand-surface-recessed);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-lg);
  max-width: 720px;
}

.strand-ref-taxonomy__title {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--strand-blue-midnight);
  font-weight: var(--strand-weight-semibold);
  margin-bottom: 10px;
}

.strand-ref-taxonomy__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--strand-space-2);
}

.strand-ref-taxonomy__list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: baseline;
}

.strand-ref-taxonomy__list dt {
  font-family: var(--strand-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-semibold);
  margin: 0;
}

.strand-ref-taxonomy__list dd {
  margin: 0;
  font-size: 13px;
  color: var(--strand-gray-700);
  line-height: 1.5;
}

.strand-ref-taxonomy__list em {
  font-style: italic;
  color: var(--strand-blue-midnight);
}

.strand-ref-section {
  padding: var(--strand-space-12) 0;
  border-bottom: 1px solid var(--strand-gray-200);
  scroll-margin-top: var(--strand-space-4);
}

.strand-ref-section:last-child {
  border-bottom: 0;
}

.strand-ref-section__head {
  margin-bottom: var(--strand-space-8);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--strand-space-6);
  flex-wrap: wrap;
}

.strand-ref-section__head h2 {
  margin: var(--strand-space-2) 0 0;
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-tight);
  color: var(--strand-blue-midnight);
  font-size: 28px;
}

.strand-ref-section__head-note {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: var(--strand-tracking-ultra);
  text-transform: uppercase;
  color: var(--strand-gray-500);
}

.strand-ref-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-8);
}

.strand-ref-example {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.strand-ref-example > * {
  min-width: 0;
}

.strand-ref-example__meta {
  padding-top: 6px;
}

.strand-ref-example__label {
  font-family: var(--strand-font-sans);
  font-size: 13px;
  font-weight: var(--strand-weight-medium);
  color: var(--strand-blue-midnight);
  margin-bottom: 6px;
}

.strand-ref-example__code {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--strand-gray-500);
  display: block;
  line-height: 1.5;
}

.strand-ref-example__demo {
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-lg);
  padding: var(--strand-space-6) 28px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.strand-ref-example__demo--pad-none {
  padding: 0;
  overflow: hidden;
}

.strand-ref-example__demo--recessed {
  background: var(--strand-surface-recessed);
}

.strand-ref-example__caption {
  margin-top: var(--strand-space-2);
  font-size: 12px;
  line-height: 1.55;
  color: var(--strand-gray-500);
  max-width: 560px;
}

.strand-ref-mobile-trigger {
  display: none;
}

.strand-ref-shell__nav-scrim {
  display: none;
}

@media (max-width: 1040px) {
  .strand-ref-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .strand-ref-shell__sidebar {
    position: fixed;
    top: var(--strand-ref-sticky-top, 0);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    width: 100%;
    z-index: 80;
    background: var(--strand-surface-elevated);
    box-shadow: var(--strand-elevation-3, 0 8px 28px rgba(15, 23, 42, 0.18));
    transform: translateX(-100%);
    transition: transform var(--strand-duration-normal, 200ms) var(--strand-ease-out-quart, ease-out);
    visibility: hidden;
    border-right: 0;
    border-bottom: 0;
  }

  .strand-ref-shell.is-nav-open .strand-ref-shell__sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  .strand-ref-shell__nav-scrim {
    position: fixed;
    top: var(--strand-ref-sticky-top, 0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    background: rgba(15, 23, 42, 0.4);
  }

  .strand-ref-shell.is-nav-open .strand-ref-shell__nav-scrim {
    display: block;
  }

  .strand-ref-mobile-trigger {
    display: inline-flex;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: 16px;
    z-index: 85;
    box-shadow: var(--strand-elevation-3, 0 8px 24px rgba(15, 23, 42, 0.2));
    border-radius: var(--strand-radius-full, 9999px);
  }

  .strand-ref-shell__main {
    padding: var(--strand-space-8) var(--strand-space-6) var(--strand-space-16);
  }

  .strand-ref-example {
    grid-template-columns: minmax(0, 1fr);
  }

  .strand-ref-header__meta {
    grid-template-columns: 1fr 1fr;
    gap: var(--strand-space-6) var(--strand-space-8);
  }
}

@media (max-width: 560px) {
  .strand-ref-header__meta {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-lab-surface {
  background:
    radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
    linear-gradient(180deg, var(--strand-surface-primary) 0%, var(--strand-surface-elevated) 40%, var(--strand-surface-recessed) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  background-color: var(--strand-surface-primary);
}

.strand-lab-surface--warm {
  background:
    radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.03) 0%, transparent 100%),
    radial-gradient(ellipse 80% 40% at 50% 100%, var(--strand-warm-radial) 0%, transparent 100%),
    linear-gradient(180deg, var(--strand-surface-primary) 0%, var(--strand-surface-elevated) 40%, var(--strand-surface-recessed) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%;
  background-color: var(--strand-surface-primary);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-tip {
  position: relative;
  display: inline-flex;
}

.strand-ref-tip__bubble {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--strand-radius-sm);
  background: var(--strand-blue-midnight);
  color: var(--strand-on-blue-primary);
  font-family: var(--strand-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--strand-duration-fast) var(--strand-ease-out-quart),
    transform var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-ref-tip:hover .strand-ref-tip__bubble,
.strand-ref-tip:focus-within .strand-ref-tip__bubble,
.strand-ref-tip--pinned .strand-ref-tip__bubble {
  opacity: 1;
}

.strand-ref-tip__bubble--top {
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
}

.strand-ref-tip__bubble--bottom {
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.strand-ref-tip__bubble--left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateX(4px) translateY(-50%);
}

.strand-ref-tip__bubble--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateX(-4px) translateY(-50%);
}

.strand-ref-tip:hover .strand-ref-tip__bubble--top,
.strand-ref-tip--pinned .strand-ref-tip__bubble--top,
.strand-ref-tip:focus-within .strand-ref-tip__bubble--top {
  transform: translateX(-50%) translateY(0);
}

.strand-ref-tip:hover .strand-ref-tip__bubble--bottom,
.strand-ref-tip--pinned .strand-ref-tip__bubble--bottom,
.strand-ref-tip:focus-within .strand-ref-tip__bubble--bottom {
  transform: translateX(-50%) translateY(0);
}

.strand-ref-tip:hover .strand-ref-tip__bubble--left,
.strand-ref-tip--pinned .strand-ref-tip__bubble--left,
.strand-ref-tip:focus-within .strand-ref-tip__bubble--left {
  transform: translateX(0) translateY(-50%);
}

.strand-ref-tip:hover .strand-ref-tip__bubble--right,
.strand-ref-tip--pinned .strand-ref-tip__bubble--right,
.strand-ref-tip:focus-within .strand-ref-tip__bubble--right {
  transform: translateX(0) translateY(-50%);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-ref-util-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
}

.strand-ref-util-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--strand-space-4);
  background: var(--strand-surface-recessed);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  min-width: 180px;
  flex: 1;
}

.strand-ref-util-cell__code {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-medium);
}

.strand-ref-util-cell__caption {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--strand-gray-500);
}

.strand-ref-util-cell__demo {
  background: var(--strand-surface-elevated);
  border: 1px dashed var(--strand-gray-300);
  border-radius: var(--strand-radius-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.strand-ref-util-cell__block {
  background: var(--strand-blue-midnight);
  color: var(--strand-on-blue-primary);
  padding: 6px 10px;
  font-family: var(--strand-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: inline-block;
  align-self: flex-start;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-link {
  color: var(--strand-link-color, var(--strand-blue-deep));
  text-decoration: none;
  font-family: var(--strand-font-sans);
  background-image: var(--strand-link-underline, linear-gradient(currentColor, currentColor));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--strand-duration-normal) var(--strand-ease-out-expo);
  cursor: pointer;
}

.strand-link:hover {
  background-size: 100% 1px;
}

.strand-link--cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--strand-touch-target);
  padding-block: var(--strand-space-2);
  font-size: var(--strand-text-sm);
}

.strand-link--mono {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wider);
  color: var(--strand-link-mono-color, var(--strand-gray-500));
  background-image: var(--strand-link-underline, none);
}

.strand-link--mono:hover {
  color: var(--strand-link-mono-hover-color, var(--strand-blue-deep));
}

.strand-link--inherit {
  color: var(--strand-link-color, inherit);
  background-image: var(--strand-link-underline, none);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-log {
  display: flex;
  align-items: baseline;
  gap: var(--strand-space-3);
  padding: var(--strand-space-2) var(--strand-space-4);
}

.strand-log + .strand-log {
  border-top: 1px solid var(--strand-border-subtle);
}

.strand-log__time {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-log-time-color, var(--strand-gray-500));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.strand-log__status {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.strand-log__status--complete {
  color: var(--strand-on-teal-tint);
}

.strand-log__status--process {
  color: var(--strand-blue-deep);
}

.strand-log__status--warning {
  color: var(--strand-on-amber-tint);
}

.strand-log__status--error {
  color: var(--strand-red-alert-deep);
}

.strand-log__text {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  color: var(--strand-log-text-color, var(--strand-gray-500));
  line-height: var(--strand-leading-normal);
}

.strand-log__text strong {
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-log-text-strong-color, var(--strand-gray-700));
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-map-legend {
  position: absolute;
  bottom: calc(var(--strand-space-6) + 6rem);
  right: var(--strand-space-4);
  z-index: 10;
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wide);
  color: rgba(148, 163, 184, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-2);
  background: rgba(15, 25, 42, 0.7);
  border: 1px solid var(--strand-instrument-border);
  border-radius: var(--strand-radius-md);
  padding: var(--strand-space-3) var(--strand-space-4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--strand-instrument-shadow-inset), var(--strand-instrument-shadow-soft);
}

.strand-map-legend__title {
  font-weight: var(--strand-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--strand-tracking-widest);
  color: rgba(148, 163, 184, 0.4);
  margin-bottom: var(--strand-space-1);
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
}

.strand-map-legend__title::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--strand-instrument-glow-strong);
  border-radius: var(--strand-radius-full);
  animation: strand-instrument-breathe 3s var(--strand-ease-in-out-sine) infinite;
}

.strand-map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
  padding: 2px 0;
  cursor: pointer;
  transition: color var(--strand-duration-fast) ease;
}

.strand-map-legend__item:hover {
  color: rgba(226, 232, 240, 0.9);
}

.strand-map-legend__item:hover .strand-map-legend__dot {
  transform: scale(1.4);
  filter: brightness(1.3);
}

.strand-map-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--strand-radius-full);
  transition:
    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
    filter var(--strand-duration-fast) ease;
}

.strand-map-legend__dot--tech {
  background: var(--strand-sector-tech);
  box-shadow: 0 0 8px rgba(59, 142, 246, 0.5);
}

.strand-map-legend__dot--health {
  background: var(--strand-sector-health);
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}

.strand-map-legend__dot--trades {
  background: var(--strand-sector-trades);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.strand-map-legend__dot--finance {
  background: var(--strand-sector-finance);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

@media (max-width: 640px) {
  .strand-map-legend {
    display: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-map-loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--strand-space-6);
  background: var(--strand-instrument-bg);
  transition: opacity 0.6s ease;
}

.strand-map-loading.is-hidden,
.strand-map-loading--hidden,
.strand-map-loading.hidden {
  display: none;
}

.strand-map-loading__spinner {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(59, 142, 246, 0.15);
  border-top-color: rgba(59, 142, 246, 0.7);
  border-radius: var(--strand-radius-full);
  animation: strand-map-loading-spin 1s linear infinite;
}

@keyframes strand-map-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.strand-map-loading__text {
  font-family: var(--strand-font-mono);
  font-size: 11px;
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-instrument-text-tertiary);
}

.strand-map-loading__bar {
  width: 160px;
  height: 1px;
  background: rgba(59, 142, 246, 0.1);
  border-radius: var(--strand-radius-sm);
  overflow: hidden;
}

.strand-map-loading__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient( 90deg, transparent, rgba(59, 142, 246, 0.6), transparent );
  animation: strand-map-loading-sweep 1.4s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-map-loading-sweep {
  0% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(500%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-map-loading__spinner {
    animation: none;
    border-color: rgba(59, 142, 246, 0.4);
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-map-pin {
  width: 24px;
  height: 24px;
  border-radius: var(--strand-radius-full);
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  cursor: pointer;
  animation: strand-map-pin-spawn var(--strand-duration-slow) var(--strand-ease-spring) both;
  transition:
    scale var(--strand-duration-fast) var(--strand-ease-out-expo),
    background var(--strand-duration-fast) var(--strand-ease-out-quart);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.15),
    0 0 12px currentColor,
    0 0 28px currentColor,
    0 0 56px currentColor;
  position: relative;
}

.strand-map-pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--strand-radius-full);
  border: 1.5px solid currentColor;
  animation: strand-map-pin-breathe var(--strand-duration-cinematic-slow) var(--strand-ease-in-out-sine) infinite;
  animation-delay: inherit;
  pointer-events: none;
}

.strand-map-pin::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--strand-radius-full);
  border: 2px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: strand-map-pin-beacon var(--strand-duration-cinematic) var(--strand-ease-out-quart) forwards;
  animation-delay: inherit;
  pointer-events: none;
}

.strand-map-pin:hover {
  scale: 1.6;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.3),
    0 0 16px currentColor,
    0 0 40px currentColor,
    0 0 72px currentColor;
}

.strand-map-pin:hover::before {
  animation: none;
  opacity: 0;
}

.strand-map-pin:hover::after {
  animation: strand-map-pin-pulse 1s var(--strand-ease-out-expo) infinite;
}

.strand-map-pin--tech {
  background: var(--strand-sector-tech);
  color: var(--strand-sector-tech);
}

.strand-map-pin--health {
  background: var(--strand-sector-health);
  border-color: rgba(20, 184, 166, 0.7);
  color: var(--strand-sector-health);
}

.strand-map-pin--trades {
  background: var(--strand-sector-trades);
  border-color: rgba(34, 211, 238, 0.7);
  color: var(--strand-sector-trades);
}

.strand-map-pin--finance {
  background: var(--strand-sector-finance);
  border-color: rgba(139, 92, 246, 0.7);
  color: var(--strand-sector-finance);
}

.strand-map-pin.is-highlighted,
.strand-map-pin--highlighted {
  scale: 1.6;
  box-shadow: 0 0 16px currentColor, 0 0 36px currentColor, 0 0 64px rgba(59, 142, 246, 0.4);
  z-index: 10;
}

.strand-map-pin.is-dimmed,
.strand-map-pin--dimmed {
  opacity: 0.15;
  transition: opacity var(--strand-duration-fast) ease;
}

@keyframes strand-map-pin-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 142, 246, 0.6);
  }

  100% {
    box-shadow: 0 0 0 18px rgba(59, 142, 246, 0);
  }
}

@keyframes strand-map-pin-spawn {
  0% {
    scale: 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    scale: 1;
  }
}

@keyframes strand-map-pin-beacon {
  0% {
    scale: 1;
    opacity: 0.7;
  }

  100% {
    scale: 3;
    opacity: 0;
  }
}

@keyframes strand-map-pin-breathe {
  0%,
  100% {
    opacity: 0.25;
    scale: 1;
  }

  50% {
    opacity: 0.55;
    scale: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-map-pin {
    animation: none;
  }
}

@media (max-width: 768px) {
  .strand-map-pin {
    width: 24px;
    height: 24px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-metric-row {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-nav {
  position: relative;
  width: 100%;
  height: var(--strand-nav-height);
  background: var(--strand-surface-elevated);
  border-bottom: 1px solid var(--strand-gray-200);
  font-family: var(--strand-font-sans);
}

.strand-nav__inner {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: inherit;
  padding: 0 var(--strand-space-8);
}

.strand-nav__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-right: var(--strand-space-8);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-blue-midnight);
  text-decoration: none;
  position: relative;
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__logo:hover {
  color: var(--strand-blue-deep);
}

.strand-nav__logo:active {
  color: var(--strand-blue-abyss);
}

.strand-nav__logo--pulse::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--strand-blue-primary);
  border-radius: var(--strand-radius-sm);
  animation: strand-nav-logo-pulse 2s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-nav-logo-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-nav__logo--pulse::after {
    animation: none;
    opacity: 0.6;
  }
}

.strand-nav__items {
  display: flex;
  align-items: center;
  gap: var(--strand-space-6);
  list-style: none;
  flex: none;
}

.strand-nav__slot {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.strand-nav__items + .strand-nav__slot {
  margin-left: var(--strand-space-8);
}

.strand-nav__slot--reserve {
  min-width: var(--strand-nav-slot-reserve, 14rem);
  justify-content: flex-end;
}

.strand-nav__link {
  color: var(--strand-gray-600);
  text-decoration: none;
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  white-space: nowrap;
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__link:hover {
  color: var(--strand-gray-900);
}

.strand-nav__link--active {
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-medium);
}

.strand-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--strand-space-3);
  margin-left: auto;
  flex: none;
  min-inline-size: max-content;
}

.strand-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-gray-600);
  cursor: pointer;
  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__hamburger:hover {
  background: var(--strand-gray-200);
}

.strand-nav__hamburger-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.strand-nav__hamburger-icon::before,
.strand-nav__hamburger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.strand-nav__hamburger-icon::before {
  top: -6px;
}

.strand-nav__hamburger-icon::after {
  top: 6px;
}

.strand-nav__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  width: 100%;
  padding: var(--strand-space-4) var(--strand-space-6);
  background: var(--strand-surface-elevated);
  border-bottom: 1px solid var(--strand-gray-200);
  box-shadow: var(--strand-elevation-2);
  z-index: 99;
}

.strand-nav__mobile-menu--open {
  display: flex;
}

.strand-nav__mobile-link {
  display: block;
  padding: var(--strand-space-3) 0;
  color: var(--strand-gray-600);
  text-decoration: none;
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-nav__mobile-link:hover {
  color: var(--strand-gray-900);
}

.strand-nav__mobile-link--active {
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-semibold);
}

@media (max-width: 767px) {
  .strand-nav__items {
    display: none;
  }

  .strand-nav__slot {
    margin-left: auto;
  }

  .strand-nav__slot--reserve {
    min-width: var(--strand-nav-slot-reserve-sm, 11.75rem);
  }

  .strand-nav__hamburger {
    display: inline-flex;
  }

  .strand-nav {
    height: auto;
    min-height: var(--strand-nav-height);
  }
}

@media (max-width: 479.98px) {
  .strand-nav__inner {
    padding-inline: var(--strand-space-4);
  }
}

@media (pointer: fine) {
  .strand-nav__actions .strand-btn,
  .strand-nav__slot .strand-btn {
    min-height: 34px;
    padding-block: 0;
    padding-inline: var(--strand-space-3);
  }

  .strand-nav__actions .strand-btn.strand-btn--icon-only,
  .strand-nav__slot .strand-btn.strand-btn--icon-only {
    padding: 0;
    min-width: 34px;
    min-height: 34px;
  }
}

.strand-nav--glass {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--strand-scrollbar-gap, 0px);
  z-index: 100;
  height: var(--strand-nav-height);
  background: var(--strand-glass-bg);
  -webkit-backdrop-filter: blur(var(--strand-glass-blur));
  backdrop-filter: blur(var(--strand-glass-blur));
  border-bottom: 1px solid var(--strand-glass-border);
}

.strand-nav--scrolled {
  box-shadow: var(--strand-elevation-1);
  border-bottom-color: var(--strand-nav-scrolled-border);
}

.strand-nav--glass {
  transition:
    box-shadow var(--strand-duration-normal) ease,
    border-color var(--strand-duration-normal) ease;
}

.strand-nav.strand-nav--instrument {
  background: var(--strand-instrument-bg-translucent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--strand-instrument-border);
}

.strand-nav.strand-nav--instrument .strand-nav__logo {
  color: var(--strand-blue-primary);
  text-shadow: 0 0 12px rgba(59, 142, 246, 0.3);
}

.strand-nav.strand-nav--instrument .strand-nav__link {
  color: var(--strand-instrument-text-secondary);
}

.strand-nav.strand-nav--instrument .strand-nav__link:hover {
  color: var(--strand-instrument-text-primary);
}

.strand-nav__title {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-instrument-text-primary);
  text-shadow: 0 0 16px rgba(59, 142, 246, 0.15);
  margin-right: auto;
}

.strand-nav__title-tag {
  font-weight: var(--strand-weight-regular);
  color: var(--strand-gray-400);
  margin-left: var(--strand-space-1);
}

body:has(.strand-nav--glass) {
  padding-top: var(--strand-nav-height);
}

body:has(.strand-nav--glass):has(.strand-banner) {
  padding-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
}

body.strand-glass-nav-active {
  padding-top: var(--strand-nav-height);
}

body.strand-glass-nav-active.strand-banner-active {
  padding-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-person-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  padding-block: var(--strand-space-1);
  padding-inline: var(--strand-space-1) var(--strand-space-3);
  background: var(--strand-surface-recessed);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
  max-inline-size: 100%;
}

.strand-person-chip__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-blue-wash);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-blue-deep);
  line-height: 1;
}

.strand-person-chip__name {
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}

.strand-person-chip__secondary {
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
  max-inline-size: 12ch;
}

.strand-person-chip__secondary::before {
  content: "\00b7";
  margin-inline-end: var(--strand-space-1);
}

.strand-person-chip--action {
  cursor: pointer;
  font: inherit;
  transition:
    border-color var(--strand-duration-fast) ease,
    background-color var(--strand-duration-fast) ease;
}

.strand-person-chip--action:hover {
  background: var(--strand-blue-glow);
  border-color: var(--strand-blue-indicator);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-progress--bar {
  width: 100%;
  background: var(--strand-progress-track-color, var(--strand-gray-200));
  border-radius: var(--strand-radius-full);
  overflow: hidden;
}

.strand-progress--bar.strand-progress--sm {
  height: 4px;
}

.strand-progress--bar.strand-progress--md {
  height: 8px;
}

.strand-progress--bar.strand-progress--lg {
  height: 12px;
}

.strand-progress--bar .strand-progress__fill {
  height: 100%;
  background: var(--strand-blue-primary);
  border-radius: var(--strand-radius-full);
  transition: width var(--strand-duration-normal) var(--strand-ease-out-quart);
}

.strand-progress--bar.strand-progress--indeterminate .strand-progress__fill {
  width: 40%;
  animation: strand-progress-shimmer var(--strand-duration-cinematic) var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-progress-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(350%);
  }
}

.strand-progress--ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.strand-progress__track {
  stroke: var(--strand-progress-track-color, var(--strand-gray-200));
}

.strand-progress__fill {
  stroke: var(--strand-blue-primary);
}

.strand-progress--ring .strand-progress__ring {
  transition: stroke-dashoffset var(--strand-duration-normal) var(--strand-ease-out-quart);
}

.strand-progress--ring.strand-progress--indeterminate .strand-progress__ring {
  animation: strand-progress-rotate 1.2s linear infinite;
}

@keyframes strand-progress-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-progress--bar.strand-progress--indeterminate .strand-progress__fill {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  min-height: var(--strand-touch-target);
  cursor: pointer;
  user-select: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

.strand-radio__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-control-size);
  height: var(--strand-control-size);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
  background: var(--strand-surface-elevated);
  flex-shrink: 0;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-radio__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-on-blue-primary);
  transform: scale(0);
  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-radio__native:focus-visible ~ .strand-radio__control {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

.strand-radio__native:checked ~ .strand-radio__control {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-radio__native:checked ~ .strand-radio__control .strand-radio__dot {
  transform: scale(1);
}

.strand-radio:hover .strand-radio__native:enabled ~ .strand-radio__control {
  border-color: var(--strand-blue-indicator);
}

.strand-radio:hover .strand-radio__native:enabled:checked ~ .strand-radio__control {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

.strand-radio__label {
  color: var(--strand-radio-label-color, var(--strand-gray-900));
}

.strand-radio:has(.strand-radio__native:disabled) {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

@media (pointer: fine) {
  .strand-radio--compact {
    min-height: 30px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-reserve {
  display: grid;
  min-block-size: var(--strand-reserve-h, auto);
}

.strand-reserve > * {
  grid-area: 1 / 1;
}

@media (min-width: 768px) {
  .strand-reserve {
    min-block-size: var(--strand-reserve-h-md, var(--strand-reserve-h, auto));
  }
}

@media (min-width: 1024px) {
  .strand-reserve {
    min-block-size: var( --strand-reserve-h-lg, var(--strand-reserve-h-md, var(--strand-reserve-h, auto)) );
  }
}

.strand-reserve__placeholder,
.strand-reserve__content {
  transition:
    opacity var(--strand-duration-normal) var(--strand-ease-out-quart),
    visibility var(--strand-duration-normal) var(--strand-ease-out-quart);
}

.strand-reserve[data-strand-reserve="pending"] > .strand-reserve__content {
  opacity: 0;
  visibility: hidden;
}

.strand-reserve[data-strand-reserve="pending"] > .strand-reserve__placeholder {
  opacity: 1;
  visibility: visible;
}

.strand-reserve[data-strand-reserve="ready"] > .strand-reserve__placeholder {
  opacity: 0;
  visibility: hidden;
}

.strand-reserve[data-strand-reserve="ready"] > .strand-reserve__content {
  opacity: 1;
  visibility: visible;
}

.strand-reserve[data-strand-reserve="empty"] > .strand-reserve__placeholder {
  display: none;
}

.strand-reserve[data-strand-reserve="empty"] > .strand-reserve__content {
  opacity: 1;
  visibility: visible;
}

.strand-reserve:not([data-strand-reserve]) > .strand-reserve__placeholder {
  display: none;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-result-card {
  display: block;
  padding: var(--strand-space-3) var(--strand-space-4);
  border-bottom: 1px solid rgba(59, 142, 246, 0.06);
  cursor: pointer;
  transition: background var(--strand-duration-fast) ease;
}

.strand-result-card:hover {
  background: rgba(59, 142, 246, 0.08);
}

.strand-result-card.is-active,
.strand-result-card--active {
  background: rgba(59, 142, 246, 0.12);
}

.strand-result-card__title {
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-instrument-text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
}

.strand-result-card__company {
  font-size: var(--strand-text-xs);
  color: rgba(148, 163, 184, 0.7);
  margin-bottom: 4px;
}

.strand-result-card__meta {
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
  flex-wrap: wrap;
}

.strand-result-card__location {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: var(--strand-tracking-wide);
  color: var(--strand-instrument-text-tertiary);
}

.strand-result-card__salary {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  color: var(--strand-blue-indicator);
}

.strand-result-card__badge {
  font-family: var(--strand-font-mono);
  font-size: 9px;
  letter-spacing: var(--strand-tracking-wide);
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--strand-radius-sm);
}

.strand-result-card__badge--remote {
  color: var(--strand-teal-vital);
  background: rgba(20, 184, 166, 0.12);
}

.strand-result-card__badge--source {
  color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.06);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-results-panel {
  position: absolute;
  top: var(--strand-space-4);
  left: var(--strand-space-4);
  width: 340px;
  max-height: calc(100% - var(--strand-space-8));
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--strand-instrument-bg-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 142, 246, 0.12);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
  box-shadow: var(--strand-instrument-shadow-medium);
}

.strand-results-panel[hidden] {
  display: none;
}

.strand-results-panel__count {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-instrument-text-tertiary);
  padding: var(--strand-space-3) var(--strand-space-4);
  border-bottom: 1px solid rgba(59, 142, 246, 0.08);
}

.strand-results-panel__items {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 240px);
  overscroll-behavior: contain;
}

.strand-results-panel__state {
  padding: var(--strand-space-6) var(--strand-space-4);
  text-align: center;
}

.strand-results-panel__state-title {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wide);
  color: var(--strand-instrument-text-tertiary);
}

.strand-results-panel__state-hint {
  font-size: var(--strand-text-xs);
  color: var(--strand-instrument-text-quiet);
  margin-top: var(--strand-space-2);
}

.strand-results-panel__error-link {
  display: inline-block;
  margin-top: var(--strand-space-3);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  color: var(--strand-blue-primary);
  text-decoration: none;
  border: 1px solid rgba(59, 142, 246, 0.3);
  border-radius: var(--strand-radius-sm);
  padding: var(--strand-space-2) var(--strand-space-3);
  transition: background var(--strand-duration-fast) ease;
}

.strand-results-panel__error-link:hover {
  background: rgba(59, 142, 246, 0.1);
}

@media (max-width: 768px) {
  .strand-results-panel {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 40vh;
    border-radius: var(--strand-radius-lg) var(--strand-radius-lg) 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .strand-results-panel__items {
    max-height: none;
    overflow-y: visible;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: -2px;
  background: linear-gradient( 90deg, transparent 0%, rgba(59, 142, 246, 0.2) 15%, var(--strand-instrument-glow-strong) 50%, rgba(59, 142, 246, 0.2) 85%, transparent 100% );
  box-shadow:
    0 0 16px rgba(59, 142, 246, 0.3),
    0 0 48px rgba(59, 142, 246, 0.1),
    0 1px 0 var(--strand-instrument-border);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}

.strand-scanline--active {
  animation: strand-scan 2s var(--strand-ease-out-quart) forwards;
}

@keyframes strand-scan {
  0% {
    top: -2px;
    opacity: 0;
  }

  5% {
    opacity: 0.5;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

.strand-scanline--ambient {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: -1px;
  background: linear-gradient( 90deg, transparent 0%, rgba(59, 142, 246, 0.08) 30%, var(--strand-instrument-glow-medium) 50%, rgba(59, 142, 246, 0.08) 70%, transparent 100% );
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  animation: strand-scan-slow 6s linear infinite;
}

@keyframes strand-scan-slow {
  0% {
    top: -1px;
  }

  100% {
    top: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-scanline,
  .strand-scanline--ambient {
    display: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
    transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
}

.strand-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.strand-reveal-group > .strand-reveal:nth-child(1) {
  transition-delay: 0ms;
}

.strand-reveal-group > .strand-reveal:nth-child(2) {
  transition-delay: var(--strand-stagger-delay);
}

.strand-reveal-group > .strand-reveal:nth-child(3) {
  transition-delay: calc(var(--strand-stagger-delay) * 2);
}

.strand-reveal-group > .strand-reveal:nth-child(4) {
  transition-delay: calc(var(--strand-stagger-delay) * 3);
}

.strand-reveal-group > .strand-reveal:nth-child(5) {
  transition-delay: calc(var(--strand-stagger-delay) * 4);
}

.strand-reveal-group > .strand-reveal:nth-child(6) {
  transition-delay: var(--strand-duration-slow);
}

@supports (animation-timeline: view()) {
  .strand-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: none;
    animation: strand-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .strand-reveal-group > .strand-reveal {
    animation: strand-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes strand-reveal-up {
    from {
      opacity: 0;
      transform: translateY(24px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.strand-reveal-group--manual > .strand-reveal {
  animation: none;
  animation-timeline: auto;
  transition:
    opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
    transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
}

.strand-reveal-group--manual > .strand-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .strand-reveal,
  .strand-reveal-group > .strand-reveal,
  .strand-reveal-group--manual > .strand-reveal {
    transform: none;
    transition: none;
    animation: none;
    animation-timeline: auto;
  }

  .strand-reveal,
  .strand-reveal-group > .strand-reveal {
    opacity: 1;
  }

  .strand-reveal-group--manual > .strand-reveal:not(.strand-reveal--visible) {
    opacity: 0;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-search-bar {
  position: absolute;
  top: var(--strand-space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(520px, calc(100% - var(--strand-space-8)));
  transition:
    left var(--strand-duration-normal) var(--strand-ease-out-expo),
    transform var(--strand-duration-normal) var(--strand-ease-out-expo),
    width var(--strand-duration-normal) var(--strand-ease-out-expo);
}

.strand-search-bar--shifted {
  left: calc(340px + var(--strand-space-4) + var(--strand-space-4));
  transform: none;
  width: min(480px, calc(100% - 340px - var(--strand-space-4) * 3));
}

.strand-search-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
  background: linear-gradient( 135deg, rgba(15, 25, 42, 0.88) 0%, rgba(15, 23, 42, 0.85) 100% );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 142, 246, 0.15);
  border-radius: var(--strand-radius-lg);
  padding: var(--strand-space-2) var(--strand-space-4);
  box-shadow: var(--strand-instrument-shadow-deep);
  transition:
    border-color var(--strand-duration-normal) ease,
    box-shadow var(--strand-duration-normal) ease;
}

.strand-search-bar__inner:focus-within {
  border-color: var(--strand-instrument-border-strong);
  box-shadow: var(--strand-instrument-shadow-deep), inset 0 0 24px rgba(59, 142, 246, 0.06);
}

.strand-search-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-base);
  color: var(--strand-instrument-text-primary);
  padding: var(--strand-space-2) 0;
}

.strand-search-bar__input::placeholder {
  color: var(--strand-gray-500);
}

.strand-search-bar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(59, 142, 246, 0.2);
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-gray-400);
  cursor: pointer;
  transition:
    color var(--strand-duration-fast) ease,
    border-color var(--strand-duration-fast) ease,
    box-shadow var(--strand-duration-fast) ease;
}

.strand-search-bar__action:hover {
  color: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
  box-shadow: 0 0 8px rgba(59, 142, 246, 0.2);
}

.strand-search-bar__action:hover svg {
  filter: drop-shadow(0 0 3px rgba(59, 142, 246, 0.5));
}

.strand-search-bar__action:active {
  transform: scale(0.95);
}

.strand-search-bar__action--danger {
  border-color: rgba(239, 68, 68, 0.2);
}

.strand-search-bar__action--danger:hover {
  color: var(--strand-red-alert);
  border-color: var(--strand-red-alert);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

.strand-search-bar__action[hidden] {
  display: none;
}

.strand-search-bar__action--locating {
  color: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
  animation: strand-search-bar-pulse 1s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-search-bar-pulse {
  0%,
  100% {
    border-color: var(--strand-blue-primary);
  }

  50% {
    border-color: rgba(59, 142, 246, 0.3);
  }
}

@media (max-width: 768px) {
  .strand-search-bar,
  .strand-search-bar--shifted {
    top: var(--strand-space-3);
    left: var(--strand-space-4);
    width: calc(100% - (var(--strand-space-4) * 2));
    transform: none;
    transition: none;
  }

  .strand-search-bar__action {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .strand-search-bar__input {
    font-size: 16px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-search-field {
  display: flex;
  align-items: center;
  gap: var(--strand-space-2);
  inline-size: var(--strand-search-field-inline-size, min(300px, 100%));
  block-size: 36px;
  padding-inline: var(--strand-space-3);
  background: var(--strand-surface-recessed);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-lg);
  transition:
    border-color var(--strand-duration-fast) ease,
    box-shadow var(--strand-duration-fast) ease;
}

.strand-search-field--full {
  inline-size: 100%;
}

@media (pointer: coarse) {
  .strand-search-field {
    block-size: 44px;
  }
}

.strand-search-field:focus-within {
  border-color: var(--strand-blue-primary);
  box-shadow: 0 0 0 2px var(--strand-blue-primary);
}

.strand-search-field__icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  color: var(--strand-gray-500);
}

.strand-search-field__input {
  flex: 1;
  min-inline-size: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-800);
}

.strand-search-field__input::placeholder {
  color: var(--strand-gray-500);
  opacity: 1;
}

.strand-search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.strand-search-field__clear {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--strand-radius-full);
  color: var(--strand-gray-500);
  cursor: pointer;
  transition:
    color var(--strand-duration-fast) ease,
    background-color var(--strand-duration-fast) ease;
}

.strand-search-field__clear:hover {
  background: var(--strand-gray-200);
  color: var(--strand-gray-700);
}

@media (pointer: coarse) {
  .strand-search-field__clear {
    inline-size: 44px;
    block-size: 44px;
    margin-inline-end: calc(var(--strand-space-3) * -1);
  }
}

.strand-search-field__clear[hidden] {
  display: none;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-search-trigger {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  padding-block: 0;
}

.strand-search-trigger__label {
  flex: 1;
  min-inline-size: 0;
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strand-search-trigger--icon {
  inline-size: var(--strand-touch-target);
  block-size: var(--strand-touch-target);
  justify-content: center;
  padding: 0;
}

.strand-search-trigger--icon .strand-search-trigger__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.strand-search-trigger:hover {
  border-color: var(--strand-gray-300);
}

.strand-search-trigger:hover .strand-search-trigger__label,
.strand-search-trigger:hover .strand-search-field__icon {
  color: var(--strand-gray-600);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-section {
  width: 100%;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-section--standard {
  padding-block: clamp(4rem, 8vw, 8rem);
}

.strand-section--hero {
  padding-block: clamp(6rem, 12vw, 12rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.strand-section--hero-compact {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.strand-section--hero-xl {
  padding-block: clamp(8rem, 15vw, 14rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.strand-section--bg-primary {
  background-color: var(--strand-surface-primary);
}

.strand-section--bg-elevated {
  background-color: var(--strand-surface-elevated);
}

.strand-section--bg-recessed {
  background-color: var(--strand-surface-recessed);
}

.strand-section--compact {
  padding-block: var(--strand-space-12);
}

.strand-section--border-top {
  border-top: 1px solid var(--strand-gray-200);
}

.strand-section--scroll-target {
  scroll-margin-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
}

.strand-section--bg-recessed {
  --strand-form-field-hint-color: var(--strand-gray-600);
  --strand-form-field-label-color: var(--strand-gray-600);
  --strand-lead-color: var(--strand-gray-600);
  --strand-overline-accent-color: var(--strand-blue-deep);
  --strand-overline-color: var(--strand-gray-600);
  --strand-step-indicator-color: var(--strand-blue-deep);
  --strand-tabs-tab-active-border-color: var(--strand-blue-deep);
  --strand-tabs-tab-active-color: var(--strand-blue-deep);
  --strand-tabs-tab-color: var(--strand-gray-600);
  --strand-tabs-tab-hover-color: var(--strand-gray-600);
  --strand-tabs-tab-pressed-color: var(--strand-gray-600);
  --strand-text-secondary-color: var(--strand-gray-600);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-section-header {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  transition:
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-select:focus-within {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

.strand-select__field {
  flex: 1;
  width: 100%;
  padding: var(--strand-space-3) var(--strand-space-8) var(--strand-space-3) var(--strand-space-4);
  background: transparent;
  border: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-base);
  color: var(--strand-gray-900);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.strand-select::after {
  content: "";
  position: absolute;
  right: var(--strand-space-3);
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--strand-gray-500);
  pointer-events: none;
}

.strand-select__arrow {
  position: absolute;
  right: var(--strand-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--strand-gray-500);
  pointer-events: none;
}

.strand-select--error {
  border-color: var(--strand-red-alert);
}

.strand-select--error:focus-within {
  border-color: var(--strand-red-alert);
  box-shadow: var(--strand-focus-ring-error);
}

.strand-select--disabled {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-select--disabled .strand-select__field {
  cursor: not-allowed;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

@keyframes strand-settle-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.strand-settle {
  animation: strand-settle-in var(--strand-duration-fast) var(--strand-ease-out-expo) both;
}

@media (prefers-reduced-motion: reduce) {
  .strand-settle {
    animation: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-sheet__panel {
  display: flex;
  flex-direction: column;
  max-block-size: var(--strand-dialog-block-size, 78vh);
  will-change: transform;
}

.strand-sheet__grab {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 28px;
  flex: none;
  cursor: grab;
  touch-action: none;
}

.strand-sheet__grabber {
  inline-size: 36px;
  block-size: 4px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-gray-300);
}

.strand-sheet__head {
  flex: none;
  padding: 0 var(--strand-space-5) var(--strand-space-3);
  border-block-end: 1px solid var(--strand-gray-200);
}

.strand-sheet__body {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--strand-space-5);
}

.strand-sheet__foot {
  flex: none;
  display: flex;
  padding: var(--strand-space-4) var(--strand-space-5);
  padding-block-end: max(var(--strand-space-4), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--strand-gray-200);
  background: var(--strand-surface-elevated);
}

.strand-sheet__foot > * {
  inline-size: 100%;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-skeleton {
  display: block;
  background: var(--strand-gray-100);
}

.strand-skeleton--shimmer {
  background: linear-gradient( 90deg, var(--strand-gray-100) 25%, var(--strand-gray-50) 50%, var(--strand-gray-100) 75% );
  background-size: 200% 100%;
  animation: strand-skeleton-shimmer 1.8s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.strand-skeleton--text {
  height: 1em;
  border-radius: var(--strand-radius-sm);
}

.strand-skeleton--rectangle {
  border-radius: var(--strand-radius-md);
}

.strand-skeleton--circle {
  border-radius: var(--strand-radius-full);
}

@media (prefers-reduced-motion: reduce) {
  .strand-skeleton--shimmer {
    animation: none;
    background: var(--strand-gray-100);
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-skip-link {
  position: fixed;
  top: var(--strand-space-4);
  left: var(--strand-space-4);
  z-index: 200;
  transform: translateY(calc(-100% - var(--strand-space-8)));
  display: inline-block;
  padding: var(--strand-space-2) var(--strand-space-4);
  background: var(--strand-surface-elevated);
  color: var(--strand-blue-deep);
  border: 1px solid var(--strand-blue-primary);
  border-radius: var(--strand-radius-md);
  box-shadow: var(--strand-shadow-md, 0 4px 12px rgba(15, 25, 42, 0.12));
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  line-height: var(--strand-leading-normal);
  text-decoration: none;
}

.strand-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--strand-blue-primary);
  outline-offset: 2px;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.strand-slider__field {
  width: 100%;
  min-height: var(--strand-touch-target);
  height: var(--strand-touch-target);
  appearance: none;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.strand-slider__field::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
}

.strand-slider__field::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  background: var(--strand-blue-primary);
  border: none;
  border-radius: var(--strand-radius-full);
  cursor: pointer;
  box-shadow: var(--strand-elevation-1);
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-slider__field:hover:not(:disabled)::-webkit-slider-thumb {
  background: var(--strand-blue-vivid);
  transform: scale(1.15);
}

.strand-slider__field:active:not(:disabled)::-webkit-slider-thumb {
  background: var(--strand-blue-deep);
  transform: scale(1.05);
}

.strand-slider__field::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--strand-blue-primary);
  border: none;
  border-radius: var(--strand-radius-full);
  cursor: pointer;
  box-shadow: var(--strand-elevation-1);
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-slider__field:hover:not(:disabled)::-moz-range-thumb {
  background: var(--strand-blue-vivid);
  transform: scale(1.15);
}

.strand-slider__field:active:not(:disabled)::-moz-range-thumb {
  background: var(--strand-blue-deep);
  transform: scale(1.05);
}

.strand-slider__field::-moz-range-track {
  height: 6px;
  background: var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
}

.strand-slider__field:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--strand-surface-elevated), 0 0 0 4px var(--strand-blue-primary);
}

.strand-slider__field:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--strand-surface-elevated), 0 0 0 4px var(--strand-blue-primary);
}

.strand-slider--disabled {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-slider--disabled .strand-slider__field {
  cursor: not-allowed;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.strand-spinner__ring {
  display: block;
  border: 2px solid var(--strand-gray-200);
  border-top-color: var(--strand-blue-primary);
  border-radius: var(--strand-radius-full);
  animation: strand-spinner-rotate 0.8s linear infinite;
}

.strand-spinner--sm .strand-spinner__ring {
  width: 16px;
  height: 16px;
}

.strand-spinner--md .strand-spinner__ring {
  width: 20px;
  height: 20px;
}

.strand-spinner--lg .strand-spinner__ring {
  width: 32px;
  height: 32px;
}

@keyframes strand-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strand-spinner__ring {
    animation: none;
    border-style: dotted;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-stack {
  display: flex;
  max-width: 100%;
  box-sizing: border-box;
}

.strand-stack > * {
  min-width: 0;
}

.strand-stack--vertical {
  flex-direction: column;
}

.strand-stack--horizontal {
  flex-direction: row;
}

.strand-stack--align-start {
  align-items: flex-start;
}

.strand-stack--align-center {
  align-items: center;
}

.strand-stack--align-end {
  align-items: flex-end;
}

.strand-stack--justify-start {
  justify-content: flex-start;
}

.strand-stack--justify-center {
  justify-content: center;
}

.strand-stack--justify-end {
  justify-content: flex-end;
}

.strand-stack--justify-between {
  justify-content: space-between;
}

.strand-stack--justify-around {
  justify-content: space-around;
}

.strand-stack--wrap {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .strand-stack--horizontal.strand-stack--responsive {
    flex-direction: column;
    align-items: center;
  }

  .strand-stack--responsive > .strand-btn {
    width: 100%;
    max-width: 280px;
  }
}

.strand-stack--gap-0 {
  gap: 0;
}

.strand-stack--gap-1 {
  gap: var(--strand-space-1);
}

.strand-stack--gap-2 {
  gap: var(--strand-space-2);
}

.strand-stack--gap-3 {
  gap: var(--strand-space-3);
}

.strand-stack--gap-4 {
  gap: var(--strand-space-4);
}

.strand-stack--gap-5 {
  gap: var(--strand-space-5);
}

.strand-stack--gap-6 {
  gap: var(--strand-space-6);
}

.strand-stack--gap-8 {
  gap: var(--strand-space-8);
}

.strand-stack--gap-10 {
  gap: var(--strand-space-10);
}

.strand-stack--gap-12 {
  gap: var(--strand-space-12);
}

.strand-stack--gap-16 {
  gap: var(--strand-space-16);
}

.strand-stack--gap-20 {
  gap: var(--strand-space-20);
}

.strand-stack--gap-24 {
  gap: var(--strand-space-24);
}

.strand-stack--gap-32 {
  gap: var(--strand-space-32);
}

.strand-stack--gap-40 {
  gap: var(--strand-space-40);
}

.strand-stack--gap-48 {
  gap: var(--strand-space-48);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-star-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  color: var(--strand-gray-900);
  line-height: 1;
}

.strand-star-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--strand-gray-200);
  border-radius: var(--strand-radius-sm);
  transition:
    color var(--strand-duration-fast) var(--strand-ease-out-quart),
    transform var(--strand-duration-fast) var(--strand-ease-out-quart);
  min-width: var(--strand-touch-target);
  min-height: var(--strand-touch-target);
  font-family: inherit;
}

.strand-star-rating__star--active {
  color: var(--strand-amber-caution);
}

.strand-star-rating__star:hover .strand-star-rating__glyph,
.strand-star-rating__star:focus-visible .strand-star-rating__glyph {
  transform: scale(1.08);
}

.strand-star-rating__glyph {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  transition: transform var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-star-rating--sm {
  font-size: 1rem;
}

.strand-star-rating--sm .strand-star-rating__star {
  min-width: 32px;
  min-height: 32px;
}

.strand-star-rating--md {
  font-size: 1.5rem;
}

.strand-star-rating--lg {
  font-size: 2.25rem;
}

.strand-star-rating--lg .strand-star-rating__star {
  min-width: 56px;
  min-height: 56px;
}

.strand-star-rating--readonly .strand-star-rating__star {
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .strand-star-rating__star:hover .strand-star-rating__glyph,
  .strand-star-rating__star:focus-visible .strand-star-rating__glyph {
    transform: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--strand-space-6);
}

.strand-stat-strip--bordered {
  gap: 0;
  border: 1px solid var(--strand-stat-strip-border-color, var(--strand-gray-200));
  border-radius: var(--strand-radius-lg);
  overflow: clip;
}

.strand-stat-strip--bordered .strand-stat-strip__cell {
  padding: var(--strand-space-5);
  border-inline-start: 1px solid var(--strand-stat-strip-border-color, var(--strand-gray-200));
}

.strand-stat-strip--bordered .strand-stat-strip__cell:first-child {
  border-inline-start: none;
}

.strand-stat-strip__cell {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-2);
  min-inline-size: 0;
}

.strand-stat-strip__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-stat-strip-label-color, var(--strand-gray-500));
  line-height: var(--strand-leading-normal);
}

.strand-stat-strip__value {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-base);
  font-weight: var(--strand-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--strand-stat-strip-value-color, var(--strand-blue-midnight));
  overflow-wrap: anywhere;
}

.strand-stat-strip--bordered .strand-stat-strip__value {
  font-size: var(--strand-text-xl);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-wide);
  text-transform: uppercase;
  padding: var(--strand-space-1) var(--strand-space-2);
  border-radius: var(--strand-radius-sm);
  line-height: var(--strand-leading-normal);
}

.strand-status-chip > svg {
  flex: none;
}

.strand-status-chip--live {
  color: var(--strand-on-teal-tint);
  background: var(--strand-teal-tint);
}

.strand-status-chip--neutral {
  color: var(--strand-status-chip-neutral-color, var(--strand-gray-600));
  background: var(--strand-status-chip-neutral-bg, var(--strand-gray-tint));
  border: var(--strand-status-chip-neutral-border, none);
}

.strand-status-chip--accent {
  color: var(--strand-blue-deep);
  background: var(--strand-blue-tint);
}

.strand-status-chip--caution {
  color: var(--strand-on-amber-tint);
  background: var(--strand-amber-tint);
}

.strand-status-chip--committed {
  color: var(--strand-status-chip-committed-color, var(--strand-on-teal-tint));
  background: color-mix(in srgb, var(--strand-teal-vital) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--strand-teal-vital) 30%, transparent);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-step-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-space-8);
  height: var(--strand-space-8);
  border-radius: var(--strand-radius-full);
  background: var(--strand-blue-glow);
  color: var(--strand-step-indicator-color, var(--strand-blue-deep));
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-semibold);
  margin-bottom: var(--strand-space-3);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-steps-connected {
  position: relative;
}

.strand-steps-connected::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--strand-space-8);
  right: var(--strand-space-8);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--strand-blue-indicator) 20%, var(--strand-blue-indicator) 80%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.strand-steps-connected > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .strand-steps-connected::before {
    display: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.strand-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--strand-space-1);
  padding: 14px 14px 12px;
  border-radius: var(--strand-radius-md);
  border: 1px solid var(--strand-gray-200);
  min-height: 92px;
}

.strand-swatch__name {
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  font-weight: var(--strand-weight-medium);
}

.strand-swatch__hex {
  font-family: var(--strand-font-mono);
  font-size: 11px;
  opacity: 0.75;
  margin-top: auto;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  min-height: var(--strand-touch-target);
  cursor: pointer;
  user-select: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

.strand-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
  background: var(--strand-gray-200);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-switch__track:focus-visible {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
  outline: none;
}

.strand-switch__thumb {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-surface-elevated);
  box-shadow: var(--strand-elevation-1);
  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-switch__track[aria-checked="true"] {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-switch__track[aria-checked="true"] .strand-switch__thumb {
  transform: translateX(18px);
}

.strand-switch:hover .strand-switch__track:enabled {
  border-color: var(--strand-blue-indicator);
}

.strand-switch:hover .strand-switch__track:enabled[aria-checked="true"] {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

.strand-switch__label {
  color: var(--strand-switch-label-color, var(--strand-gray-900));
}

.strand-switch:has(.strand-switch__track:disabled) {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-switch__track:disabled {
  cursor: not-allowed;
}

@media (pointer: fine) {
  .strand-switch--compact {
    min-height: 30px;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: var(--strand-tabbar-justify, space-around);
  min-block-size: var(--strand-tabbar-height);
  padding-block-start: var(--strand-tabbar-pad-block-start, var(--strand-space-2));
  padding-inline: var(--strand-tabbar-pad-inline, var(--strand-space-4));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--strand-tabbar-bg, var(--strand-surface-elevated));
  border-block-start: 1px solid var(--strand-gray-200);
}

.strand-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--strand-tabbar-item-gap, var(--strand-space-1));
  min-inline-size: var(--strand-tabbar-item-size, 44px);
  min-block-size: 44px;
  padding-block: var(--strand-space-2);
  padding-inline: var(--strand-space-1);
  text-decoration: none;
  color: var(--strand-gray-500);
  transition: color var(--strand-duration-fast) ease;
}

.strand-tabbar__item[aria-current="page"] {
  color: var(--strand-blue-deep);
}

.strand-tabbar__item:hover {
  color: var(--strand-gray-700);
}

.strand-tabbar__item:focus-visible {
  outline: 2px solid var(--strand-blue-primary);
  outline-offset: -2px;
  border-radius: var(--strand-radius-md);
}

.strand-tabbar__icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.strand-tabbar__label {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-tabbar-label-size, var(--strand-text-xs));
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tabbar-label-tracking, var(--strand-tracking-wider));
  text-transform: uppercase;
  white-space: nowrap;
  line-height: var(--strand-leading-none);
  text-align: center;
  overflow-wrap: anywhere;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.strand-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.strand-table__th {
  padding: var(--strand-space-3) var(--strand-space-4);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-gray-500);
  text-align: left;
  border-bottom: 1px solid var(--strand-gray-200);
  white-space: nowrap;
}

.strand-table__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.strand-table__sort-btn:hover {
  color: var(--strand-gray-600);
}

.strand-table__sort-indicator {
  font-size: var(--strand-text-xs);
  opacity: 0.6;
}

.strand-table__caption {
  padding: var(--strand-space-2) var(--strand-space-4);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  color: var(--strand-gray-500);
  text-align: start;
  caption-side: top;
}

.strand-table__td {
  padding: var(--strand-space-3) var(--strand-space-4);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-600);
  border-bottom: 1px solid var(--strand-gray-200);
}

.strand-table__row--empty .strand-table__td {
  text-align: center;
  color: var(--strand-gray-500);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
}

.strand-table__row {
  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-table__row:hover {
  background: var(--strand-blue-glow);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-tabs [role="tablist"] {
  display: flex;
  gap: var(--strand-space-1);
  border-bottom: 1px solid var(--strand-gray-200);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  flex-wrap: nowrap;
}

.strand-tabs [role="tablist"]::-webkit-scrollbar {
  display: none;
}

.strand-tabs__tab {
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: var(--strand-space-2) var(--strand-space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-tabs-tab-color, var(--strand-gray-500));
  cursor: pointer;
  transition:
    color var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-expo);
}

.strand-tabs__tab:hover {
  color: var(--strand-tabs-tab-hover-color, var(--strand-gray-600));
}

.strand-tabs__tab:active {
  color: var(--strand-tabs-tab-pressed-color, var(--strand-gray-700));
}

.strand-tabs__tab[aria-selected="true"] {
  color: var(--strand-tabs-tab-active-color, var(--strand-blue-deep));
  border-bottom-color: var(--strand-tabs-tab-active-border-color, var(--strand-blue-primary));
}

.strand-tabs--instrument [role="tablist"] {
  justify-content: safe center;
  gap: 0;
  border-bottom: 1px solid var(--strand-surface-subtle);
}

.strand-tabs--instrument .strand-tabs__tab {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-tabs-tab-color, var(--strand-gray-600));
  padding: var(--strand-space-3) var(--strand-space-6);
}

.strand-tabs--instrument .strand-tabs__tab[aria-selected="true"] {
  color: var(--strand-tabs-tab-active-color, var(--strand-blue-midnight));
  border-bottom-color: var(--strand-tabs-tab-active-border-color, var(--strand-blue-primary));
}

.strand-tabs [role="tabpanel"] {
  padding: var(--strand-space-4) 0;
}

@keyframes strand-tabs-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.strand-tabs__panel--reveal {
  animation: strand-tabs-reveal var(--strand-duration-normal) var(--strand-ease-out-expo) both;
}

@media (prefers-reduced-motion: reduce) {
  .strand-tabs__panel--reveal {
    animation: none;
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  padding: var(--strand-space-1) var(--strand-space-2);
  border-radius: var(--strand-radius-sm);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  line-height: var(--strand-leading-snug);
  white-space: nowrap;
  border: 1px solid transparent;
}

.strand-tag--solid.strand-tag--default {
  background: var(--strand-surface-recessed);
  color: var(--strand-gray-600);
}

.strand-tag--solid.strand-tag--teal {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-teal-tint);
}

.strand-tag--solid.strand-tag--blue {
  background: var(--strand-blue-glow);
  color: var(--strand-blue-deep);
}

.strand-tag--solid.strand-tag--amber {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-amber-tint);
}

.strand-tag--solid.strand-tag--red {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-red-tint);
}

.strand-tag--outlined {
  background: transparent;
}

.strand-tag--outlined.strand-tag--default {
  border-color: var(--strand-gray-200);
  color: var(--strand-gray-600);
}

.strand-tag--outlined.strand-tag--teal {
  border-color: var(--strand-teal-vital);
  color: var(--strand-on-teal-tint);
}

.strand-tag--outlined.strand-tag--blue {
  border-color: var(--strand-blue-primary);
  color: var(--strand-blue-deep);
}

.strand-tag--outlined.strand-tag--amber {
  border-color: var(--strand-amber-caution);
  color: var(--strand-on-amber-tint);
}

.strand-tag--outlined.strand-tag--red {
  border-color: var(--strand-red-alert);
  color: var(--strand-on-red-tint);
}

.strand-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--strand-radius-sm);
  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-tag__remove:hover {
  opacity: 1;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-textarea {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-md);
  transition:
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-textarea:focus-within {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

.strand-textarea__field {
  width: 100%;
  min-height: 80px;
  padding: var(--strand-space-3) var(--strand-space-4);
  background: transparent;
  border: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-base);
  color: var(--strand-gray-900);
  outline: none;
  resize: vertical;
  line-height: var(--strand-leading-normal);
}

.strand-textarea__field::placeholder {
  color: var(--strand-gray-500);
}

.strand-textarea--auto-resize .strand-textarea__field {
  resize: none;
  overflow: hidden;
}

.strand-textarea__count {
  align-self: flex-end;
  padding: var(--strand-space-1) var(--strand-space-3) var(--strand-space-2);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  color: var(--strand-gray-500);
}

.strand-textarea--error {
  border-color: var(--strand-red-alert);
}

.strand-textarea--error:focus-within {
  border-color: var(--strand-red-alert);
  box-shadow: var(--strand-focus-ring-error);
}

.strand-textarea--disabled {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-textarea--disabled .strand-textarea__field {
  cursor: not-allowed;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-toast__container {
  position: fixed;
  right: var(--strand-space-6);
  bottom: var(--strand-space-6);
  z-index: 1100;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--strand-space-3);
  pointer-events: none;
}

.strand-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 280px;
  max-width: 420px;
  padding: var(--strand-space-4) var(--strand-space-5);
  background: var(--strand-surface-elevated);
  border-radius: var(--strand-radius-lg);
  box-shadow: var(--strand-elevation-3);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  pointer-events: auto;
  animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
}

.strand-toast__status {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-semibold);
  letter-spacing: var(--strand-tracking-wider);
  text-transform: uppercase;
  margin-right: var(--strand-space-3);
  flex-shrink: 0;
}

.strand-toast--info .strand-toast__status {
  color: var(--strand-blue-deep);
}

.strand-toast--success .strand-toast__status {
  color: var(--strand-on-teal-tint);
}

.strand-toast--warning .strand-toast__status {
  color: var(--strand-on-amber-tint);
}

.strand-toast--error .strand-toast__status {
  color: var(--strand-red-alert-deep);
}

.strand-toast__message {
  flex: 1;
  min-width: 0;
  color: var(--strand-gray-900);
}

.strand-toast__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-space-6);
  height: var(--strand-space-6);
  margin-left: var(--strand-space-3);
  padding: 0;
  border: none;
  border-radius: var(--strand-radius-md);
  background: transparent;
  color: var(--strand-gray-500);
  font-size: var(--strand-text-base);
  cursor: pointer;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    color var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-toast__dismiss:hover {
  background: var(--strand-gray-200);
  color: var(--strand-gray-600);
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-token-specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--strand-space-5);
}

.strand-token-specimen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--strand-gray-500);
  line-height: 1.5;
}

.strand-token-specimen b {
  display: block;
  font-weight: var(--strand-weight-medium);
  color: var(--strand-blue-midnight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}

.strand-token-specimen > span {
  display: block;
  line-height: 1.5;
}

.strand-token-specimen__spacer {
  display: block;
  height: 16px;
  background: var(--strand-blue-primary);
  border-radius: var(--strand-radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.strand-token-specimen__box {
  width: 64px;
  height: 64px;
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-200);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-tooltip__wrapper {
  position: relative;
  display: inline-flex;
  contain: layout;
}

.strand-tooltip {
  position: absolute;
  z-index: 1200;
  padding: var(--strand-space-1) var(--strand-space-2);
  background: var(--strand-gray-900);
  color: var(--strand-on-blue-primary);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  border-radius: var(--strand-radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-tooltip--visible {
  opacity: 1;
}

.strand-tooltip--top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--strand-space-2);
}

.strand-tooltip--bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--strand-space-2);
}

.strand-tooltip--left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--strand-space-2);
}

.strand-tooltip--right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--strand-space-2);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-type-specimen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--strand-space-3);
  padding: var(--strand-space-5) 0;
  border-top: 1px dashed var(--strand-gray-200);
}

.strand-type-specimen:first-child {
  border-top: 0;
  padding-top: 0;
}

.strand-type-specimen__meta {
  display: block;
  font-family: var(--strand-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--strand-gray-500);
  line-height: 1.5;
}

.strand-type-specimen__meta b {
  color: var(--strand-blue-deep);
  font-weight: var(--strand-weight-medium);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-viewport--frosted {
  background: var(--strand-glass-bg);
  -webkit-backdrop-filter: blur(var(--strand-glass-blur));
  backdrop-filter: blur(var(--strand-glass-blur));
  border: 1px solid var(--strand-glass-border);
  border-radius: var(--strand-radius-lg);
  box-shadow: var(--strand-shadow-inset);
  padding: var(--strand-space-6);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-viewport-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient( ellipse 70% 60% at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 45%, rgba(15, 25, 42, 0.35) 100% );
  transition: background-position 0.15s ease;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-overline {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-ultra);
  text-transform: uppercase;
  color: var(--strand-overline-color, var(--strand-gray-500));
  line-height: var(--strand-leading-normal);
}

.strand-overline--accent {
  color: var(--strand-overline-accent-color, var(--strand-blue-deep));
}

.strand-overline--pulse {
  position: relative;
  padding-left: var(--strand-space-4);
  display: inline-block;
}

.strand-overline--pulse::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-blue-primary);
  animation: strand-overline-pulse 2s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-overline-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.strand-headline {
  font-family: var(--strand-font-mono);
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
  color: var(--strand-headline-color, var(--strand-blue-midnight));
  line-height: var(--strand-leading-tight);
}

.strand-headline--xl {
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  letter-spacing: 0.35em;
}

.strand-headline--lg {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  letter-spacing: var(--strand-tracking-tighter);
}

.strand-headline--gradient {
  background: linear-gradient(180deg, var(--strand-gray-900) 0%, var(--strand-blue-midnight) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.strand-title {
  font-family: var(--strand-font-sans);
  font-weight: var(--strand-weight-light);
  letter-spacing: var(--strand-tracking-tighter);
  color: var(--strand-title-color, var(--strand-blue-midnight));
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  line-height: var(--strand-leading-snug);
}

.strand-lead {
  font-size: var(--strand-text-lg);
  color: var(--strand-lead-color, var(--strand-gray-500));
  max-width: 50ch;
  line-height: var(--strand-leading-relaxed);
}

.strand-text-secondary {
  font-size: var(--strand-text-sm);
  color: var(--strand-text-secondary-color, var(--strand-gray-500));
  line-height: var(--strand-leading-relaxed);
}

.strand-text-secondary strong {
  color: var(--strand-gray-700);
}

.strand-text-secondary a {
  color: var(--strand-blue-deep);
  text-decoration: none;
}

.strand-text-secondary a:hover {
  text-decoration: underline;
}

.strand-text-secondary--xs {
  font-size: var(--strand-text-xs);
  color: var(--strand-text-secondary-xs-color, var(--strand-text-secondary-color, var(--strand-gray-500)));
}

.strand-font-mono {
  font-family: var(--strand-font-mono);
}

.strand-text-sm {
  font-size: var(--strand-text-sm);
}

.strand-text-xs {
  font-size: var(--strand-text-xs);
}

.strand-break-anywhere {
  overflow-wrap: anywhere;
}

.strand-nowrap {
  white-space: nowrap;
}

.strand-value {
  font-variant-numeric: tabular-nums;
}

.strand-value--positive {
  color: var(--strand-value-positive-color, var(--strand-green-positive-deep)) !important;
}

.strand-value--negative {
  color: var(--strand-value-negative-color, var(--strand-red-alert-deep)) !important;
}

.strand-text-center {
  text-align: center;
}

.strand-code-name {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-base);
  font-weight: var(--strand-weight-semibold);
  color: var(--strand-blue-midnight);
  margin: 0;
}

.strand-heading--sm {
  font-size: var(--strand-text-lg);
  font-weight: var(--strand-weight-medium);
  color: var(--strand-heading-sm-color, var(--strand-gray-800));
  margin: 0;
}

.strand-headline--mono {
  font-family: var(--strand-font-mono);
  font-weight: var(--strand-weight-medium);
  text-transform: none;
  letter-spacing: var(--strand-tracking-tight);
}

.strand-headline--md {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  letter-spacing: var(--strand-tracking-tight);
}

.strand-code-inline {
  font-family: var(--strand-font-mono);
  font-size: 0.875em;
  color: var(--strand-blue-deep);
  background: var(--strand-surface-recessed);
  padding: 0.125em 0.375em;
  border-radius: var(--strand-radius-sm);
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-nav-offset {
  padding-top: var(--strand-space-16);
}

.strand-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.strand-block {
  display: block;
}

.strand-flex-1 {
  flex: 1;
}

.strand-flex-none {
  flex: none;
}

.strand-contents {
  display: contents;
}

.strand-min-w-0 {
  min-width: 0;
}

.strand-full-width {
  width: 100%;
}

.strand-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strand-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.strand-scroll-row::-webkit-scrollbar {
  display: none;
}

.strand-scroll-row > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.strand-scroll-col {
  overflow-y: auto;
  overflow-x: visible;
  max-height: var(--strand-scroll-col-h, 22rem);
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.strand-sticky {
  position: sticky;
  inset-block-start: var(--strand-sticky-top, var(--strand-space-6));
  z-index: 1;
}

@media (max-width: 767.98px) {
  .strand-tabbar-offset {
    padding-block-end: calc( var(--strand-tabbar-height) + env(safe-area-inset-bottom, 0px) );
  }
}

@media (min-width: 768px) {
  .strand-hide-from-md {
    display: none;
  }
}

.strand-mt-1 {
  margin-top: var(--strand-space-1);
}

.strand-mt-2 {
  margin-top: var(--strand-space-2);
}

.strand-mt-3 {
  margin-top: var(--strand-space-3);
}

.strand-mt-4 {
  margin-top: var(--strand-space-4);
}

.strand-mt-5 {
  margin-top: var(--strand-space-5);
}

.strand-mt-6 {
  margin-top: var(--strand-space-6);
}

.strand-mt-8 {
  margin-top: var(--strand-space-8);
}

.strand-mb-1 {
  margin-bottom: var(--strand-space-1);
}

.strand-mb-2 {
  margin-bottom: var(--strand-space-2);
}

.strand-mb-3 {
  margin-bottom: var(--strand-space-3);
}

.strand-mb-4 {
  margin-bottom: var(--strand-space-4);
}

.strand-mb-5 {
  margin-bottom: var(--strand-space-5);
}

.strand-mb-6 {
  margin-bottom: var(--strand-space-6);
}

.strand-mb-8 {
  margin-bottom: var(--strand-space-8);
}

.strand-mx-auto {
  margin-inline: auto;
}

.strand-m-0 {
  margin: 0;
}

.strand-pt-3 {
  padding-top: var(--strand-space-3);
}

.strand-py-2 {
  padding-block: var(--strand-space-2);
}

.strand-py-3 {
  padding-block: var(--strand-space-3);
}

.strand-italic {
  font-style: italic;
}

.strand-list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.strand-embed-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.strand-embed-16x9 > iframe,
.strand-embed-16x9 > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.strand-stretch-link-host {
  position: relative;
  cursor: pointer;
}

.strand-stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.strand-surface-light {
  --strand-alert-bg: initial;
  --strand-alert-color: var(--strand-gray-700);
  --strand-alert-dismiss-color: initial;
  --strand-alert-dismiss-hover-bg: initial;
  --strand-alert-dismiss-hover-color: var(--strand-gray-500);
  --strand-alert-error-status-color: initial;
  --strand-alert-info-status-color: initial;
  --strand-alert-success-status-color: initial;
  --strand-alert-warning-status-color: initial;
  --strand-bar-chart-amount-color: initial;
  --strand-bar-chart-label-color: initial;
  --strand-big-mono-time-color: initial;
  --strand-big-mono-time-sep-color: initial;
  --strand-btn-ghost-border-color: initial;
  --strand-btn-ghost-color: initial;
  --strand-checkbox-label-color: initial;
  --strand-data-readout-label-color: initial;
  --strand-data-readout-value-color: initial;
  --strand-form-field-hint-color: initial;
  --strand-form-field-label-color: initial;
  --strand-heading-sm-color: initial;
  --strand-headline-color: initial;
  --strand-kv-label-color: initial;
  --strand-kv-value-color: initial;
  --strand-kv-value-status-color: var(--strand-gray-700);
  --strand-lead-color: initial;
  --strand-link-color: initial;
  --strand-link-mono-color: var(--strand-blue-deep);
  --strand-link-mono-hover-color: initial;
  --strand-link-underline: initial;
  --strand-log-text-color: initial;
  --strand-log-text-strong-color: initial;
  --strand-log-time-color: initial;
  --strand-overline-accent-color: initial;
  --strand-overline-color: initial;
  --strand-progress-track-color: initial;
  --strand-radio-label-color: initial;
  --strand-stat-strip-border-color: initial;
  --strand-stat-strip-label-color: initial;
  --strand-stat-strip-value-color: initial;
  --strand-status-chip-committed-color: initial;
  --strand-status-chip-neutral-bg: initial;
  --strand-status-chip-neutral-border: initial;
  --strand-status-chip-neutral-color: initial;
  --strand-switch-label-color: initial;
  --strand-text-secondary-color: initial;
  --strand-text-secondary-xs-color: var(--strand-gray-500);
  --strand-title-color: initial;
  --strand-value-negative-color: initial;
  --strand-value-positive-color: initial;
}

/*! Strand UI | MIT License | dillingerstaffing.com */

.strand-static {
  pointer-events: none;
}

.strand-static [disabled],
.strand-static [aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

.strand-static .strand-btn:disabled {
  opacity: 1;
  cursor: default;
}

.strand-static .strand-toast {
  position: static;
}

.strand-static .strand-tooltip {
  position: static;
}

.strand-static *,
.strand-static *::before,
.strand-static *::after {
  transition: none !important;
  animation: none !important;
}