/* Registered so a rail can transition it; see .tooltip. */
@property --tooltip-delay {
  syntax: "<time>";
  inherits: true;
  initial-value: 500ms;
}

@layer components {
  .pending-claims {
    display: grid;
    gap: 1rem;
    max-inline-size: 40rem;

    & > h2 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: var(--leading-tight);
    }
  }

  .pending-claims__item {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    & > h3 {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: var(--text-sm--line-height);
    }

    & > .inspector {
      margin: 0;
      font-size: var(--text-sm);
    }
  }

  .pending-claims__actions {
    display: grid;
    gap: 1rem;
    justify-items: start;
  }

  .pending-claims__reject {
    justify-self: stretch;
    justify-items: start;

    & > .field {
      justify-self: stretch;
    }
  }

  .space-switcher {
    position: relative;
    z-index: 1;
  }

  .space-switcher[data-state="open"] {
    z-index: 20;
  }

  .space-switcher__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--sidebar-foreground);
    text-align: start;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;

    &:hover {
      background: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: 2px;
    }
  }

  .space-switcher[data-state="open"] .space-switcher__trigger {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
  }

  .space-switcher__logo,
  .menu__item-logo {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
  }

  .space-switcher__logo svg,
  .space-switcher__chevrons svg,
  .menu__item-logo svg {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .menu__item-logo {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    color: var(--foreground);
  }

  .menu__item-logo--muted {
    background: transparent;
    color: var(--muted-foreground);
  }

  .menu__item-logo svg {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .space-switcher__meta,
  .menu__item-text {
    display: grid;
    flex: 1;
    min-inline-size: 0;
    line-height: var(--leading-tight);
  }

  .space-switcher__name,
  .menu__item-name {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .space-switcher__account,
  .menu__item-account {
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .space-switcher__chevrons {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    margin-inline-start: auto;
    color: var(--muted-foreground);
  }

  .menu {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 0;
    z-index: 50;
    gap: 0.25rem;
    inline-size: max(100%, 14rem);
    min-inline-size: 14rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 8px 24px oklch(0 0 0 / 12%);
    transform-origin: top left;
    transition: opacity 150ms ease-out, transform 150ms ease-out;

    &[hidden] {
      display: none;
    }

    &:not([hidden]) {
      display: grid;

      @starting-style {
        opacity: 0;
        transform: scale(0.95);
      }
    }
  }

  .action-menu {
    position: relative;
  }

  .action-menu__panel {
    position: fixed;
    inset: auto;
    margin: 0;
    inline-size: max-content;
    max-inline-size: calc(100vw - 2rem);
    transform-origin: top right;

    .button-form {
      display: flex;
    }

    .menu__item {
      justify-content: start;
    }
  }

  .menu__label {
    margin: 0;
    padding: 0.5rem 0.5rem 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    line-height: var(--text-xs--line-height);
    text-transform: uppercase;
  }

  .menu__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--popover-foreground);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    &:hover {
      background: var(--accent);
      color: var(--accent-foreground);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .menu__item--current {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  .space-switcher .menu__list .menu__item {
    min-block-size: 3.5rem;
  }

  .menu__shortcut {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.125rem;
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);

    kbd {
      font: inherit;
    }
  }

  .menu__separator {
    block-size: 1px;
    margin-block: 0.25rem;
    margin-inline: 0.25rem;
    background: var(--border);
  }

  .popover {
    z-index: 50;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    box-shadow: 0 12px 32px oklch(0 0 0 / 14%), 0 2px 6px oklch(0 0 0 / 6%);
    transition: opacity 150ms ease-out, transform 150ms ease-out;

    &[hidden] {
      display: none;
    }

    &:not([hidden], [popover]),
    &:popover-open {
      display: grid;

      @starting-style {
        opacity: 0;
        transform: scale(0.95);
      }
    }

    /* A native popover hangs below the button that opens it and grows out of
       it; display and overlay stay discrete so closing animates too. */
    &[popover] {
      max-block-size: calc(100dvh - 2rem);
      overflow-y: auto;
      transform-origin: top right;
      transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
        display 200ms allow-discrete, overlay 200ms allow-discrete;

      &:not(:popover-open) {
        opacity: 0;
        transform: scale(0.95);
      }

      @supports (position-area: block-end) {
        margin: 0.25rem 0 0;
        position-area: block-end span-inline-start;
        position-try-fallbacks: flip-block, flip-inline;
      }

      /* A bottom sheet on a narrow screen. */
      @media (width < 40rem) {
        inset: auto 0 0;
        inline-size: 100%;
        max-inline-size: none;
        max-block-size: 85dvh;
        margin: 0;
        position-area: none;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        padding-block-end: max(1rem, env(safe-area-inset-bottom));
        transform-origin: bottom center;

        &::backdrop {
          background: oklch(0 0 0 / 30%);
        }
      }
    }
  }

  /* shadcn Toggle Group with one choice, built on radio buttons. */
  .toggle-group {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .toggle-group__legend {
    padding: 0;
    margin-block-end: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-xs--line-height);
  }

  .toggle-group__items {
    display: flex;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--muted);
  }

  .toggle-group__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-block-size: 2.25rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-md);
    color: color-mix(in oklch, var(--foreground) 60%, transparent);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;

    &:hover {
      color: var(--foreground);
    }

    &:active {
      transform: scale(0.97);
    }

    &:has(:checked) {
      background: var(--background);
      color: var(--foreground);
      box-shadow: 0 1px 3px oklch(0 0 0 / 10%);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .toggle-group__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* shadcn Command in a dialog. The dialog box has no padding, so a click on the dialog itself is a backdrop click. */
  .command {
    inline-size: min(100% - 2rem, 40rem);
    max-block-size: min(100dvh - 2rem, 32rem);
    margin-block: 1rem auto;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    box-shadow: 0 16px 48px oklch(0 0 0 / 18%), 0 2px 6px oklch(0 0 0 / 6%);
    transition: opacity 150ms ease-out, transform 150ms ease-out;

    &[open] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);

      @starting-style {
        opacity: 0;
        transform: scale(0.95);
      }
    }

    &::backdrop {
      background: oklch(0 0 0 / 30%);
    }

    @media (width >= 48rem) {
      margin-block-start: 12dvh;
    }
  }

  .command__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    border-block-end: 1px solid var(--border);
    color: var(--muted-foreground);

    svg {
      flex-shrink: 0;
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }

  .command__input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    outline: none;

    &::placeholder {
      color: var(--muted-foreground);
    }
  }

  .command__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
  }

  .command__group[hidden] {
    display: none;
  }

  .command__heading {
    margin: 0;
    padding: 0.5rem 0.5rem 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-xs--line-height);
  }

  .command__items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .command__item {
    &[hidden] {
      display: none;
    }
  }

  .command__action.button {
    inline-size: 100%;
    padding-inline: 0.5rem;
    font-weight: var(--font-weight-normal);
    text-align: start;

    .button__label {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      inline-size: 100%;
      white-space: normal;
    }
  }

  .command__hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    padding: 0.5rem calc(0.5rem + 1px);
    color: var(--muted-foreground);
  }

  .command__keys {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.25rem;
    margin-inline-start: auto;

    kbd {
      display: inline-grid;
      place-items: center;
      min-inline-size: 1.25rem;
      block-size: 1.25rem;
      padding-inline: 0.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--muted);
      color: var(--muted-foreground);
      font-family: inherit;
      font-size: var(--text-xs);
      line-height: 1;
    }
  }

  .command__empty {
    margin: 0;
    padding: 1.5rem 0.5rem;
    color: var(--muted-foreground);
    text-align: center;
  }

  .space-form {
    display: grid;
    gap: 1rem;
    max-inline-size: 40rem;
  }

  .space-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .claimable {
    display: grid;
    gap: 0.75rem;
  }

  .claimable-rows {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .claimable__legend {
    padding: 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
  }

  .claimable__hint {
    display: none;
  }

  .claimable:has(.claimable-row ~ .claimable-row) .claimable__hint {
    display: block;
  }

  .claimable-row {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .claimable-row__value {
    margin: 0;
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    overflow-wrap: anywhere;
  }

  .claimable-row__primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    cursor: pointer;

    input {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin: 0;
      accent-color: var(--primary);

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }
  }

  .claimable:not(:has(.claimable-row ~ .claimable-row)) .claimable-row__primary,
  .claimable:not(:has(.claimable-row ~ .claimable-row)) .claimable-row__remove {
    display: none;
  }

  .claimable-summary {
    display: grid;
    gap: 0.375rem;

    ul {
      display: grid;
      gap: 0.25rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  .mirrored-clients__body {
    display: grid;
    gap: 0.5rem;
    justify-items: start;

    &[hidden] {
      display: none;
    }
  }

  /* Forgetting shows as done when staff press it; the page confirms it. */
  .mirrored-clients__forgotten {
    display: none;

    .mirrored-clients:has(.mirrored-clients__body[hidden]) & {
      display: block;
    }
  }

  .claimable-row__badge {
    margin-inline-start: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 100svh;
    padding: 1.5rem;
    padding-block: calc(1.5rem + var(--ruby-native-safe-area-top)) calc(1.5rem + var(--ruby-native-safe-area-bottom));
    background: var(--muted);

    @media (width >= 48rem) {
      padding: 2.5rem;
      padding-block: calc(2.5rem + var(--ruby-native-safe-area-top)) calc(2.5rem + var(--ruby-native-safe-area-bottom));
    }
  }

  .login__column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: min(100%, 24rem);
  }

  .login__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  .momntum-mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    overflow: visible;
  }

  .momntum-mark__wing {
    transform-box: fill-box;
    transform-origin: 100% 100%;
    animation: momntum-flap 2.4s ease-in-out infinite;
  }

  .momntum-mark__wing--front {
    animation-delay: 120ms;
  }

  .momntum-mark__tail {
    transform-box: fill-box;
    transform-origin: 100% 0%;
    animation: momntum-flicker 1.6s ease-in-out infinite;
  }

  @keyframes momntum-flap {
    50% {
      rotate: -10deg;
    }
  }

  @keyframes momntum-flicker {
    50% {
      scale: 1.08 0.92;
    }
  }

  .card {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
  }

  .card__header {
    display: grid;
    gap: 0.375rem;
    text-align: center;
  }

  .card__title {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  .card__description {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-wrap: balance;
  }

  .card form,
  .card__content {
    display: grid;
    gap: 1.5rem;
  }

  .card .button {
    inline-size: 100%;
  }

  .login__switch {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .login__switch a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .login__actions {
    display: grid;
    gap: 0.75rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .login .card {
      transition: height 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  .login .card.login-card--resizing {
    overflow: clip;
  }

  .auth {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 24rem);
    margin-inline: auto;
    padding-block: 2rem 3rem;
    padding-inline: 1.5rem;
  }

  .auth form {
    display: grid;
    gap: 1rem;
  }

  .auth__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: center;
  }

  .button-form {
    display: inline-flex;
  }

  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out;

    &:hover {
      background: color-mix(in oklch, var(--primary) 88%, var(--foreground));
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    &[data-pending="true"] {
      cursor: progress;
      opacity: 0.72;
    }
  }

  .button--compact {
    min-block-size: 2rem;
    padding-inline: 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .button--icon {
    aspect-ratio: 1;
    min-inline-size: 2.75rem;
    padding-inline: 0;
  }

  .button--outline {
    border-color: var(--border);
    background: transparent;
    color: var(--foreground);

    &:hover {
      background: var(--secondary);
    }
  }

  .button--secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);

    &:hover {
      background: color-mix(in oklch, var(--secondary) 80%, var(--foreground));
    }
  }

  .button--destructive {
    background: var(--destructive);
    color: var(--background);

    &:hover {
      background: color-mix(in oklch, var(--destructive) 88%, black);
    }
  }

  .button--ghost {
    background: transparent;
    color: var(--foreground);

    /* An open popover keeps its trigger lit, native ones through the sibling; panel toggles stay plain while their panel is open. */
    &:hover,
    &[aria-expanded="true"][data-popover-target="trigger"],
    &:has(+ .popover:popover-open) {
      background: var(--secondary);
    }
  }

  /* Sized for the status bar, in its type and colour. */
  .button--bar {
    gap: 0.375rem;
    min-block-size: 1.5rem;
    padding-block: 0;
    padding-inline: 0.375rem;
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;

    &:hover,
    &[aria-expanded="true"] {
      color: var(--foreground);
    }

    &:focus-visible {
      outline-offset: 1px;
    }

    .button__icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }

  .button--link {
    min-block-size: 2.75rem;
    padding-inline: 0.25rem;
    background: transparent;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:hover {
      background: transparent;
      color: var(--muted-foreground);
    }
  }

  .button__icon {
    display: inline-flex;
    inline-size: 1.125rem;
    block-size: 1.125rem;

    svg {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .field {
    display: grid;
    gap: 0.375rem;

    /* The action follows the control in source so Tab reaches the control first; the grid puts it back on the label row. Herb's development debug mode wraps partial output in display: contents spans, so items are matched through one wrapper. */
    &:has(> .field__action) {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 0.75rem;

      > *,
      > [data-herb-debug-outline-type] > * {
        grid-column: 1 / -1;
      }

      > .label,
      > [data-herb-debug-outline-type] > .label {
        grid-row: 1;
        grid-column: 1;
        align-self: center;
      }

      > .field__action {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
      }
    }
  }

  .field__action-link {
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-decoration: underline;
    text-underline-offset: 0.25em;

    &:hover {
      color: var(--muted-foreground);
    }
  }

  .password-field {
    display: flex;
    align-items: stretch;

    .input {
      position: relative;
      flex: 1;
      min-inline-size: 0;
      border-start-end-radius: 0;
      border-end-end-radius: 0;

      &:focus-visible {
        z-index: 1;
      }
    }

    .button {
      flex: none;
      inline-size: auto;
      min-inline-size: 4.75rem;
      margin-inline-start: -1px;
      border-color: var(--input);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      background: var(--card);

      &:hover {
        border-color: var(--input);
        background: var(--secondary);
      }

      &:focus-visible {
        z-index: 1;
      }

      &:active {
        transform: none;
      }
    }

    &:has(.input:user-invalid, .input[aria-invalid="true"]) .button {
      border-color: var(--destructive);
    }

    .button[hidden] {
      display: none;
    }
  }

  .label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
  }

  .input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;

    &::placeholder {
      color: var(--muted-foreground);
    }

    &:hover {
      border-color: color-mix(in oklch, var(--input), var(--foreground) 25%);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:user-invalid,
    &[aria-invalid="true"] {
      border-color: var(--destructive);
    }

    &:where(select) {
      appearance: none;
      padding-inline-end: 2.5rem;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--foreground) 50%),
        linear-gradient(135deg, var(--foreground) 50%, transparent 50%);
      background-position:
        calc(100% - 1.125rem) calc(50% - 0.125rem),
        calc(100% - 0.75rem) calc(50% - 0.125rem);
      background-repeat: no-repeat;
      background-size: 0.375rem 0.375rem;

      @media (forced-colors: active) {
        appearance: auto;
        background-image: none;
      }
    }
  }

  .checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    cursor: pointer;

    input {
      flex: none;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin: 0;
      accent-color: var(--primary);
      transition: scale 100ms ease-out;

      &:active {
        scale: 0.97;
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .checkbox__label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .checkbox__hint {
    display: block;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  textarea.input {
    field-sizing: content;
    min-block-size: 4.5rem;
    max-block-size: 16rem;
    resize: block;
  }

  .field__hint,
  .field__error {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .field__hint {
    color: var(--muted-foreground);
  }

  .field__error {
    color: var(--destructive);
  }

  .alert {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--foreground);
  }

  /* The draft controller's note: the message, with Discard at its end. */
  .draft-notice .alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding-block: 0.25rem;
  }

  /* A record's note with its action, such as Unarchive: stacked when narrow, one row once both fit. */
  .archived-banner,
  .mirror-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;

    & .alert {
      flex: 1 1 18rem;
    }
  }

  .alert--destructive {
    border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
    background: color-mix(in oklch, var(--destructive) 12%, var(--background));
    color: var(--destructive);
  }

  /*
   * shadcn SidebarMenuButton for a sidebar that collapses to icons. The label
   * sits after the icon and is clipped away when the sidebar is icon-wide.
   */
  .rail-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    block-size: 2.25rem;
    padding-inline: 0.5625rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--sidebar-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;

    & svg {
      flex-shrink: 0;
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }

    & .momntum-mark {
      flex-shrink: 0;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      margin-inline: -0.0625rem;
    }

    &[aria-current="page"] {
      font-weight: var(--font-weight-medium);
    }

    &:hover,
    &[aria-current="page"] {
      background: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: -2px;
    }
  }

  .rail-link__label {
    min-inline-size: 0;
    overflow: hidden;
  }

  /*
   * The first tooltip waits; once the pointer has rested in the group, the
   * next ones show at once. --tooltip-delay drops to 0 after a pause inside a
   * hovered group and snaps back when the pointer leaves. The group delays
   * that drop with a transition on --tooltip-delay (the rail's is in shell.css).
   */
  :where(.rail) {
    --tooltip-delay: 500ms;

    &:hover {
      --tooltip-delay: 0ms;
    }
  }

  /* Wraps a trigger and its .tooltip, which shows while the trigger is hovered or focused. */
  .tooltip-anchor {
    position: relative;
    display: block;
  }

  .tooltip {
    position: absolute;
    z-index: 50;
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--foreground);
    color: var(--background);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--text-xs--line-height);
    pointer-events: none;
    opacity: 0;
    scale: 0.95;
    visibility: hidden;
    transition: opacity 150ms ease-out, scale 150ms ease-out, visibility 0s linear 150ms;
  }

  .tooltip--right {
    inset-block-start: 50%;
    inset-inline-start: calc(100% + 0.5rem);
    translate: 0 -50%;
    transform-origin: left center;
  }

  .tooltip-anchor:hover .tooltip,
  .tooltip-anchor:has(:focus-visible) .tooltip {
    opacity: 1;
    scale: 1;
    visibility: visible;
    transition: opacity 150ms ease-out var(--tooltip-delay), scale 150ms ease-out var(--tooltip-delay), visibility 0s linear var(--tooltip-delay);
  }

  .tooltip-anchor:has(:focus-visible) .tooltip {
    transition-delay: 0s;
  }

  /* In a sidebar that collapses to icons: the name and chevrons clip away with the label space. */
  .space-switcher--compact {
    .space-switcher__trigger {
      min-block-size: 2.25rem;
      padding: 0.125rem;
      overflow: hidden;
      white-space: nowrap;
    }

    .space-switcher__chevrons {
      margin-inline-end: 0.375rem;
    }

    .menu {
      inset-block-start: 0;
      inset-inline-start: calc(100% + 0.5rem);
    }
  }

  .menu--end {
    inset-block: auto 0;
    inset-inline-start: calc(100% + 0.5rem);
    transform-origin: bottom left;
  }

  .user-menu {
    position: relative;
  }

  .user-menu[data-state="open"] {
    z-index: 20;
  }

  .user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    padding: 0.125rem;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--sidebar-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    &:hover {
      background: var(--sidebar-accent);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: -2px;
    }
  }

  .user-menu__email {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-menu__identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
  }

  .user-menu__form {
    display: grid;
  }

  /* shadcn Tabs: a muted list with the active trigger raised. */
  .tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
  }

  .tabs__list {
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--muted);
    color: var(--muted-foreground);
    overflow-x: auto;
  }

  .tabs__trigger {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-block-size: calc(2.25rem - 7px);
    padding: 0.25rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: color-mix(in oklch, var(--foreground) 60%, transparent);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;

    &:hover {
      color: var(--foreground);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    &[data-state="active"] {
      border-color: light-dark(transparent, var(--input));
      background: light-dark(var(--background), color-mix(in oklch, var(--input) 30%, transparent));
      color: var(--foreground);
      box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
    }
  }

  .tabs__count {
    display: inline-grid;
    place-items: center;
    block-size: 1.125rem;
    min-inline-size: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 8%, transparent);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-variant-numeric: tabular-nums;
  }

  /* Underline tabs: text triggers on a bottom rule, the active one underlined. */
  .tabs__bar--underline {
    border-block-end: 1px solid var(--border);

    .tabs__list {
      gap: 1.25rem;
      min-block-size: 0;
      padding: 0;
      border-radius: 0;
      background: none;
      overflow: visible;
    }

    .tabs__trigger {
      position: relative;
      flex: none;
      min-block-size: 2.25rem;
      padding: 0;
      border: 0;
      color: var(--muted-foreground);

      &::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: -1px;
        block-size: 2px;
        border-radius: 2px;
        background: var(--foreground);
        transform: scaleX(0);
        transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
      }

      &:hover {
        color: var(--foreground);
      }

      &:active {
        transform: scale(0.97);
      }

      &:focus-visible {
        border-radius: var(--radius-sm);
      }

      &[data-state="active"] {
        background: none;
        box-shadow: none;
        color: var(--foreground);

        &::after {
          transform: scaleX(1);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        &::after {
          transition: none;
        }
      }
    }
  }

  .tabs__content {
    flex: 1;
    min-block-size: 0;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &[hidden] {
      display: none;
    }
  }

  /* shadcn Breadcrumb. Narrow screens show only the current page. */
  .breadcrumb {
    flex: 1;
    min-inline-size: 0;
  }

  .breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .breadcrumb__item {
    display: inline-flex;
    min-inline-size: 0;
    align-items: center;

    &:not(:last-child) {
      display: none;
      flex-shrink: 0;
      max-inline-size: 12rem;
    }
  }

  .breadcrumb__link,
  .breadcrumb__page {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb__link {
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease-out;

    &:hover {
      color: var(--foreground);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .breadcrumb__page {
    margin: 0;
    color: var(--foreground);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-tight);
  }

  .breadcrumb__separator {
    display: none;

    svg {
      display: block;
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }

  @media (width >= 48rem) {
    .breadcrumb__item:not(:last-child),
    .breadcrumb__separator {
      display: inline-flex;
    }

    .breadcrumb__page {
      font-size: inherit;
      font-weight: var(--font-weight-normal);
      line-height: inherit;
    }
  }

  /* shadcn Avatar with its fallback. */
  .avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    user-select: none;
  }

  .avatar--sm {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: 0.625rem;
  }

  .avatar--lg {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--text-sm);
  }

  /* shadcn Skeleton. */
  .skeleton {
    display: block;
    block-size: 1rem;
    inline-size: 100%;
    max-inline-size: 32rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    animation: skeleton-pulse 2s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  .skeleton--short {
    max-inline-size: 18rem;
  }

  @keyframes skeleton-pulse {
    50% { opacity: 0.5; }
  }

  /* shadcn Badge. */
  .badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    inline-size: fit-content;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-xs--line-height);
    white-space: nowrap;
  }

  .badge--default {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .badge--secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
  }

  .badge--destructive {
    background: light-dark(var(--destructive), color-mix(in oklch, var(--destructive) 60%, transparent));
    color: white;
  }

  .badge--outline {
    border-color: var(--border);
    color: var(--foreground);
  }

  .activity {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--muted-foreground);

    &:not([hidden]) {
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }

    &[data-busy="false"] .activity__dots {
      display: none;
    }
  }

  .activity__dots {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.25rem;

    & > span {
      inline-size: 0.25rem;
      block-size: 0.25rem;
      border-radius: 50%;
      background: currentColor;
      animation: activity-pulse 1.2s ease-in-out infinite;

      &:nth-child(2) { animation-delay: 150ms; }
      &:nth-child(3) { animation-delay: 300ms; }
    }
  }

  @keyframes activity-pulse {
    0%, 80%, 100% { opacity: 0.35; }
    40% { opacity: 1; }
  }

  /*
   * Trace (ui/trace, ui/trace_line, ui/trace_collapsible): an agent's steps as
   * lines. The list is .trace-list, apart from the run page's .trace (traces.css).
   */
  .trace-list {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .trace-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--muted-foreground);
    transition: color 150ms ease-out;

    &[data-status="error"] {
      color: var(--destructive);
    }

    &[data-status="pending"] {
      opacity: 0.6;
    }

    &[data-status="running"] .trace-line__title {
      --trace-shimmer-spread: calc(3ch + 40px);
      --trace-shimmer-highlight: light-dark(color-mix(in oklch, currentColor 20%, transparent), var(--foreground));

      background-image: linear-gradient(110deg,
        currentColor calc(50% - var(--trace-shimmer-spread)),
        color-mix(in oklch, var(--trace-shimmer-highlight), currentColor 50%) calc(50% - var(--trace-shimmer-spread) * 0.5),
        var(--trace-shimmer-highlight) 50%,
        color-mix(in oklch, var(--trace-shimmer-highlight), currentColor 50%) calc(50% + var(--trace-shimmer-spread) * 0.5),
        currentColor calc(50% + var(--trace-shimmer-spread)));
      background-repeat: no-repeat;
      background-size: calc(200% + var(--trace-shimmer-spread) * 2) 100%;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: trace-shimmer 2s linear infinite;
    }
  }

  .trace-line__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 1rem;
    block-size: 1rem;

    & svg {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  .trace-line__title {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trace-line__description {
    flex-shrink: 0;
    color: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
    font-variant-numeric: tabular-nums;
  }

  .trace-collapsible {
    min-inline-size: 0;
    interpolate-size: allow-keywords;

    &::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease-out, content-visibility 200ms ease-out allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  .trace-collapsible__trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    list-style: none;
    cursor: pointer;
    transition: color 150ms ease-out, transform 150ms ease-out;

    &::-webkit-details-marker {
      display: none;
    }

    &:active {
      transform: scale(0.97);
    }

    &:hover,
    &:hover .trace-line:not([data-status="error"]) {
      color: var(--foreground);
    }

    &:has([data-status="error"]) {
      color: var(--destructive);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .trace-collapsible__chevron {
    transition: rotate 150ms ease-out;

    .trace-collapsible[open] > .trace-collapsible__trigger > & {
      rotate: 90deg;
    }
  }

  .trace-collapsible__content {
    min-inline-size: 0;
    margin-block-end: 0.25rem;
    margin-inline-start: calc(0.5rem - 1px);
    padding-inline: 1rem 0.25rem;
    border-inline-start: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
  }

  @keyframes trace-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .input,
  .space-switcher__trigger,
  .menu,
  .menu__item,
  .popover,
  .toggle-group__item,
  .list-filter__chip,
  .command,
  .rail-link,
  .tooltip,
  .user-menu__trigger,
  .tabs__trigger,
  .trace-line,
  .trace-collapsible__trigger,
  .trace-collapsible__chevron {
    transition: none;
  }

  /* Its own rule: a browser without ::details-content drops the whole selector list. */
  .trace-collapsible::details-content {
    transition: none;
  }

  .momntum-mark * {
    animation: none;
  }

  .activity__dots > span {
    animation: none;
  }

  .trace-line[data-status="running"] .trace-line__title {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }

  .button:active,
  .space-switcher__trigger:active,
  .menu__item:active,
  .rail-link:active,
  .user-menu__trigger:active,
  .trace-collapsible__trigger:active {
    transform: none;
  }
}