.client-instructions.client-diagnostics {
  width: min(580px, 100vw);
}

.client-diagnostics-header {
  margin-bottom: 12px;
}

.client-diagnostics-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-diagnostics-title-row h2 {
  flex: 0 1 auto;
}

.client-diagnostics-refresh-wrap {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.client-diagnostics-refresh {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--client-muted);
  cursor: pointer;
  transition: color 220ms ease, filter 320ms ease;
}

.client-diagnostics-refresh svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.client-diagnostics-refresh:hover:not(:disabled),
.client-diagnostics-refresh:focus-visible,
.client-diagnostics-refresh.is-running {
  color: var(--client-accent);
  filter: drop-shadow(0 0 8px color-mix(in oklch, var(--client-accent) 48%, transparent));
}

.client-diagnostics-refresh:focus-visible {
  outline: 2px solid var(--client-accent);
  outline-offset: 1px;
}

.client-diagnostics-refresh:hover:not(:disabled) svg,
.client-diagnostics-refresh:focus-visible:not(.is-running) svg {
  transform: rotate(90deg);
}

.client-diagnostics-refresh.is-running svg {
  animation: client-spin 900ms linear infinite;
}

.client-diagnostics-refresh:disabled {
  cursor: wait;
}

.client-diagnostics-refresh-wrap > .client-tooltip {
  right: 0;
  left: auto;
  transform: translate(0, 2px);
}

.client-diagnostics-refresh-wrap:hover > .client-tooltip,
.client-diagnostics-refresh-wrap:has(> :focus-visible) > .client-tooltip {
  transform: translate(0, 0);
}

.client-diagnostics-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 10px;
}

.client-diagnostics-error {
  display: flex;
  align-items: center;
  gap: 12px;
  color: oklch(0.68 0.15 28);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
}

.client-diagnostics-error button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.client-diagnostics-section {
  display: grid;
  gap: 5px;
  margin: 0 8px 24px;
}

.client-diagnostics-section-title {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--client-muted);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
}

.client-diagnostics-section-title button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--client-accent);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  cursor: pointer;
}

.client-diagnostics-section-title button:disabled {
  color: var(--client-muted);
  cursor: default;
  opacity: 0.5;
}

.client-diagnostics-section-title button:focus-visible,
.client-diagnostics-error button:focus-visible {
  outline: 2px solid var(--client-accent);
  outline-offset: 2px;
}

.client-diagnostics-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  transition: opacity 220ms ease, filter 320ms ease;
}

.client-diagnostics-table th,
.client-diagnostics-table td {
  min-width: 0;
  padding: 9px 8px;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: middle;
}

.client-diagnostics-table th:first-child {
  width: 35%;
}

.client-diagnostics-table thead th {
  padding-top: 2px;
  padding-bottom: 7px;
  color: var(--client-muted);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
}

.client-diagnostics-table tbody tr {
  border-top: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent);
}

.client-diagnostics-active-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: color-mix(in oklch, var(--client-accent) 8%, transparent);
  box-shadow: inset 2px 0 var(--client-accent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--diagnostics-runner-x, 0), var(--diagnostics-runner-y, 0), 0);
  transition: opacity 220ms ease;
  will-change: transform;
}

.client-diagnostics-active-marker.is-visible {
  opacity: 1;
}

.client-diagnostics-active-marker.is-moving {
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.client-diagnostics-header,
.client-diagnostics-feedback,
.client-diagnostics-section {
  position: relative;
  z-index: 1;
}

.client-diagnostics-table tbody tr.is-running th {
  color: var(--client-accent);
  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 38%, transparent);
}

.client-diagnostics-table tbody th {
  color: var(--client-text);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  transition: color 420ms ease, text-shadow 520ms ease;
}

.client-diagnostics-service-table {
  display: grid;
}

.client-diagnostics-service-header,
.client-diagnostics-service-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 35% minmax(0, 1fr) minmax(0, 1fr) 28px;
  align-items: center;
}

