.tds-lap-picker {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
}

.tds-lap-picker__trigger {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tds-spacing-xs) var(--tds-spacing-sm);
  max-width: 100%;
  padding: var(--tds-spacing-xs) var(--tds-spacing-sm);
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-sm);
  background: var(--tds-bg-surface);
  color: var(--tds-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.tds-lap-picker__trigger:hover, .tds-lap-picker__trigger:focus-visible {
  border-color: var(--tds-accent);
}
.tds-lap-picker__trigger:focus-visible {
  outline: 2px solid var(--tds-accent);
  outline-offset: 2px;
}
.tds-lap-picker__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.tds-lap-picker__trigger-caption {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-sm);
}

.tds-lap-picker__trigger-value {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}

.tds-lap-picker__scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: transparent;
}

.tds-lap-picker__popup {
  position: absolute;
  inset-block-start: calc(100% + var(--tds-spacing-xs));
  inset-inline-start: 0;
  z-index: 901;
  display: flex;
  flex-direction: column;
  gap: var(--tds-spacing-sm);
  box-sizing: border-box;
  width: max-content;
  max-width: min(28rem, 100vw - 2 * var(--tds-spacing-md));
  padding: var(--tds-spacing-sm);
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-md);
  background: var(--tds-bg-elevated);
  color: var(--tds-text-primary);
  box-shadow: 0 10px 28px 0 var(--tds-shadow-color);
}

.tds-lap-picker__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tds-spacing-xs) var(--tds-spacing-sm);
  min-width: 0;
}

.tds-lap-picker__title {
  font-weight: 600;
}

.tds-lap-picker__reference {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-sm);
  overflow-wrap: anywhere;
}

.tds-lap-picker__close {
  margin-inline-start: auto;
  padding: 0 var(--tds-spacing-xs);
  border: 1px solid transparent;
  border-radius: var(--tds-radius-sm);
  background: transparent;
  color: var(--tds-text-secondary);
  font: inherit;
  cursor: pointer;
}
.tds-lap-picker__close:hover, .tds-lap-picker__close:focus-visible {
  border-color: var(--tds-border-default);
  color: var(--tds-text-primary);
}

.tds-lap-picker__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-spacing-xs) var(--tds-spacing-sm);
  min-width: 0;
}

.tds-lap-picker__search {
  flex: 1 1 8rem;
  min-width: 0;
}

.tds-lap-picker__order {
  display: inline-flex;
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-sm);
  overflow: hidden;
}

.tds-lap-picker__order-option {
  padding: var(--tds-spacing-xs) var(--tds-spacing-sm);
  border: 0;
  background: transparent;
  color: var(--tds-text-secondary);
  font: inherit;
  font-size: var(--tds-font-size-sm);
  cursor: pointer;
}
.tds-lap-picker__order-option[aria-pressed=true] {
  background: var(--tds-accent-subtle);
  color: var(--tds-accent-text);
  font-weight: 600;
}
.tds-lap-picker__order-option:focus-visible {
  outline: 2px solid var(--tds-accent);
  outline-offset: -2px;
}

.tds-lap-picker__full {
  display: inline-flex;
  align-items: center;
  gap: var(--tds-spacing-xs);
  font-size: var(--tds-font-size-sm);
}

.tds-lap-picker__definition {
  flex-basis: 100%;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-xs);
}

.tds-lap-picker__empty {
  margin: 0;
  color: var(--tds-text-secondary);
}

.tds-lap-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(22rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tds-lap-picker__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "number time delta" "marks  marks marks";
  align-items: baseline;
  gap: 0 var(--tds-spacing-sm);
  padding: var(--tds-spacing-xs) var(--tds-spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--tds-radius-sm);
  cursor: pointer;
}
.tds-lap-picker__option:hover {
  background: var(--tds-bg-surface);
}
.tds-lap-picker__option:focus-visible, .tds-lap-picker__option.tds-lap-picker__option--active {
  outline: 2px solid var(--tds-accent);
  outline-offset: -2px;
}

.tds-lap-picker__option--selected {
  border-color: var(--tds-accent-border);
  background: var(--tds-accent-subtle);
}

.tds-lap-picker__option--unavailable {
  cursor: not-allowed;
  color: var(--tds-text-secondary);
}
.tds-lap-picker__option--unavailable:hover {
  background: transparent;
}

.tds-lap-picker__number {
  grid-area: number;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.tds-lap-picker__time,
.tds-lap-picker__delta {
  font-family: var(--ghostai-font-numeric);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tds-lap-picker__option .tds-lap-picker__time {
  grid-area: time;
}

.tds-lap-picker__delta {
  grid-area: delta;
  text-align: end;
}

.tds-lap-picker__delta--loss {
  color: var(--tds-error-text);
}

.tds-lap-picker__delta--gain {
  color: var(--tds-success-text);
}

.tds-lap-picker__delta--even,
.tds-lap-picker__delta--none {
  color: var(--tds-text-secondary);
}

.tds-lap-picker__marks {
  grid-area: marks;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-spacing-xs);
  min-width: 0;
}
.tds-lap-picker__marks:empty {
  display: none;
}

.tds-lap-picker__mark {
  padding: 0 var(--tds-spacing-xs);
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-sm);
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-xs);
  overflow-wrap: anywhere;
}

