/* Partwright components: plain CSS on the tokens. */

.pw-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 16px/20px var(--font-body);
  padding: 12px 20px; border-radius: var(--radius-m);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.pw-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pw-btn--primary { background: var(--layout-blue); color: var(--scribe); }
.pw-btn--primary:hover { background: var(--layout-blue-deep); }
.pw-btn--marker { background: var(--marker); color: var(--on-marker); }
.pw-btn--marker:hover { box-shadow: inset 0 0 0 2px var(--on-marker); }
.pw-btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.pw-btn--quiet:hover { border-color: var(--ink); }

.pw-check {
  display: grid; grid-template-columns: 4.5em 1fr auto; gap: var(--space-3);
  align-items: baseline; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  font: 500 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink);
}
.pw-check__state { font-weight: 600; letter-spacing: .06em; }
.pw-check--pass .pw-check__state { color: var(--pass); }
.pw-check--fail .pw-check__state { color: var(--fail); }
.pw-check__what { font-family: var(--font-body); font-size: 15px; color: var(--ink); min-width: 0; }
.pw-check__value { color: var(--ink); white-space: nowrap; }
.pw-check__value small { color: var(--ink-faint); font-size: 12px; margin-left: var(--space-1); }

.pw-example {
  display: grid; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-m); overflow: hidden; color: var(--ink);
}
.pw-example__media {
  aspect-ratio: 16 / 10; background: var(--surface-sunk); position: relative;
  display: grid; place-items: center; max-width: 100%;
}
.pw-example__media img, .pw-example__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-example__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.pw-example__prompt { font: 400 17px/26px var(--font-body); margin: 0; }
.pw-example__prompt::before { content: "\201C"; }
.pw-example__prompt::after { content: "\201D"; }
.pw-example__block {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-s); width: fit-content; max-width: 100%;
}
.pw-example__block div { padding: 6px 10px; border-right: 1px solid var(--rule-strong); }
.pw-example__block div:last-child { border-right: 0; }
.pw-example__block dt { font: 600 10px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pw-example__block dd { margin: 0; font: 500 13px/18px var(--font-mono); font-variant-numeric: tabular-nums; }