.diagnostic-workbench.website-page,
.diagnostic-workbench .website-tool {
  max-width: 1320px;
}
.website-tool .page-intro {
  padding: 0;
  margin-bottom: 20px;
}
.website-tool .developer-content {
  max-width: none;
}
.website-tool .website-check-panel {
  background: var(--paper-bright);
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.inspection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.inspection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}
.inspection-summary p {
  margin: 0;
  max-width: 90ch;
}
.inspection-summary button {
  flex-shrink: 0;
}
.inspection-state {
  font-size: 12px;
  color: var(--muted);
}
.inspection-state[data-state='completed'] {
  color: #0c7a62;
}
.inspection-value {
  font: 600 24px/1.3 var(--mono);
  margin: 16px 0 8px;
  overflow-wrap: anywhere;
}
.inspection-grid .diagnostic-card h2,
.inspection-options h2 {
  font-size: 17px;
}
.inspection-grid details,
.inspection-options details {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
#website-inspection summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
#website-inspection dl {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
  gap: 8px 16px;
  font-size: 13px;
}
#website-inspection dt {
  color: var(--muted);
  overflow-wrap: anywhere;
}
#website-inspection dd {
  margin: 0;
  font-family: var(--mono);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.inspection-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
  align-items: start;
}
.inspection-options button {
  margin: 0 8px 12px 0;
}
.diagnostic-workbench .inspection-export {
  margin: 8px 0;
  padding: 0 16px;
}
.inspection-export textarea {
  width: 100%;
  font: 12px/1.5 var(--mono);
}
.inspection-export pre {
  overflow-x: auto;
  max-width: 100%;
  font-size: 12px;
}
.website-tool input,
.website-tool button {
  min-height: 44px;
}
@media (max-width: 699px) {
  .inspection-grid,
  .inspection-options {
    grid-template-columns: 1fr;
  }
  .inspection-summary {
    align-items: start;
    flex-direction: column;
  }
  #website-inspection dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #website-inspection dd {
    margin-bottom: 10px;
  }
  .website-tool .website-input-row {
    flex-wrap: wrap;
  }
  .website-tool .website-input-row input {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}
.inspection-progress {
  font-size: 13px;
  margin: 0;
}
.inspection-bar {
  flex-basis: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--rule, #c8d7e2);
  overflow: hidden;
}
.inspection-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent, #2a63ff);
  transition: width 200ms ease;
}
.inspection-bar[data-state='done'] span {
  background: #0c7a62;
}
.inspection-bar[data-state='attention'] span {
  background: var(--warning, #9a6a00);
}
@media (prefers-reduced-motion: reduce) {
  .inspection-bar span {
    transition: none;
  }
}
.inspection-run-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 24px 0 8px;
}
.inspection-run-all .inspection-progress,
.inspection-run-all .inspection-bar {
  flex-basis: 100%;
}
.inspection-run-all .inspection-progress {
  margin-top: 4px;
}
.inspection-run-all p {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}
.inspection-options .inspection-row {
  border-top: 1px solid var(--rule);
  padding: 10px 0 4px;
}
.inspection-options .inspection-row > p {
  margin: 0 0 6px;
}
.inspection-options .inspection-row p:first-child {
  font-weight: 600;
}
.inspection-about {
  font-size: 13px;
}
.inspection-about p {
  margin: 6px 0;
}
.inspection-about ul {
  margin: 4px 0 8px;
  padding-left: 18px;
}
.diagnostic-workbench .inspection-advisories {
  margin: 0 0 20px;
}
.inspection-advisories h2 {
  font-size: 17px;
  margin: 0 0 4px;
}
.inspection-advisories > p {
  margin: 0 0 8px;
}
.advisory-level {
  border-top: 1px solid var(--rule);
  padding: 6px 0;
}
.advisory-level summary {
  font-weight: 600;
}
.advisory-level ul {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.advisory-level li {
  padding: 4px 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.advisory-jump {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  min-height: 0;
}
.advisory-critical summary,
.advisory-critical .advisory-jump {
  color: #a3132b;
}
.advisory-issue summary,
.advisory-issue .advisory-jump {
  color: var(--target);
}
.advisory-warning summary,
.advisory-warning .advisory-jump {
  color: var(--warning);
}
.advisory-pass summary,
.advisory-pass .advisory-jump {
  color: var(--verified);
}
.diagnostic-workbench .inspection-tools {
  margin: 20px 0;
}
.inspection-tools ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.inspection-state[data-state='pending'],
.inspection-state[data-state='running'] {
  color: var(--accent);
}
.website-tool .what-we-check {
  margin-top: 32px;
}
.website-tool .what-we-check dl {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr);
  gap: 10px 20px;
}
.website-tool .what-we-check dt {
  font-weight: 600;
}
.website-tool .what-we-check dd {
  margin: 0;
}
@media (max-width: 699px) {
  .website-tool .what-we-check dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .website-tool .what-we-check dd {
    margin-bottom: 10px;
  }
}