/* ============================================================
   Shadow Interview — results coach-card flip mechanic.

   The three coach cards on the Shadow debrief screen (Best moment,
   Main fix, Next rep) become flippable. Front face keeps the existing
   calm, qualitative copy. Back face reveals the underlying numbers
   for that card.

   Behaviour mirrors the Speech flip (see speech-mode-results.css
   ".ted-flip-card-*") so the gesture and motion feel identical:
   tap anywhere on the card to flip, "← Back" button to flip back,
   keyboard Enter/Space/Escape, dynamic height matched to the
   currently visible face, reduced-motion cross-fade fallback.

   Aesthetic differs from Speech: this file uses Shadow's existing
   .kouli-coach-card chrome (border, dark gradient background,
   inset highlight, padding) on each face, so when not flipped the
   card looks identical to the static .kouli-coach-card it replaces.
   ============================================================ */

/* Outer wrapper is the perspective container. Strip the chrome that
   normally lives on .kouli-coach-card — chrome moves to the faces so
   backface-visibility has something to clip against. */
.kouli-coach-card.shadow-flip-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.kouli-coach-card.shadow-flip-card:focus-visible .shadow-flip-card-inner {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  border-radius: 18px;
}

/* Inner has its height set explicitly by JS to whichever face is
   currently visible. Front and back are absolute-positioned so
   neither contributes to layout. Height transition matches the
   transform transition so the card morphs smoothly during the flip. */
.shadow-flip-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 700ms cubic-bezier(0.55, 0.055, 0.1, 1),
    height 700ms cubic-bezier(0.55, 0.055, 0.1, 1);
}

.kouli-coach-card.shadow-flip-card.is-flipped .shadow-flip-card-inner {
  transform: rotateY(180deg);
}

.shadow-flip-card-front,
.shadow-flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
  /* Match .kouli-coach-card chrome exactly so non-flipped state is
     visually identical to the legacy static card. */
  padding: 16px 17px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(8, 8, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  display: flex;
  flex-direction: column;
}

.shadow-flip-card-back {
  transform: rotateY(180deg);
}

/* Tap-to-flip affordance (front face only). Matches the calm,
   uppercase-kicker rhythm of the rest of the results page. */
.shadow-flip-card-hint {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 800;
  user-select: none;
}

/* Back-face "← Back" pill — same text-link treatment as Speech. */
.shadow-flip-card-back-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 14px 0 0;
  padding: 6px 0 0;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
}

.shadow-flip-card-back-btn:hover,
.shadow-flip-card-back-btn:focus {
  outline: none;
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   Horizontal score bars (used on Best moment + Main fix backs).
   Purple family matches the rest of the kouli-results page.
   ============================================================ */
.shadow-flip-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 8px 0 0;
}

.shadow-flip-bar {
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  align-items: center;
  gap: 10px;
}

.shadow-flip-bar label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.shadow-flip-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.shadow-flip-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.82) 100%);
  transition: width 600ms cubic-bezier(0.4, 0.0, 0.1, 1);
}

/* Weakest aggregate lens on Main fix gets a quiet amber tint so the
   bar carries the same coach message as the front copy ("the thing to
   fix") without us having to write it in prose. */
.shadow-flip-bar.is-weak .shadow-flip-bar-fill {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.7) 0%, rgba(217, 119, 6, 0.85) 100%);
}

.shadow-flip-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.shadow-flip-bar.is-empty .shadow-flip-bar-value {
  color: rgba(255, 255, 255, 0.32);
}

/* Generic back-face primitives reused across all three cards. */
.shadow-flip-back-kicker {
  display: block;
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.shadow-flip-back-title {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94);
}

.shadow-flip-back-sublabel {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.shadow-flip-back-quote {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}

/* ============================================================
   Next rep back — stat lines + verdict mix segmented bar.
   Visually distinct from the bar-stack on Cards 1 and 2 so the
   three backs don't read as the same chart in three boxes.
   ============================================================ */
.shadow-flip-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0;
}

.shadow-flip-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.shadow-flip-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.shadow-flip-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

.shadow-flip-stat-value.is-empty {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

/* Segmented verdict mix bar. Each segment width is proportional to
   the verdict count; colour-coded so the eye reads strength left to
   right without us writing "good/bad" in copy. */
.shadow-flip-verdict-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.shadow-flip-verdict-seg {
  height: 100%;
  transition: width 600ms cubic-bezier(0.4, 0.0, 0.1, 1);
}

.shadow-flip-verdict-seg--strong    { background: linear-gradient(90deg, rgba(74, 222, 128, 0.85), rgba(34, 197, 94, 0.95)); }
.shadow-flip-verdict-seg--adequate  { background: linear-gradient(90deg, rgba(148, 163, 184, 0.85), rgba(100, 116, 139, 0.95)); }
.shadow-flip-verdict-seg--weak      { background: linear-gradient(90deg, rgba(251, 191, 36, 0.85), rgba(217, 119, 6, 0.95)); }
.shadow-flip-verdict-seg--diversion { background: linear-gradient(90deg, rgba(248, 113, 113, 0.85), rgba(220, 38, 38, 0.95)); }

.shadow-flip-verdict-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 8px 0 0;
}

