/* ADP Live Playground v0.1 -- additive stylesheet, does not modify
   style.css. Reuses the existing dark-ink/gold brand variables defined
   in style.css (loaded before this file), falls back to literal values
   if a variable is undefined. */

.pg-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 16px 96px;
}

.pg-back {
  display: inline-block;
  margin-bottom: 24px;
  color: #c9a227;
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
}

.pg-header { margin-bottom: 32px; }

.pg-title {
  font-family: "Fraunces", serif;
  font-size: 2rem;
  color: #f5f1e6;
  margin: 8px 0 16px;
}

.pg-sub {
  font-family: "IBM Plex Mono", monospace;
  color: #a9a496;
  line-height: 1.6;
  font-size: 0.92rem;
}

.pg-input-card {
  background: #11151f;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.pg-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  color: #c9a227;
  margin-bottom: 8px;
}

.pg-textarea {
  width: 100%;
  background: #0b0e14;
  color: #f5f1e6;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 16px;
}

.pg-error {
  color: #c1432d;
  font-family: "IBM Plex Mono", monospace;
  margin-top: 12px;
  white-space: pre-wrap;
}

.pg-flow { display: flex; flex-direction: column; gap: 20px; }

.pg-step {
  background: #11151f;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 20px;
}

.pg-step-head {
  font-family: "IBM Plex Mono", monospace;
  color: #c9a227;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.pg-step-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: #c9a227;
  color: #0b0e14;
  margin-right: 8px;
  font-weight: 700;
}