.tds-lap-picker__mark--best {
  border-color: var(--tds-accent-border);
  color: var(--tds-accent-text);
}

.tds-lap-picker__mark--partial,
.tds-lap-picker__mark--unknown {
  border-color: var(--tds-warning-border);
  color: var(--tds-warning-text);
}

.tds-lap-picker__mark--invalid {
  border-color: var(--tds-error-border);
  color: var(--tds-error-text);
}

@media (max-width: 480px) {
  .tds-lap-picker__popup {
    position: fixed;
    inset-block-start: auto;
    inset-block-end: var(--tds-spacing-sm);
    inset-inline: var(--tds-spacing-sm);
    width: auto;
    max-width: none;
    max-height: calc(100vh - 2 * var(--tds-spacing-lg));
  }
  .tds-lap-picker__list {
    max-height: min(22rem, 45vh);
  }
}
.tds-lap-picker__mark--unavailable {
  border-color: var(--tds-warning-border);
  color: var(--tds-warning-text);
}

.tds-lap-picker-x {
  display: flex;
  flex-direction: column;
  gap: var(--tds-spacing-sm);
  min-width: 0;
  max-width: 100%;
}

.tds-lap-picker-x__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tds-spacing-xs) var(--tds-spacing-sm);
  min-width: 0;
}

.tds-lap-picker-x__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-spacing-xs);
  min-width: 0;
}

.tds-lap-picker-x__quick-item {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.tds-lap-picker-x__quick-item .tds-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.tds-lap-picker-x__why {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-xs);
  overflow-wrap: anywhere;
}

.tds-lap-picker-x__strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 2.75rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tds-lap-picker-x__bar {
  flex: 1 0 3px;
  min-width: 3px;
  max-width: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--tds-radius-sm);
  background: var(--tds-border-strong);
  cursor: pointer;
}
.tds-lap-picker-x__bar:hover:not(:disabled) {
  background: var(--tds-text-secondary);
}
.tds-lap-picker-x__bar:focus-visible {
  outline: 2px solid var(--tds-border-focus);
  outline-offset: 1px;
}
.tds-lap-picker-x__bar:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tds-lap-picker-x__bar--incomplete {
  background: transparent;
  border: 1px dashed var(--tds-warning-border);
}

.tds-lap-picker-x__bar--selected,
.tds-lap-picker-x__bar--selected:hover:not(:disabled) {
  background: var(--tds-accent);
}

.tds-reference-picker {
  display: flex;
  flex-direction: column;
  gap: var(--tds-spacing-xs);
  min-width: 0;
  max-width: 100%;
}

.tds-reference-picker__label {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-sm);
  font-weight: 600;
}

.tds-reference-picker__scopes,
.tds-reference-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-spacing-xs);
  min-width: 0;
}

.tds-reference-picker__scope,
.tds-reference-picker__item {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.tds-reference-picker__chip {
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}

.tds-reference-picker__time {
  font-family: var(--ghostai-font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.tds-reference-picker__mark {
  padding: 0 var(--tds-spacing-xs);
  border: 1px solid var(--tds-accent-border);
  border-radius: var(--tds-radius-sm);
  color: var(--tds-accent-text);
  font-size: var(--tds-font-size-xs);
  font-weight: 600;
}

.tds-reference-picker__note {
  margin: 0;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-sm);
  overflow-wrap: anywhere;
}

.tds-reference-picker__note--warning {
  color: var(--tds-warning-text);
}

.tds-reference-picker__note--error {
  color: var(--tds-error-text);
}

.tds-reference-picker__retry {
  margin-inline-start: var(--tds-spacing-sm);
  padding: 0 var(--tds-spacing-sm);
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-sm);
  background: transparent;
  color: var(--tds-text-primary);
  font: inherit;
  cursor: pointer;
}
.tds-reference-picker__retry:focus-visible {
  outline: 2px solid var(--tds-border-focus);
  outline-offset: 2px;
}

.tds-reference-picker__unavailable {
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-sm);
}
.tds-reference-picker__unavailable > summary {
  cursor: pointer;
}

.tds-reference-picker__unavailable-list {
  display: flex;
  flex-direction: column;
  gap: var(--tds-spacing-xs);
  margin: var(--tds-spacing-xs) 0 0;
  padding: 0;
  list-style: none;
}

.tds-reference-picker__unavailable-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--tds-spacing-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.tds-reference-picker__availability {
  padding: 0 var(--tds-spacing-xs);
  border: 1px solid var(--tds-border-default);
  border-radius: var(--tds-radius-sm);
  font-size: var(--tds-font-size-xs);
}

.tds-reference-picker__why {
  flex-basis: 100%;
  color: var(--tds-text-secondary);
  font-size: var(--tds-font-size-xs);
  overflow-wrap: anywhere;
}
