/* t_result_html, root .tr-wrap.
   Each rule is scoped :where(.tr-wrap), which adds no specificity; the root rule itself stays
   bare. The ring's starting --pct: 0 comes from the .tr-ring rule; the module writes --pct
   inline at runtime. */
/* Greenwood × PX T-RESULT — pass/fail outcome card.
   Wireframe ref: training_wireframes.html lines 334-355
   (.result-panel) and 1705-1742 (renderResult body).

   Pass = paper → success-pale linear-gradient with success
   border + Instrument Serif italic 'You passed.' headline +
   xl compliance ring tinted moss. Fail mirror in danger.

   Scoped under .tr-wrap; Greenwood chrome is owned by the
   training root. */

.tr-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--ch-space-lg);
  font-family: var(--gw-font);
  color: var(--gw-ink);
}

:where(.tr-wrap) .tr-panel {
  display: flex; gap: 22px;
  align-items: center; flex-wrap: wrap;
  background: var(--gw-paper);
  border-radius: var(--gw-r-lg);
  padding: 24px 26px;
  margin-bottom: 14px;
  border: 1px solid var(--gw-bd);
  box-shadow: var(--gw-shadow-2);
  position: relative; overflow: hidden;
  transition: background-color var(--gw-t), border-color var(--gw-t);
}
:where(.tr-wrap) .tr-panel[data-kind="passed"] {
  background: linear-gradient(135deg, var(--gw-paper) 0%, var(--gw-success-pale) 110%);
  border-color: var(--gw-success);
}
:where(.tr-wrap) .tr-panel[data-kind="failed"] {
  background: linear-gradient(135deg, var(--gw-paper) 0%, var(--gw-danger-pale) 110%);
  border-color: var(--gw-danger);
}

/* XL compliance ring — 120px conic; tone-tinted by data-kind. */
:where(.tr-wrap) .tr-ring-wrap { flex-shrink: 0; }
:where(.tr-wrap) .tr-ring {
  --pct: 0;
  --c: var(--gw-success);
  width: 120px; height: 120px; border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--c) calc(var(--pct) * 1%), var(--gw-paper-2) 0);
  box-shadow: inset 0 0 0 8px var(--gw-paper);
  display: grid; place-items: center;
}
:where(.tr-wrap) .tr-ring::after {
  content: ""; position: absolute; inset: 11px;
  border-radius: 50%; background: var(--gw-paper);
}
:where(.tr-wrap) .tr-ring-label {
  position: relative; z-index: 1;
  font-family: var(--gw-font-brand);
  font-size: 32px; color: var(--gw-ink);
  letter-spacing: -0.04em; line-height: 1;
}
:where(.tr-wrap) .tr-ring-label small {
  font-family: var(--gw-font); font-size: 14px;
  color: var(--gw-mute); font-weight: 500;
  letter-spacing: 0; margin-left: 2px;
}
:where(.tr-wrap) .tr-panel[data-kind="passed"] .tr-ring { --c: var(--gw-success); }
:where(.tr-wrap) .tr-panel[data-kind="failed"] .tr-ring { --c: var(--gw-danger); }

:where(.tr-wrap) .tr-body { flex: 1; min-width: 240px; }

/* Instrument Serif italic headline per wireframe lines 1714/1731. */
:where(.tr-wrap) .tr-headline {
  border: none; margin: 0 0 6px;
  font-size: 32px;
  font-family: var(--gw-font-emph);
  font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
}
:where(.tr-wrap) .tr-panel[data-kind="passed"] .tr-headline { color: var(--gw-success); }
:where(.tr-wrap) .tr-panel[data-kind="failed"] .tr-headline { color: var(--gw-danger); }

:where(.tr-wrap) .tr-encourage {
  margin: 0 0 4px;
  font-family: var(--gw-font-emph);
  font-style: italic; font-weight: 400;
  font-size: 17px;
  color: var(--gw-ink-2);
}
:where(.tr-wrap) .tr-score-line {
  margin: 0;
  color: var(--gw-ink-2);
  font-size: 14px;
}
:where(.tr-wrap) .tr-score-line strong { color: var(--gw-ink); font-weight: 600; }
:where(.tr-wrap) .tr-panel[data-kind="passed"] .tr-score-pct { color: var(--gw-success); }
:where(.tr-wrap) .tr-panel[data-kind="failed"] .tr-score-pct { color: var(--gw-danger); }

:where(.tr-wrap) .tr-cooldown {
  margin: 8px 0 0;
  color: var(--gw-ink-2);
  font-size: 13.5px;
  display: flex; gap: 6px;
  align-items: baseline; flex-wrap: wrap;
}
:where(.tr-wrap) .tr-cooldown[hidden] { display: none; }
:where(.tr-wrap) .tr-cooldown-value {
  font-family: var(--gw-font-mono);
  font-size: 16px;
  color: var(--gw-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:where(.tr-wrap) .tr-cooldown-note {
  font-size: 12px; color: var(--gw-mute);
}

:where(.tr-wrap) .tr-actions {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
:where(.tr-wrap) .tr-btn {
  padding: 10px 22px;
  font-size: 14px; font-weight: 600;
  font-family: var(--gw-font);
  border-radius: var(--gw-r-md);
  cursor: pointer; min-height: 40px;
  border: 1px solid var(--gw-bd);
  background: var(--gw-paper);
  color: var(--gw-ink-2);
  transition: background var(--gw-t), color var(--gw-t),
              border-color var(--gw-t);
}
:where(.tr-wrap) .tr-btn:hover:not(:disabled) {
  background: var(--gw-paper-2);
  color: var(--gw-ink);
  border-color: var(--gw-bd-2);
}
:where(.tr-wrap) .tr-btn:focus-visible {
  outline: 2px solid var(--gw-brand);
  outline-offset: 2px;
}
:where(.tr-wrap) .tr-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
:where(.tr-wrap) .tr-btn--primary {
  background: var(--gw-brand);
  color: #fff;
  border-color: var(--gw-brand);
}
:where(.tr-wrap) .tr-btn--primary:hover:not(:disabled) {
  background: var(--gw-brand-d);
  border-color: var(--gw-brand-d);
  color: #fff;
}
:where(.tr-wrap) .tr-btn[hidden] { display: none; }