/* Champion Sim — action-based debrief (postmortem v2).

   Every debrief rule lives here. The roots keep the .champion-postmortem /
   .champion-postmortem-side class names because the browser tests and the
   fuzzer find the debrief by them; everything inside is .champion-debrief__*. */

/* ── Side panel (≥ 880px): beside the phone ─────────────────────────── */
.champion-postmortem-side {
  flex: 0 1 520px;
  max-width: min(520px, 42vw);
  min-width: 0;
  /* As tall as the phone (the base sheet sizes both from this variable);
     long lists scroll inside the panel instead of growing the page. */
  height: var(--champion-phone-rendered-h);
  display: flex;
  container-type: inline-size;
  animation: champion-debrief-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Side tracks. The call transcript (inserted before the phone) and the
   debrief (appended after it) each re-centred the row as they came and
   went, sliding the phone's buttons out from under the cursor. A panel on
   its own now gets an empty twin on the phone's other side, and with both
   up the debrief takes the transcript's width, so the phone sits in the
   same place in every state. The transcript sizes below mirror the base
   sheet's .champion-call-transcript-side (360px, at most 30vw, 22px
   padding + 1px border); scripts/test-champion-debrief.js fails if the two
   drift apart.
   The padding matters because when the row is too narrow for both tracks
   (880-1000px wide), flex shrinks each one in proportion to its width
   inside padding and border: 314px for the transcript. */
.champion-sim__main:has(> .champion-postmortem-side):not(:has(> .champion-call-transcript-side))::before {
  content: '';
  flex: 0 1 520px;
  max-width: min(520px, 42vw);
}
/* Below 880px the transcript is hidden (the call screen captions instead),
   so it needs no twin there. Pseudo-elements miss the site's `*`
   border-box reset, so the twin sets it. */
@media (min-width: 880px) {
  .champion-sim__main:has(> .champion-call-transcript-side):not(:has(> .champion-postmortem-side))::after {
    content: '';
    flex: 0 1 360px;
    max-width: min(360px, 30vw);
    box-sizing: border-box;
    padding-inline: 23px;
  }
}
/* The debrief has no padding, so a lower shrink factor gives it the
   transcript's weight: (360 - 2 * 23) / 360. */
.champion-sim__main:has(> .champion-call-transcript-side) > .champion-postmortem-side {
  flex-basis: 360px;
  flex-shrink: 0.8722;
  max-width: min(360px, 30vw);
}

/* ── Overlay (< 880px): a full sheet over the phone's viewport ─────── */
.champion-postmortem {
  position: absolute; inset: 0; z-index: 500;
  display: flex;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
  animation: champion-debrief-rise 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── Panel: pinned head / scrolling body / pinned foot ─────────────── */
.champion-debrief {
  --debrief-ink: #111827;
  --debrief-muted: #6b7280;
  --debrief-line: #e5e7eb;
  --debrief-accent: #0f766e;
  --debrief-pad: 24px;
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--debrief-ink);
  font-family: var(--font-sans, 'Source Sans 3', sans-serif);
  text-align: left;
}
/* show() focuses the panel so the next Tab starts inside it. The panel is
   not a control, so it gets no ring; its links and Continue keep theirs. */
