/* DESIGN-6 — Shared Production Design Responsive QA.
 * Adds visible debug checks for desktop, tablet, and mobile readiness and
 * hardens production surfaces against horizontal overflow in real themes.
 */
.ept-bench {
  --ept-responsive-pass-bg: var(--ept-success-bg);
  --ept-responsive-pass-border: var(--ept-success-border);
  --ept-responsive-warn-bg: var(--ept-warning-bg);
  --ept-responsive-warn-border: var(--ept-warning-border);
  --ept-responsive-fail-bg: var(--ept-error-bg);
  --ept-responsive-fail-border: var(--ept-error-border);
  overflow-x: clip;
}

.ept-bench .ept-shell,
.ept-bench .ept-production-flow,
.ept-bench .ept-flow-template,
.ept-bench .ept-flow-workspace,
.ept-bench .ept-flow-result,
.ept-bench .ept-flow-start {
  max-width: 100%;
}

.ept-responsive-qa {
  display: grid;
  gap: 14px;
}

.ept-responsive-qa__header,
.ept-responsive-qa__toolbar,
.ept-responsive-qa__footer {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ept-responsive-qa__header h3 {
  margin: 6px 0 6px;
}

.ept-responsive-qa__header p,
.ept-responsive-qa__footer p {
  color: var(--ept-muted) !important;
  margin: 0;
}

.ept-responsive-qa__toolbar {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ept-responsive-qa__scoreboard {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ept-responsive-qa__score {
  background: rgba(248, 250, 252, .9);
  border: 1px solid var(--ept-border);
  border-radius: 16px;
  padding: 12px;
}

.ept-responsive-qa__score strong,
.ept-responsive-qa__score span {
  display: block;
}

.ept-responsive-qa__score strong {
  color: var(--ept-text) !important;
  font-size: 1.45rem;
  line-height: 1;
}

.ept-responsive-qa__score span {
  color: var(--ept-muted) !important;
  font-size: .78rem;
  font-weight: 800;
  margin-top: 5px;
}

.ept-responsive-qa__breakpoints {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ept-responsive-qa__breakpoints div {
  background: var(--ept-primary-soft);
  border: 1px solid rgba(191, 219, 254, .82);
  border-radius: 16px;
  padding: 12px;
}

.ept-responsive-qa__breakpoints strong,
.ept-responsive-qa__breakpoints span {
  display: block;
}

.ept-responsive-qa__breakpoints span {
  color: var(--ept-muted-strong) !important;
  font-size: .78rem;
  margin-top: 4px;
}

.ept-responsive-qa__list {
  display: grid;
  gap: 10px;
}

.ept-responsive-qa__item {
  align-items: flex-start;
  background: rgba(248, 250, 252, .92);
  border: 1px solid var(--ept-border);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.ept-responsive-qa__item.is-pass {
  background: var(--ept-responsive-pass-bg);
  border-color: var(--ept-responsive-pass-border);
}

.ept-responsive-qa__item.is-warn {
  background: var(--ept-responsive-warn-bg);
  border-color: var(--ept-responsive-warn-border);
}

.ept-responsive-qa__item.is-fail {
  background: var(--ept-responsive-fail-bg);
  border-color: var(--ept-responsive-fail-border);
}

.ept-responsive-qa__mark {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 950;
  justify-content: center;
  min-width: 42px;
  padding: 5px 8px;
  text-transform: uppercase;
}

.ept-responsive-qa__item.is-pass .ept-responsive-qa__mark {
  background: #fff;
  color: var(--ept-success-text) !important;
}

.ept-responsive-qa__item.is-warn .ept-responsive-qa__mark {
  background: #fff;
  color: var(--ept-warning-text) !important;
}

.ept-responsive-qa__item.is-fail .ept-responsive-qa__mark {
  background: #fff;
  color: var(--ept-error-text) !important;
}

.ept-responsive-qa__copy strong,
.ept-responsive-qa__copy span {
  display: block;
}

.ept-responsive-qa__copy span {
  color: var(--ept-muted-strong) !important;
  font-size: .82rem;
  margin-top: 3px;
}

.ept-responsive-qa.is-checked {
  animation: ept-responsive-qa-flash .55s ease;
}

@keyframes ept-responsive-qa-flash {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .28); }
  100% { box-shadow: var(--ept-shadow-soft); }
}

/* Responsive hardening for the finalized production design. */
.ept-bench .ept-flow-template__bar,
.ept-bench .ept-flow-workspace__toolbar,
.ept-bench .ept-flow-result__actions,
.ept-bench .ept-mode-switch {
  flex-wrap: wrap;
}

.ept-bench .ept-flow-paper canvas,
.ept-bench canvas[data-ept-production-canvas],
.ept-bench canvas[data-ept-shared-canvas] {
  height: auto;
  max-width: 100%;
}

.ept-bench .ept-flow-template__name,
.ept-bench .ept-production-file-strip strong,
.ept-bench .ept-flow-result-file__name {
  min-width: 0;
}

@media (max-width: 1120px) {
  .ept-bench .ept-grid {
    grid-template-columns: 1fr;
  }

  .ept-bench .ept-side {
    order: 2;
  }
}

@media (max-width: 900px) {
  .ept-responsive-qa__header,
  .ept-responsive-qa__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ept-responsive-qa__breakpoints,
  .ept-responsive-qa__scoreboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ept-bench .ept-shell {
    border-radius: 22px;
    margin: 12px auto;
    padding: 12px;
  }

  .ept-bench .ept-shell__topbar,
  .ept-bench .ept-shell__header,
  .ept-bench .ept-responsive-qa__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ept-bench .ept-mode-switch,
  .ept-bench .ept-mode-switch .ept-button,
  .ept-bench .ept-flow-template__actions,
  .ept-bench .ept-flow-template__actions .ept-button,
  .ept-bench .ept-flow-result__actions,
  .ept-bench .ept-flow-result__actions .ept-button,
  .ept-responsive-qa__toolbar .ept-button {
    width: 100%;
  }

  .ept-bench .ept-start-final .ept-flow-start {
    min-height: auto;
  }

  .ept-bench .ept-flow-workspace__canvas {
    min-height: min(440px, 74vh);
  }
}

@media (max-width: 480px) {
  .ept-bench .ept-flow-start h3,
  .ept-bench .ept-shell__title {
    overflow-wrap: anywhere;
  }

  .ept-bench .ept-flow-template,
  .ept-bench .ept-flow-workspace,
  .ept-bench .ept-flow-result__ready {
    border-radius: 18px;
  }

  .ept-responsive-qa__item {
    grid-template-columns: 1fr;
  }
}