.shadow-flip-verdict-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.shadow-flip-verdict-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.shadow-flip-verdict-dot--strong    { background: rgba(34, 197, 94, 0.95); }
.shadow-flip-verdict-dot--adequate  { background: rgba(148, 163, 184, 0.95); }
.shadow-flip-verdict-dot--weak      { background: rgba(217, 119, 6, 0.95); }
.shadow-flip-verdict-dot--diversion { background: rgba(220, 38, 38, 0.95); }

/* ============================================================
   Run it back — one-question deliberate practice loop.
   Lives inline on the Next rep back face.
   ============================================================ */
.shadow-run-rep {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.shadow-run-rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.shadow-run-rep-kicker {
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.shadow-run-rep-button,
.shadow-run-rep-submit {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.76rem;
  font-weight: 820;
  padding: 7px 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shadow-run-rep-button:hover,
.shadow-run-rep-button:focus-visible,
.shadow-run-rep-submit:hover,
.shadow-run-rep-submit:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.shadow-run-rep-button.is-secondary {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
}

.shadow-run-rep-submit:disabled {
  opacity: 0.55;
  cursor: wait;
}

.shadow-run-rep-question,
.shadow-run-rep-fix,
.shadow-run-rep-note {
  margin: 0 0 9px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.shadow-run-rep-fix {
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.76);
}

.shadow-run-rep-composer {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.shadow-run-rep-composer label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
}

.shadow-run-rep-composer textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(4, 4, 12, 0.66);
  color: rgba(255, 255, 255, 0.92);
  padding: 11px 12px;
  font: inherit;
  line-height: 1.45;
  box-sizing: border-box;
}

.shadow-run-rep-composer textarea:focus {
  outline: none;
  border-color: rgba(0, 196, 160, 0.58);
  box-shadow: 0 0 0 2px rgba(0, 196, 160, 0.18);
}

.shadow-run-rep-voice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.shadow-run-rep-record {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.shadow-run-rep-record:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shadow-run-rep-record:disabled {
  opacity: 0.55;
  cursor: default;
}

.shadow-run-rep-record-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  flex: 0 0 auto;
}

.shadow-run-rep-record.is-recording {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.16);
  color: rgba(254, 226, 226, 0.96);
}

.shadow-run-rep-record.is-recording .shadow-run-rep-record-icon {
  background: rgba(248, 113, 113, 0.98);
  animation: shadowRepPulse 1.1s ease-in-out infinite;
}

@keyframes shadowRepPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: 0.55; }
}

.shadow-run-rep-voice-status {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
  min-width: 0;
}

.shadow-run-rep-voice-status.is-error {
  color: rgba(254, 202, 202, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .shadow-run-rep-record.is-recording .shadow-run-rep-record-icon {
    animation: none;
  }
}

.shadow-run-rep-error {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.10);
  color: rgba(254, 202, 202, 0.94);
  font-size: 0.78rem;
  line-height: 1.35;
}

.shadow-run-rep-processing {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.46) 36%,
      rgba(255, 255, 255, 0.98) 46%,
      rgba(216, 231, 255, 1) 50%,
      rgba(255, 255, 255, 0.98) 54%,
      rgba(255, 255, 255, 0.46) 64%,
      rgba(255, 255, 255, 0.46) 100%
    );
  background-size: 240% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shadowRunRepFlashlight 2.8s ease-in-out infinite;
}

@keyframes shadowRunRepFlashlight {
  0%   { background-position: 140% 50%; }
  100% { background-position: -140% 50%; }
}

.shadow-run-rep-result {
  margin-top: 11px;
}

.shadow-run-rep-move {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.shadow-run-rep-move.is-up {
  border-color: rgba(74, 222, 128, 0.42);
  background: rgba(74, 222, 128, 0.10);
}

.shadow-run-rep-move.is-down {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.09);
}

.shadow-run-rep-move-label {
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.shadow-run-rep-move strong {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.94);
}

.shadow-run-rep-move span:last-child {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.76);
}

.shadow-run-rep-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
}

.shadow-run-rep-mini-move {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
}

.shadow-run-rep-answers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 12px;
}

.shadow-run-rep-answers div {
  padding: 10px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.shadow-run-rep-answers span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.shadow-run-rep-answers p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-height: 180px;
  overflow: auto;
}

@media (min-width: 640px) {
  .shadow-run-rep-answers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ============================================================
   Reduced motion: replace the 3D rotation with an instant
   cross-fade between faces. Height transition still works.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .shadow-flip-card-inner {
    transform: none !important;
    transition: none;
  }
  .shadow-flip-card-front,
  .shadow-flip-card-back {
    transform: none !important;
    transition: opacity 220ms ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .shadow-flip-card-back { opacity: 0; pointer-events: none; }
  .kouli-coach-card.shadow-flip-card.is-flipped .shadow-flip-card-front { opacity: 0; pointer-events: none; }
  .kouli-coach-card.shadow-flip-card.is-flipped .shadow-flip-card-back { opacity: 1; pointer-events: auto; }
  .shadow-flip-bar-fill,
  .shadow-flip-verdict-seg { transition: none; }
  .shadow-run-rep-processing {
    animation: none;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82);
  }
}