.champion-debrief:focus { outline: none; }
.champion-postmortem-side .champion-debrief {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.champion-debrief__head {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 20px var(--debrief-pad) 16px;
  border-bottom: 1px solid var(--debrief-line);
}
.champion-debrief__verdict {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.champion-debrief__verdict--saved { background: #dcfce7; color: #166534; }
.champion-debrief__verdict--partial { background: #fef3c7; color: #92400e; }
.champion-debrief__verdict--lost { background: #fee2e2; color: #991b1b; }

/* With an outcome line, the outcome is the headline and the scenario title
   is context beside the pill. Legacy debriefs have no outcome, so the title
   stays the headline. */
.champion-debrief__title {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: var(--debrief-ink);
  overflow-wrap: anywhere;
}
.champion-debrief__head:has(.champion-debrief__outcome) .champion-debrief__title {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--debrief-muted);
}
.champion-debrief__training {
  flex: 1 1 100%; margin: 4px 0 0;
  font-size: 12px; line-height: 1.3; color: var(--debrief-muted);
}
.champion-debrief__outcome {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: 20px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Scroll shadows: the 'local' white layers cover the 'scroll' shadow layers
   at whichever end has nothing more to show, so a shadow appears only where
   there is more content to scroll to. */
.champion-debrief__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px var(--debrief-pad) 18px;
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) center bottom / 100% 10px no-repeat scroll;
  background-color: #fff;
}
.champion-debrief__section { margin-top: 18px; }
.champion-debrief__kicker {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--debrief-muted);
}

.champion-debrief__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.champion-debrief__item {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  font-size: 15px; line-height: 20px;
  overflow-wrap: anywhere;
}
.champion-debrief__mark {
  flex: 0 0 20px;
  height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.champion-debrief__item--good .champion-debrief__mark { background: #dcfce7; color: #15803d; }
.champion-debrief__item--bad .champion-debrief__mark { background: #fee2e2; color: #b91c1c; }
.champion-debrief__item--missed .champion-debrief__mark { background: #fef3c7; color: #b45309; }
.champion-debrief__item--step .champion-debrief__mark { background: #f1f5f9; color: #475569; font-size: 11px; }
.champion-debrief__text { flex: 1 1 auto; min-width: 0; }

.champion-debrief__rule {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--debrief-accent);
  border-radius: 0 8px 8px 0;
  background: #f0fdfa;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: #134e4a;
  overflow-wrap: anywhere;
}

/* Legacy (pre-v2 scenarios): the four resolution paragraphs. */
.champion-debrief__para {
  margin: 0;
  font-size: 14px; line-height: 1.5;
  color: #374151;
  overflow-wrap: anywhere;
}

.champion-debrief__links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.champion-debrief__link {
  padding: 3px 0;
  font-size: 14px; line-height: 1.35;
  color: var(--debrief-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.champion-debrief__link:hover { text-decoration: underline; }

.champion-debrief__foot {
  flex-shrink: 0;
  padding: 12px var(--debrief-pad) 20px;
  border-top: 1px solid var(--debrief-line);
  background: #fff;
}
.champion-debrief__continue {
  display: block; width: 100%;
  margin: 0; padding: 11px 16px;
  border: 0; border-radius: 10px;
  background: var(--debrief-accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  cursor: pointer;
}
.champion-debrief__continue:hover { background: #115e59; }
.champion-debrief__continue:focus-visible { outline: 2px solid var(--debrief-accent); outline-offset: 2px; }

/* Narrow panels (the in-phone sheet on phones, a squeezed side panel):
   tighter padding and type so each item stays on one or two lines. */
@container (max-width: 360px) {
  .champion-debrief { --debrief-pad: 16px; }
  .champion-debrief__head { padding-top: 14px; padding-bottom: 12px; }
  .champion-debrief__outcome { font-size: 17px; }
  .champion-debrief__title { font-size: 17px; }
  .champion-debrief__section { margin-top: 14px; }
  .champion-debrief__item { font-size: 14px; gap: 8px; }
  .champion-debrief__rule { font-size: 14px; padding: 8px 10px; }
  .champion-debrief__foot { padding-top: 10px; padding-bottom: 16px; }
}
@container (max-width: 240px) {
  .champion-debrief { --debrief-pad: 12px; }
  .champion-debrief__head { padding-top: 12px; padding-bottom: 10px; }
  /* Every line counts at this size: the outcome is the headline, so the
     scenario name leaves the view (it stays the dialog's accessible name). */
  .champion-debrief__head:has(.champion-debrief__outcome) .champion-debrief__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .champion-debrief__outcome { margin-top: 2px; font-size: 16px; }
  .champion-debrief__foot { padding-top: 8px; padding-bottom: 12px; }
  .champion-debrief__continue { padding: 9px 12px; font-size: 14px; }
  .champion-debrief__item { font-size: 13px; line-height: 18px; }
  .champion-debrief__mark { flex-basis: 18px; height: 18px; font-size: 11px; }
  .champion-debrief__para, .champion-debrief__link { font-size: 13px; }
}

@keyframes champion-debrief-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes champion-debrief-rise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .champion-postmortem, .champion-postmortem-side { animation: none; }
}