/* px_test_detail_html, root .ptd-wrap. The root rule stays bare, every other
   selector is scoped :where(.ptd-wrap), which adds zero specificity. No
   element that takes the hidden class at the end has another display rule,
   so it needs no compound. */

/* Greenwood × PX T-TEST-DETAIL — admin read-only shell.
   Wireframe ref: training_wireframes.html lines 397-417
   (.tabs segmented strip with moss-tone active state).

   Title in Instrument Serif italic; tab strip uses the
   segmented Greenwood pattern (moss active background). */

.ptd-wrap {
  padding: var(--ch-space-lg);
  font-family: var(--gw-font);
  color: var(--gw-ink);
}
:where(.ptd-wrap) .ptd-page-header {
  display: flex; align-items: center; gap: var(--ch-space-md);
  margin-bottom: var(--ch-space-md); flex-wrap: wrap;
}
:where(.ptd-wrap) .ptd-back-btn {
  background: transparent; border: 1px solid var(--gw-bd);
  color: var(--gw-ink-2); border-radius: var(--gw-r-sm);
  padding: 6px 14px; font-size: 13px; cursor: pointer;
  font-family: var(--gw-font); font-weight: 600;
}
:where(.ptd-wrap) .ptd-back-btn:hover {
  color: var(--gw-brand-d); border-color: var(--gw-bd-2);
  background: var(--gw-paper-2);
}
:where(.ptd-wrap) .ptd-title-block {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}
:where(.ptd-wrap) .ptd-title {
  font-size: 22px; margin: 0; line-height: 1.2;
  color: var(--gw-ink);
  letter-spacing: -0.01em; font-weight: 600;
}
:where(.ptd-wrap) .ptd-title-emph {
  font-family: var(--gw-font-emph);
  font-style: italic; font-weight: 400;
  color: var(--gw-brand-d);
}

:where(.ptd-wrap) .ptd-state-chip {
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--gw-r-pill);
}
:where(.ptd-wrap) .ptd-state--draft {
  background: var(--gw-warn-pale); color: var(--gw-warn-c);
}
:where(.ptd-wrap) .ptd-state--published {
  background: var(--gw-success-pale); color: var(--gw-success);
}
:where(.ptd-wrap) .ptd-state--archived {
  background: var(--gw-paper-2); color: var(--gw-mute);
  border: 1px solid var(--gw-bd);
}
:where(.ptd-wrap) .ptd-required-chip {
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--gw-r-pill);
  background: var(--gw-moss); color: #fff;
}
:where(.ptd-wrap) .ptd-meta-line {
  font-size: 12.5px; color: var(--gw-mute);
  margin-bottom: var(--ch-space-md);
  font-family: var(--gw-font-mono);
}

/* Segmented tab strip per wireframe lines 397-417 — pill
   container with moss-active tab. */
:where(.ptd-wrap) .ptd-tab-strip {
  display: inline-flex;
  background: var(--gw-paper); padding: 4px;
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-shadow-1);
  margin-bottom: var(--ch-space-md);
  flex-wrap: wrap; gap: 2px;
}
:where(.ptd-wrap) .ptd-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 18px; font-size: 13px; font-weight: 500;
  color: var(--gw-ink-2);
  font-family: var(--gw-font);
  border-radius: var(--gw-r-sm);
  white-space: nowrap;
  transition: background var(--gw-t), color var(--gw-t);
}
:where(.ptd-wrap) .ptd-tab:hover {
  color: var(--gw-ink);
  background: var(--gw-paper-2);
}
:where(.ptd-wrap) .ptd-tab.active {
  background: var(--gw-moss); color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgba(62, 107, 79, 0.5);
}
:where(.ptd-wrap) .ptd-tab:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}

:where(.ptd-wrap) .ptd-tab-pane {
  display: none;
  background: var(--gw-paper);
  border: 1px solid var(--gw-bd);
  border-radius: var(--gw-r-lg);
  padding: 18px 20px;
  box-shadow: var(--gw-shadow-1);
}
:where(.ptd-wrap) .ptd-tab-pane.active { display: block; }

:where(.ptd-wrap) .ptd-loading, :where(.ptd-wrap) .ptd-error {
  text-align: center; padding: 48px var(--ch-space-lg);
  color: var(--gw-mute); font-size: 14px;
  background: var(--gw-paper);
  border: 1px dashed var(--gw-bd);
  border-radius: var(--gw-r-lg);
}
:where(.ptd-wrap) .ptd-error {
  color: var(--gw-danger); border-color: var(--gw-danger);
}
:where(.ptd-wrap) .ptd-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--gw-bd);
  border-top-color: var(--gw-brand);
  border-radius: 50%; animation: ptd-spin 1s linear infinite;
  margin: 0 auto var(--ch-space-md);
}
@keyframes ptd-spin { to { transform: rotate(360deg); } }
:where(.ptd-wrap) .ptd-hidden { display: none; }