.client-diagnostics-service-header {
  padding: 2px 0 7px;
  color: var(--client-muted);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
}

.client-diagnostics-service-header > span,
.client-diagnostics-service-row > span:not(.client-delete-strike),
.client-diagnostics-service-row > input {
  min-width: 0;
  padding-inline: 8px;
}

.client-diagnostics-service-row {
  position: relative;
  isolation: isolate;
  min-height: 37px;
  border-top: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent);
  animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.client-diagnostics-service-row.is-removing {
  pointer-events: none;
  animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.client-diagnostics-service-row.is-running .client-diagnostics-service-name {
  color: var(--client-accent);
  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 38%, transparent);
}

.client-diagnostics-service-name {
  overflow-wrap: anywhere;
  color: var(--client-text);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  transition: color 420ms ease, text-shadow 520ms ease;
}

.client-diagnostics-table code,
.client-diagnostics-status {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--client-text);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  font-variant-numeric: var(--numeric-tabular);
}

.client-diagnostics-status.is-good {
  color: var(--client-accent);
}

.client-diagnostics-status.is-warning {
  color: oklch(0.68 0.14 72);
}

.client-diagnostics-status.is-error {
  color: oklch(0.68 0.15 28);
}

.client-diagnostics-status.is-muted {
  color: var(--client-muted);
}

.client-diagnostics-status.is-running {
  color: var(--client-accent);
  white-space: nowrap;
}

.client-diagnostics-dots {
  position: relative;
  display: inline-block;
  margin-left: 0.15em;
  color: color-mix(in oklch, var(--client-accent) 24%, transparent);
}

.client-diagnostics-dots::after {
  position: absolute;
  inset: 0;
  color: var(--client-accent);
  clip-path: inset(0 100% 0 0);
  content: '...';
  animation: client-diagnostics-dots-fill 1200ms steps(3, end) infinite;
}

@keyframes client-diagnostics-dots-fill {
  0%, 12% { clip-path: inset(0 100% 0 0); }
  82%, 94% { clip-path: inset(0); }
  100% { clip-path: inset(0 100% 0 0); }
}

.client-diagnostics-service-draft input {
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--client-text);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 300ms ease, text-shadow 300ms ease;
}

.client-diagnostics-service-draft input::placeholder {
  color: color-mix(in oklch, var(--client-muted) 70%, transparent);
}

.client-diagnostics-service-draft input:focus {
  box-shadow: 0 1px 0 color-mix(in oklch, var(--client-accent) 58%, transparent);
  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 22%, transparent);
}

.client-diagnostics-service-url {
  min-width: 0;
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-diagnostics-service-url input {
  flex: 1 1 auto;
}

.client-diagnostics-service-url button {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--client-accent);
  font: var(--type-control);
  letter-spacing: var(--type-control-tracking);
  text-transform: var(--type-control-transform);
  cursor: pointer;
  transition: filter 260ms ease, text-shadow 300ms ease;
}

.client-diagnostics-service-url button:hover,
.client-diagnostics-service-url button:focus-visible {
  outline: 0;
  filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 42%, transparent));
  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 42%, transparent);
}

.client-diagnostics-services-empty {
  padding: 14px 8px 4px;
  color: var(--client-muted);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-transform);
}

.client-diagnostics-add-slot {
  padding-inline: 8px;
}

@media (max-width: 560px) {
  .client-diagnostics-table th,
  .client-diagnostics-table td {
    padding-inline: 5px;
  }

  .client-diagnostics-table th:first-child {
    width: 32%;
  }

  .client-diagnostics-service-header,
  .client-diagnostics-service-row {
    grid-template-columns: 32% minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .client-diagnostics-service-draft {
    grid-template-columns: minmax(0, 1fr) 44px;
    padding-block: 5px;
  }

  .client-diagnostics-service-draft > input {
    grid-column: 1;
  }

  .client-diagnostics-service-url {
    grid-column: 1;
    grid-row: 2;
  }

  .client-diagnostics-service-draft > .client-row-delete {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
  }
}