.pg-step-body { color: #d9d4c7; font-size: 0.9rem; line-height: 1.6; }
.pg-mono { font-family: "IBM Plex Mono", monospace; }
.pg-mono-small { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: #8a8575; margin-top: 4px; }

.pg-criteria-list { margin: 8px 0; padding-left: 20px; }
.pg-criteria-list li { margin-bottom: 4px; }

.pg-scenario-card {
  border-left: 3px solid #c9a227;
  padding: 10px 14px;
  margin: 12px 0;
  background: #0b0e14;
}
.pg-scenario-title { font-weight: 700; color: #f5f1e6; margin-bottom: 6px; }
.pg-uncertainty { font-style: italic; color: #8a8575; margin-top: 6px; font-size: 0.82rem; }
.pg-disclaimer { margin-top: 16px; font-size: 0.78rem; color: #8a8575; border-top: 1px dashed #2a2f3a; padding-top: 10px; }

.pg-check-table { display: flex; flex-direction: column; gap: 6px; }
.pg-check-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  align-items: center;
}
.pg-check-row.pg-pass { background: rgba(201, 162, 39, 0.08); }
.pg-check-row.pg-fail { background: rgba(193, 67, 45, 0.12); }
.pg-check-name { font-family: "IBM Plex Mono", monospace; }
.pg-check-status { font-weight: 700; }
.pg-check-row.pg-pass .pg-check-status { color: #c9a227; }
.pg-check-row.pg-fail .pg-check-status { color: #c1432d; }
.pg-check-class { font-size: 0.72rem; color: #8a8575; }
.pg-check-detail { grid-column: 1 / -1; font-size: 0.78rem; color: #a9a496; }

.pg-pass-big { color: #c9a227; font-size: 1.3rem; font-weight: 700; }
.pg-fail-big { color: #c1432d; font-size: 1.3rem; font-weight: 700; }
/* PASS_WITH_UNVERIFIABLE_CLAIMS -- a SUCCESS state with an honest caveat.
   Deliberately distinct from both plain PASS (solid gold) and FAIL (red):
   gold text with a dashed amber border/background wash, signalling
   "accepted, but read the note below" rather than a clean pass. */
.pg-pass-caveat-big {
  color: #c9a227;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px dashed #c9a227;
  background: rgba(201, 162, 39, 0.08);
  padding: 6px 10px;
  display: inline-block;
}
/* PASS_WITH_EVIDENCE_SUPPORTED_CLAIMS -- also a SUCCESS state, a WEAKER
   caveat than PASS_WITH_UNVERIFIABLE_CLAIMS: cited-but-not-independently-
   re-derived evidence, not an unprovable prediction. Same dashed-border
   treatment as the caveat-pass state, but in the cooler evidence color
   so the two caveat strengths stay visually distinguishable. */
.pg-pass-evidence-big {
  color: #5aa0aa;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px dashed #5aa0aa;
  background: rgba(90, 160, 170, 0.08);
  padding: 6px 10px;
  display: inline-block;
}
.pg-outcome-explanation { font-size: 0.82rem; color: #a9a496; margin-top: 4px; max-width: 60ch; }
.pg-pass { color: #c9a227; }
.pg-fail { color: #c1432d; }
.pg-settlement { font-family: "IBM Plex Mono", monospace; margin-top: 8px; }

.pg-break {
  margin-top: 32px;
  background: #11151f;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 20px;
}
.pg-break-title { color: #c1432d; font-family: "Fraunces", serif; margin-bottom: 8px; }
.pg-break-sub { color: #8a8575; font-size: 0.85rem; margin-bottom: 16px; }
.pg-break-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

@media (max-width: 480px) {
  .pg-title { font-size: 1.5rem; }
  .pg-check-row { grid-template-columns: 1fr; }
}

/* v0.2: SKELO provider identity badge -- additive, no existing rule changed. */
.pg-provider-badge {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #c9a227;
  border: 1px solid #c9a227;
  border-radius: 3px;
  padding: 2px 8px;
  margin-bottom: 10px;
}

/* v0.2: REAL TEST EXPERIENCE -- tabs, presets, build-your-own-deal form,
   NOT-VERIFIABLE check state, connect-docs link. All additive. */
.pg-sub-small { font-size: 0.8rem; margin-top: 10px; opacity: 0.85; }

.pg-tabs { display: flex; gap: 8px; margin: 24px 0 20px; flex-wrap: wrap; }
.pg-tab {
  background: transparent;
  border: 1px solid #2a2f3a;
  color: #a9a496;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.pg-tab.active { color: #0b0e14; background: #c9a227; border-color: #c9a227; font-weight: 700; }

.pg-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.pg-criteria-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pg-check-line, .pg-field-line {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: #d9d4c7;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pg-num { width: 70px; background: #0b0e14; color: #f5f1e6; border: 1px solid #2a2f3a; border-radius: 4px; padding: 4px 6px; }
.pg-text, .pg-check-line select, .pg-field-line select {
  background: #0b0e14;
  color: #f5f1e6;
  border: 1px solid #2a2f3a;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: "IBM Plex Mono", monospace;
  flex: 1;
  min-width: 160px;
}

.pg-check-row.pg-notverifiable { background: rgba(169, 164, 150, 0.12); }
.pg-check-row.pg-notverifiable .pg-check-status { color: #a9a496; }

.pg-check-row.pg-inconclusive { background: rgba(193, 67, 45, 0.08); }
.pg-check-row.pg-inconclusive .pg-check-status { color: #c1432d; }

/* EVIDENCE SUPPORTED -- a claim backed by cited, checkable sources that
   ADP did not itself independently re-derive from live data. Distinct
   from NOT VERIFIABLE (predictive/judgment claims, grey) and from
   OBJECTIVELY VERIFIED (plain gold pass): a cooler cyan-ish wash signals
   "accepted on cited evidence", not a plain pass and not a caveat-free
   independent check. */
.pg-check-row.pg-evidence-supported { background: rgba(90, 160, 170, 0.12); }
.pg-check-row.pg-evidence-supported .pg-check-status { color: #5aa0aa; }

.pg-tech-details { margin-top: 10px; }
.pg-tech-details summary { cursor: pointer; color: #8a8575; font-size: 0.78rem; font-family: "IBM Plex Mono", monospace; }
.pg-tech-details pre { white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; color: #8a8575; margin-top: 8px; }

.pg-link { color: #c9a227; }

@media (max-width: 480px) {
  .pg-tabs { gap: 6px; }
  .pg-tab { font-size: 0.74rem; padding: 6px 10px; }
}