body[data-route="platform/protocol-tests"] {
  --protocol-brand: #0F5FBF;
  --protocol-page: #F4F7FB;
  --protocol-surface: #FFFFFF;
  --protocol-text: #14213D;
  --protocol-muted: #607089;
  --protocol-border: #D8E2EF;
  --protocol-success: #0A8F4F;
  --protocol-danger: #B42318;
  background: var(--protocol-page);
  color: var(--protocol-text);
}

body[data-route="platform/protocol-tests"] .view-host {
  background: var(--protocol-page);
}

.protocol-tests-page {
  box-sizing: border-box;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 14px 18px 40px;
  color: var(--protocol-text, #14213D);
}

.protocol-page-header,
.protocol-toolbar,
.protocol-session-summary,
.protocol-card {
  border: 1px solid var(--protocol-border, #D8E2EF);
  background: var(--protocol-surface, #FFFFFF);
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.06);
}

.protocol-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  padding: 18px 20px;
  border-radius: 12px;
}

.protocol-page-header h2,
.protocol-card h3 {
  margin: 0;
  color: var(--protocol-text, #14213D);
}

.protocol-page-header h2 {
  font-size: 22px;
  line-height: 1.35;
}

.protocol-page-header p,
.protocol-card-heading span,
.protocol-toolbar span,
.protocol-form-note,
.protocol-event-main p,
.protocol-archive-panel p {
  color: var(--protocol-muted, #607089);
}

.protocol-page-header p {
  margin: 5px 0 0;
}

.protocol-eyebrow {
  margin: 0 0 4px !important;
  color: var(--protocol-brand, #0F5FBF) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.protocol-live-region {
  min-height: 0;
  margin: 0 0 10px;
  padding: 0;
  border-radius: 8px;
}

.protocol-live-region:not(:empty) {
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  background: var(--protocol-surface, #FFFFFF);
}

.protocol-live-region[data-tone="error"] {
  border-color: rgba(180, 35, 24, 0.35);
  color: var(--protocol-danger, #B42318);
}

.protocol-live-region[data-tone="success"] {
  border-color: rgba(10, 143, 79, 0.35);
  color: var(--protocol-success, #0A8F4F);
}

.protocol-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 12px;
}

.protocol-toolbar div {
  display: grid;
  gap: 3px;
}

.protocol-button,
.protocol-link-button,
.protocol-archive-tabs button {
  min-height: 44px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 8px;
  background: var(--protocol-surface, #FFFFFF);
  color: var(--protocol-text, #14213D);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.protocol-button {
  padding: 9px 15px;
}

.protocol-button:hover:not(:disabled),
.protocol-link-button:hover:not(:disabled),
.protocol-archive-tabs button:hover:not(:disabled) {
  border-color: var(--protocol-brand, #0F5FBF);
  color: var(--protocol-brand, #0F5FBF);
}

.protocol-button:focus-visible,
.protocol-link-button:focus-visible,
.protocol-archive-tabs button:focus-visible,
.protocol-field input:focus-visible,
.protocol-field select:focus-visible,
.protocol-device-option:has(input:focus-visible) {
  outline: 3px solid rgba(15, 95, 191, 0.22);
  outline-offset: 2px;
}

.protocol-button:disabled,
.protocol-link-button:disabled,
.protocol-archive-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.protocol-button-primary {
  border-color: var(--protocol-brand, #0F5FBF);
  background: var(--protocol-brand, #0F5FBF);
  color: #FFFFFF;
}

.protocol-button-primary:hover:not(:disabled) {
  color: #FFFFFF;
  filter: brightness(0.94);
}

.protocol-button-danger {
  border-color: rgba(180, 35, 24, 0.4);
  color: var(--protocol-danger, #B42318);
}

.protocol-link-button {
  padding: 7px 11px;
  border-color: transparent;
  background: transparent;
  color: var(--protocol-brand, #0F5FBF);
}

.protocol-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 12px;
  background: var(--protocol-surface, #FFFFFF);
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.05);
}

.protocol-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  color: var(--protocol-text, #14213D);
}

.protocol-table th,
.protocol-table td {
  padding: 12px 13px;
  border-bottom: 1px solid var(--protocol-border, #D8E2EF);
  text-align: left;
  vertical-align: middle;
}

.protocol-table th {
  background: #F8FAFD;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.protocol-table tbody tr:last-child td {
  border-bottom: 0;
}

.protocol-table td small {
  display: block;
  margin-top: 3px;
  color: var(--protocol-muted, #607089);
}

.protocol-table code,
.protocol-event-main code,
.protocol-event-detail code,
.protocol-hash-grid code,
.protocol-summary-grid code,
.protocol-cleanup-failure code,
.protocol-archive-rows code {
  overflow-wrap: anywhere;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.protocol-state,
.protocol-status-dot,
.protocol-phase {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #EEF4FB;
  color: var(--protocol-brand, #0F5FBF);
  font-size: 12px;
  font-weight: 700;
}

.protocol-status-dot[data-tone="good"],
.protocol-state[data-status="ready"],
.protocol-state[data-status="running"],
.protocol-state[data-status="cleaned"],
.protocol-phase[data-phase="succeeded"],
.protocol-phase[data-phase="completed"] {
  background: #E9F7EF;
  color: var(--protocol-success, #0A8F4F);
}

.protocol-state[data-status="archive_failed"],
.protocol-state[data-status="cleanup_failed"],
.protocol-phase[data-phase="failed"],
.protocol-phase[data-phase="nack"],
.protocol-phase[data-phase="timed_out"] {
  background: #FEF0EE;
  color: var(--protocol-danger, #B42318);
}

.protocol-status-dot[data-tone="muted"] {
  color: var(--protocol-muted, #607089);
}

.protocol-session-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 12px;
}

.protocol-session-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 15px;
  background: var(--protocol-surface, #FFFFFF);
}

.protocol-session-summary span,
.protocol-diagnostics span,
.protocol-summary-grid dt,
.protocol-hash-grid dt {
  color: var(--protocol-muted, #607089);
  font-size: 12px;
}

.protocol-session-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-stepper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.protocol-stepper li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 9px;
  background: var(--protocol-surface, #FFFFFF);
}

.protocol-stepper li[data-step-state="current"] {
  border-color: var(--protocol-brand, #0F5FBF);
  box-shadow: inset 0 3px 0 var(--protocol-brand, #0F5FBF);
}

.protocol-stepper li[data-step-state="done"] {
  border-color: rgba(10, 143, 79, 0.35);
}

.protocol-stepper li[data-step-state="skipped"] {
  border-color: rgba(181, 105, 0, 0.45);
  background: #FFF8E8;
}

.protocol-stepper li[data-step-state="failed"] {
  border-color: rgba(180, 35, 24, 0.45);
  background: #FFF1F0;
}

.protocol-stepper:not(.protocol-stepper-overview) li {
  padding: 0;
}

.protocol-stepper:not(.protocol-stepper-overview) .protocol-step-button {
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  color: inherit;
}

.protocol-stepper:not(.protocol-stepper-overview) li[data-view-state="selected"] {
  outline: 2px solid rgba(15, 95, 191, 0.28);
  outline-offset: 1px;
}

.protocol-step-number {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #E8F0FA;
  color: var(--protocol-brand, #0F5FBF);
  font-size: 12px;
  font-weight: 800;
}

.protocol-stepper li[data-step-state="done"] .protocol-step-number {
  background: #E9F7EF;
  color: var(--protocol-success, #0A8F4F);
}

.protocol-stepper li[data-step-state="skipped"] .protocol-step-number {
  background: #FDE8B3;
  color: #8A5200;
}

.protocol-stepper li[data-step-state="failed"] .protocol-step-number {
  background: #FEE4E2;
  color: var(--protocol-danger, #B42318);
}

.protocol-stepper strong,
.protocol-stepper small {
  display: block;
}

.protocol-step-status {
  display: block;
  margin-top: 3px;
  color: var(--protocol-muted, #607089);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.protocol-step-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: -2px 0 12px;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
}

.protocol-optional-step-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 9px;
  background: #F8FAFD;
  color: var(--protocol-muted, #607089);
}

.protocol-optional-step-state[data-protocol-optional-step-status="skipped"] {
  border-color: rgba(181, 105, 0, 0.35);
  background: #FFF8E8;
  color: #704400;
}

.protocol-optional-step-state[data-protocol-optional-step-status="configured"],
.protocol-optional-step-state[data-protocol-optional-step-status="completed"] {
  border-color: rgba(10, 143, 79, 0.3);
  background: #F0FAF4;
  color: #08703F;
}

.protocol-stepper strong {
  font-size: 13px;
  line-height: 1.35;
}

.protocol-stepper small {
  display: none;
  margin-top: 3px;
  color: var(--protocol-muted, #607089);
  line-height: 1.45;
}

.protocol-flow-overview {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 12px;
  background: var(--protocol-surface, #FFFFFF);
}

.protocol-flow-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.protocol-flow-overview-heading h3,
.protocol-flow-overview-heading p {
  margin: 0;
}

.protocol-flow-overview-heading > p {
  max-width: 620px;
  color: var(--protocol-muted, #607089);
  font-size: 13px;
  line-height: 1.65;
}

.protocol-stepper-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 0;
}

.protocol-stepper-overview li {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.protocol-step-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 999px;
  background: var(--protocol-surface, #FFFFFF);
  color: var(--protocol-muted, #607089);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.protocol-step-button:hover,
.protocol-step-button:focus-visible {
  border-color: var(--protocol-brand, #0F5FBF);
  color: var(--protocol-brand, #0F5FBF);
}

.protocol-stepper-overview li[data-step-state="current"] {
  border: 0;
  box-shadow: none;
}

.protocol-stepper-overview li[data-step-state="current"] .protocol-step-button {
  border-color: var(--protocol-brand, #0F5FBF);
  background: var(--protocol-brand, #0F5FBF);
  color: #FFFFFF;
}

.protocol-stepper-overview li[data-step-state="current"] .protocol-step-number {
  background: #FFFFFF;
  color: var(--protocol-brand, #0F5FBF);
}

.protocol-stepper-overview small {
  display: none;
}

.protocol-create-workspace,
.protocol-preview-workspace {
  width: min(880px, 100%);
  margin: 0 auto;
}

.protocol-preview-workspace {
  display: grid;
  gap: 10px;
}

.protocol-preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 10px 13px;
  border: 1px solid rgba(15, 95, 191, 0.24);
  border-radius: 10px;
  background: #EEF5FD;
  color: var(--protocol-brand, #0F5FBF);
}

.protocol-preview-banner span {
  color: var(--protocol-muted, #607089);
  font-size: 13px;
}

.protocol-preview-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.protocol-preview-fieldset[disabled] {
  opacity: 0.82;
}

.protocol-card {
  padding: 18px;
  border-radius: 12px;
}

.protocol-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.protocol-card-heading h3 {
  font-size: 18px;
}

.protocol-field-grid {
  display: grid;
  gap: 14px 12px;
}

.protocol-field-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.protocol-field-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.protocol-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--protocol-text, #14213D);
  font-size: 13px;
}

.protocol-field > span {
  font-weight: 650;
}

.protocol-field input,
.protocol-field select,
.protocol-table input,
.protocol-table select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 8px;
  background: var(--protocol-surface, #FFFFFF);
  color: var(--protocol-text, #14213D);
  font: inherit;
}

.protocol-form-note {
  margin: 12px 0 0;
  font-size: 13px;
}

.protocol-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}

.protocol-diagnostics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.protocol-diagnostics > div {
  display: grid;
  gap: 6px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 9px;
  background: #F8FAFD;
}

.protocol-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  margin-bottom: 12px;
}

.protocol-device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.protocol-device-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 104px);
  align-items: start;
  gap: 8px;
  min-width: 0;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 11px;
  background: var(--protocol-surface, #FFFFFF);
  box-shadow: 0 5px 14px rgba(20, 33, 61, 0.04);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.protocol-device-option:has(input:checked) {
  border-color: var(--protocol-brand, #0F5FBF);
  background: #F4F8FD;
  box-shadow: inset 3px 0 0 var(--protocol-brand, #0F5FBF), 0 7px 18px rgba(15, 95, 191, 0.08);
}

.protocol-device-option span,
.protocol-device-option strong,
.protocol-device-option small {
  display: block;
}

.protocol-device-option strong {
  color: var(--protocol-text, #14213D);
  font-size: 18px;
  line-height: 1.1;
}

.protocol-device-option small {
  margin-top: 5px;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
}

.protocol-device-option em {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-width: 0;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #EEF4FB;
  color: #45617F;
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-control-side {
  align-content: start;
}

.protocol-control-side h3 {
  margin-bottom: 14px;
}

.protocol-control-side .protocol-button,
.protocol-control-side .protocol-link-button {
  width: 100%;
  margin-top: 9px;
}

.protocol-timeline {
  padding: 0;
  overflow: hidden;
}

.protocol-timeline > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 15px 18px;
  list-style: none;
  cursor: pointer;
}

.protocol-timeline > summary::-webkit-details-marker {
  display: none;
}

.protocol-timeline > summary:hover {
  background: #F8FAFD;
}

.protocol-timeline > summary:focus-visible {
  outline: 3px solid rgba(15, 95, 191, 0.24);
  outline-offset: -3px;
}

.protocol-timeline-summary-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.protocol-timeline-summary-copy strong {
  color: var(--protocol-text, #14213D);
  font-size: 16px;
}

.protocol-timeline-summary-copy small {
  overflow: hidden;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-timeline-summary-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
}

.protocol-timeline-summary-meta em {
  padding: 4px 8px;
  border-radius: 999px;
  background: #FFF0EE;
  color: var(--protocol-danger, #B42318);
  font-style: normal;
  font-weight: 700;
}

.protocol-timeline-summary-meta i {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.protocol-timeline[open] .protocol-timeline-summary-meta i {
  transform: rotate(225deg) translate(-2px, -2px);
}

.protocol-timeline-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--protocol-border, #D8E2EF);
}

.protocol-event-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol-event-list > li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--protocol-border, #D8E2EF);
}

.protocol-event-list > li:last-child {
  border-bottom: 0;
}

.protocol-event-sequence {
  color: var(--protocol-brand, #0F5FBF);
  font-weight: 800;
}

.protocol-event-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.protocol-event-main p {
  margin: 7px 0;
  line-height: 1.55;
}

.protocol-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--protocol-muted, #607089);
  font-size: 12px;
}

.protocol-event-main details {
  margin-top: 10px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 8px;
}

.protocol-event-main summary {
  min-height: 44px;
  padding: 11px 12px;
  color: var(--protocol-brand, #0F5FBF);
  cursor: pointer;
}

.protocol-event-detail {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 12px 12px;
}

.protocol-event-detail > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
}

.protocol-event-detail dt {
  color: var(--protocol-muted, #607089);
}

.protocol-event-detail dd {
  min-width: 0;
  margin: 0;
}

.protocol-archive-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.protocol-archive-tabs button {
  flex: 0 0 auto;
  padding: 8px 12px;
}

.protocol-archive-tabs button.active {
  border-color: var(--protocol-brand, #0F5FBF);
  background: var(--protocol-brand, #0F5FBF);
  color: #FFFFFF;
}

.protocol-archive-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 9px;
  background: #F8FAFD;
}

.protocol-summary-grid,
.protocol-hash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.protocol-summary-grid > div,
.protocol-hash-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.protocol-summary-grid dd,
.protocol-hash-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.protocol-archive-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.protocol-notice,
.protocol-cleanup-failure,
.protocol-cleanup-success {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 9px;
  background: var(--protocol-surface, #FFFFFF);
}

.protocol-cleanup-failure {
  border-color: rgba(180, 35, 24, 0.4);
  color: var(--protocol-danger, #B42318);
}

.protocol-cleanup-success {
  border-color: rgba(10, 143, 79, 0.35);
  color: var(--protocol-success, #0A8F4F);
}

.protocol-end-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--protocol-border, #D8E2EF);
  border-radius: 12px;
  color: var(--protocol-text, #14213D);
}

.protocol-end-dialog::backdrop {
  background: rgba(20, 33, 61, 0.46);
}

@media (min-width: 1180px) {
  .protocol-stepper li[data-step-state="current"] small {
    display: block;
  }
}

@media (max-width: 1024px) {
  .protocol-tests-page {
    padding-inline: 12px;
  }

  .protocol-session-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .protocol-stepper-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-field-grid-four,
  .protocol-diagnostics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-control-grid {
    grid-template-columns: 1fr;
  }

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

  .protocol-control-side {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
    align-items: end;
    gap: 8px;
  }

  .protocol-control-side h3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .protocol-tests-page {
    padding: 10px 10px 96px;
  }

  .protocol-page-header,
  .protocol-toolbar,
  .protocol-flow-overview-heading,
  .protocol-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .protocol-page-header .protocol-button,
  .protocol-toolbar .protocol-button {
    width: 100%;
  }

  .protocol-session-summary,
  .protocol-field-grid-three,
  .protocol-field-grid-four,
  .protocol-diagnostics,
  .protocol-summary-grid,
  .protocol-hash-grid {
    grid-template-columns: 1fr;
  }

  .protocol-stepper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .protocol-stepper li {
    flex: 0 0 148px;
    min-height: 58px;
    scroll-snap-align: start;
  }

  .protocol-stepper-overview {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .protocol-stepper-overview li {
    min-height: 0;
  }

  .protocol-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .protocol-table {
    min-width: 0;
  }

  .protocol-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .protocol-table,
  .protocol-table tbody,
  .protocol-table tr,
  .protocol-table td {
    display: block;
    width: 100%;
  }

  .protocol-table tr {
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--protocol-border, #D8E2EF);
    border-radius: 10px;
    background: var(--protocol-surface, #FFFFFF);
    box-shadow: 0 6px 18px rgba(20, 33, 61, 0.05);
  }

  .protocol-table td {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--protocol-border, #D8E2EF);
  }

  .protocol-table td::before {
    content: attr(data-label);
    color: var(--protocol-muted, #607089);
    font-size: 12px;
    font-weight: 700;
  }

  .protocol-table td:last-child {
    border-bottom: 0;
  }

  .protocol-actions,
  .protocol-control-side {
    display: grid;
    grid-template-columns: 1fr;
  }

  .protocol-actions .protocol-button,
  .protocol-actions .protocol-link-button,
  .protocol-control-side .protocol-button,
  .protocol-control-side .protocol-link-button {
    width: 100%;
    min-height: 44px;
  }

  .protocol-device-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .protocol-device-grid {
    grid-template-columns: 1fr;
  }

  .protocol-device-option em {
    grid-column: 2;
    justify-self: start;
  }

  .protocol-timeline > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .protocol-timeline-summary-copy small {
    white-space: normal;
  }

  .protocol-timeline-summary-meta {
    justify-content: space-between;
    width: 100%;
  }

  .protocol-event-list > li {
    grid-template-columns: 1fr;
  }

  .protocol-event-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .protocol-event-detail > div {
    grid-template-columns: 1fr;
  }

  .protocol-archive-tabs {
    margin-inline: -4px;
  }
}

.protocol-workspace-switcher,
.observation-tabs,
.observation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.protocol-workspace-switcher {
  padding: 6px;
  border: 1px solid #D8E2EF;
  border-radius: 12px;
  background: #F4F7FB;
}

.protocol-workspace-switcher button,
.observation-tabs button,
.observation-actions button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #D8E2EF;
  border-radius: 8px;
  background: #FFFFFF;
  color: #14213D;
}

.protocol-workspace-switcher button[aria-current="page"],
.observation-tabs button[aria-current="page"] {
  border-color: #0F5FBF;
  background: #0F5FBF;
  color: #FFFFFF;
}

.observation-warning,
.observation-evidence-health {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #D8E2EF;
  border-left: 4px solid #0F5FBF;
  border-radius: 10px;
  background: #FFFFFF;
  color: #14213D;
}

.observation-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.observation-summary-grid article,
.observation-event,
.observation-create {
  padding: 14px;
  border: 1px solid #D8E2EF;
  border-radius: 10px;
  background: #FFFFFF;
}

.observation-summary-grid span,
.observation-evidence-health span {
  color: #607089;
}

.observation-filters,
.observation-create form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.observation-filters label,
.observation-create label {
  display: grid;
  gap: 6px;
}

.observation-create fieldset {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #D8E2EF;
}

.observation-event code {
  overflow-wrap: anywhere;
}

.customer-context-switcher {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(150px, 220px);
  align-items: center;
  gap: 4px 8px;
  color: #607089;
  font-size: 12px;
}

.customer-context-switcher select {
  min-height: 36px;
  border: 1px solid #C9D7E8;
  border-radius: 8px;
  background: #FFFFFF;
  color: #14213D;
}

.customer-context-switcher small {
  grid-column: 1 / -1;
  min-height: 14px;
  color: #607089;
}

.customer-context-switcher small.error,
.observation-inline-error {
  color: #A1262D;
}

.observation-progressive {
  display: grid;
  gap: 14px;
}

.observation-warning.compact {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding: 10px 14px;
}

.observation-warning.compact p {
  margin: 0;
  color: #607089;
}

.observation-inline-error,
.observation-empty-state {
  padding: 14px 16px;
  border: 1px solid #E7B8BA;
  border-radius: 10px;
  background: #FFF7F7;
}

.observation-empty-state p {
  margin: 6px 0 0;
  color: #607089;
}

.observation-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.observation-step > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #0F5FBF;
  color: #FFFFFF;
  font-weight: 800;
}

.observation-step h3 {
  margin: 3px 0 10px;
}

.observation-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.observation-choice {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #D8E2EF;
  border-radius: 10px;
  background: #FFFFFF;
  color: #14213D;
  text-align: left;
}

.observation-choice:hover,
.observation-choice.active {
  border-color: #0F5FBF;
  box-shadow: 0 0 0 2px rgba(15, 95, 191, 0.1);
}

.observation-choice span,
.observation-choice small {
  color: #607089;
}

.observation-choice [data-observation-channel-status="pending"] {
  color: #986400;
  font-weight: 700;
}

.observation-run-panel,
.observation-query-results,
.observation-history,
.observation-advanced {
  padding: 14px;
  border: 1px solid #D8E2EF;
  border-radius: 10px;
  background: #FFFFFF;
}

.observation-time,
.observation-count {
  display: grid;
  gap: 2px;
  min-width: max-content;
  white-space: nowrap;
}

.observation-time small,
.observation-count small,
.observation-empty-value {
  color: #607089;
  font-weight: 400;
}

.observation-primary-action {
  width: 100%;
  margin-top: 8px;
}

.observation-query-results {
  display: grid;
  gap: 8px;
}

.observation-query-results article {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(180px, 2fr);
  gap: 10px;
}

.observation-create > p {
  color: #607089;
}

.observation-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.observation-slot-list span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #EEF4FC;
  color: #31516F;
}

@media (max-width: 640px) {
  .observation-summary-grid,
  .observation-filters,
  .observation-create form {
    grid-template-columns: 1fr;
  }

  .customer-context-switcher,
  .observation-step,
  .observation-query-results article {
    grid-template-columns: 1fr;
  }

  .protocol-workspace-switcher button,
  .observation-tabs button,
  .observation-actions button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .protocol-tests-page *,
  .protocol-tests-page *::before,
  .protocol-tests-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}