/**
 * Tool-only styles for Rank-Based Tests.
 *
 * Deliberately short. The headline cards (.metric-headline__*) come from
 * shared/css/plain-readout.css; .scenario-description, .chart-note, .data-table
 * and the .dsc-panel data-source panels come from main.css. Nothing in here may
 * redefine a class those files already own.
 */

.scenario-vars {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

.scenario-vars th,
.scenario-vars td {
  border-bottom: 1px solid var(--app-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-size: 0.9rem;
}

.scenario-look,
.scenario-questions {
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--app-accent);
  background: var(--app-card-bg);
  border-radius: 0 6px 6px 0;
}

/* A per-app class, per the main.css responsive block. The state class is what
   Professor Mode reads, so the colour and the class must always move together.
   Colour is never the only signal: the verdict text states the outcome too.
   Four states, same vocabulary as the t-test, chi-square and ANOVA cards. */
.decision-card {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  border-left: 6px solid var(--app-muted);
  background: var(--app-bg);
}

.decision-card.decision-success {
  border-left-color: var(--app-success);
}

.decision-card.decision-warning {
  border-left-color: var(--app-warning);
}

.decision-card.decision-danger {
  border-left-color: var(--app-danger);
}

.decision-card.decision-pending {
  border-left-color: var(--app-muted);
}

.decision-verdict {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.decision-detail {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--app-muted);
}

/* Named -body rather than -panel: content-blocks.css already owns
   .comparison-panel for a side-by-side column, which is a different thing. */
.comparison-details > summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--app-accent-dark);
  padding: 0.35rem 0;
}

.comparison-body {
  margin-top: 0.9rem;
}

.compare-verdict {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.what-if {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--app-bg);
  border: 1px solid var(--app-warning);
  border-radius: 8px;
}

.what-if__label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.what-if__note {
  margin: 0.45rem 0 0 1.6rem;
  font-size: 0.86rem;
  color: var(--app-muted);
}