/*
 * Smart Review — mining CTA + modal.
 * Colors/shadows/borders use the global tokens documented in /STYLING.md
 * (defined in blocksy-child/style.css :root). No raw hex except #fff for
 * text/marks on filled surfaces.
 */

/* Two-compartment CTA mirroring the Elvira quiz cluster
   (.alfDri-listen-cluster), with INVERTED contrast: a light icon
   compartment (__lead) + a dark copy compartment (__body). Compartment
   sizing/padding matches the quiz cluster (48px tall, 16px radius, lead
   0 10px, body 7px 18px 6px) so the two buttons sit consistently. */
.pp-sr-cta {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.10);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  /* Dark teal is the single wrapper background; the copy side is transparent
     and shows it through, while only the light icon lead is overlaid. This
     mirrors the quiz cluster's geometry (one filled compartment over one
     background) so the icon/copy seam can't step. */
  background: var(--pp-progress-fill);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  /* Same lift + inset as the Elvira quiz cluster so the whole pill reads as
     one contained surface (kills the dark-edge "bump"). */
  box-shadow:
    0 4px 10px rgba(var(--pp-steel-7-rgb), 0.10),
    inset 1px 1px 3px rgba(var(--pp-accent-rgb), 0.32);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pp-sr-cta:hover {
  border-color: rgba(var(--pp-accent-rgb), 0.2);
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px rgba(var(--pp-steel-7-rgb), 0.12),
    inset 1px 1px 4px rgba(var(--pp-accent-rgb), 0.42);
}
.pp-sr-cta:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }

/* Idle + hover sheen sweep — mirrors the quiz cluster's animation. */
.pp-sr-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0) 78%);
  transform: translateX(-135%);
  animation: button-sheen-idle 5s linear infinite;
  pointer-events: none;
}
.pp-sr-cta:hover::before {
  animation: sheen-hover 0.65s ease-out 1 forwards;
}

/* Icon compartment — light background, accent-colored icon. */
.pp-sr-cta__lead {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(134deg, var(--pp-steel-1) 0%, var(--theme-palette-color-8) 100%);
  color: var(--theme-palette-color-5);
  box-shadow: inset -1px 0 0 rgba(var(--pp-accent-rgb), 0.16);
}
.pp-sr-cta__icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* Copy compartment — transparent; the dark teal comes from the wrapper
   background showing through (so there is no second fill to misalign at the
   seam). Light text via inherited color. */
.pp-sr-cta__body {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 7px 18px 6px;
  background: transparent;
}

@keyframes button-sheen-idle {
  0%, 86%, 100% { transform: translateX(-135%); }
  93% { transform: translateX(135%); }
}
@keyframes sheen-hover {
  from { transform: translateX(-135%); }
  to { transform: translateX(135%); }
}

/* Dips one-click add: button states (is-added / is-busy / has-error).
   is-added: same shape and teal so the pill doesn't shift layout; icon swaps
   to a check, label reads "In Recall", opacity drops to signal inactivity. */
.pp-sr-cta.is-added {
  cursor: default;
  opacity: 0.72;
}
.pp-sr-cta.is-added::before { animation: none; }
.pp-sr-cta.is-added:hover {
  transform: none;
  border-color: rgba(var(--pp-accent-rgb), 0.10);
  box-shadow:
    0 4px 10px rgba(var(--pp-steel-7-rgb), 0.10),
    inset 1px 1px 3px rgba(var(--pp-accent-rgb), 0.32);
}
.pp-sr-cta.is-added .pp-sr-cta__lead { color: var(--pp-green-3); }
.pp-sr-cta.is-busy { opacity: 0.6; cursor: progress; pointer-events: none; }
.pp-sr-cta.is-busy::before { animation: none; }
.pp-sr-cta.has-error { border-color: var(--pp-red-3); }

/* Modal shell */
.pp-sr-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pp-sr-modal[hidden] { display: none; }
html.pp-sr-modal-open { overflow: hidden; }

.pp-sr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--pp-steel-7-rgb), 0.44);
  transition: opacity 0.15s ease;
}

/* Draggable header (desktop) + detached floating panel.
   When floating, the overlay is click-through so the transcript behind the
   panel stays visible, scrollable, and interactive. */
@media (min-width: 1025px) and (pointer: fine) {
  .pp-sr-modal__head--draggable {
    cursor: move;
    user-select: none;
    touch-action: none;
  }
}
.pp-sr-modal--floating {
  pointer-events: none;
}
.pp-sr-modal--floating .pp-sr-modal__backdrop {
  opacity: 0;
}
.pp-sr-modal--floating .pp-sr-modal__dialog {
  pointer-events: auto;
}

.pp-sr-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--theme-palette-color-8);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(var(--pp-steel-7-rgb), 0.24);
  overflow: hidden;
}

/* Phone: fill the screen — easier word-spotting and tapping on small screens. */
@media (max-width: 768px) {
  .pp-sr-modal {
    padding: 0;
  }
  .pp-sr-modal__dialog {
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}

.pp-sr-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.pp-sr-modal__title { margin: 0; font-size:1.6rem;}
.pp-sr-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--pp-steel-4);
}
.pp-sr-modal__close:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }
.pp-sr-modal__intro {
  margin: 0;
  padding: 0 18px 10px;
  color: var(--pp-steel-4);
  font-size: 0.9rem;
}
.pp-sr-modal__added {
  margin: 0;
  padding: 0 18px 10px;
  color: var(--pp-steel-6);
  font-size: 0.85rem;
  font-weight: 600;
}

.pp-sr-modal__body {
  padding: 4px 18px;
  overflow-y: auto;
}
.pp-sr-modal__foot {
  padding: 12px 18px 18px;
}

/* Messages */
.pp-sr-modal__msg {
  margin: 10px 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--pp-steel-1);
  color: var(--pp-steel-4);
  text-align: center;
  font-size: 1rem;
}
.pp-sr-modal__msg--error { background: var(--pp-red-1); color: var(--pp-red-4); }

/* Loading skeleton */
.pp-sr-loading__label {
  margin: 6px 0 12px;
  text-align: center;
  color: var(--pp-steel-4);
  font-size: 0.9rem;
}
.pp-sr-loading__label::after {
  content: "";
  animation: pp-sr-dots 1.4s steps(4, end) infinite;
}
.pp-sr-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
  padding: 14px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 10px;
}
.pp-sr-skeleton__line {
  height: 0.8em;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--pp-steel-2) 25%,
    var(--pp-steel-1) 50%,
    var(--pp-steel-2) 75%
  );
  background-size: 200% 100%;
  animation: pp-sr-shimmer 1.3s ease-in-out infinite;
}
.pp-sr-skeleton__line--word { width: 45%; }
.pp-sr-skeleton__line--context { width: 80%; }

@keyframes pp-sr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pp-sr-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-sr-skeleton__line { animation: none; }
  .pp-sr-loading__label::after { animation: none; content: "…"; }
  .pp-sr-review__spinner { animation: none; }
}

/* Suggestions */
.pp-sr-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pp-sr-suggestion:hover { border-color: rgba(var(--pp-accent-rgb), 0.46); background: var(--pp-steel-1); }
.pp-sr-suggestion:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }
.pp-sr-suggestion__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pp-sr-suggestion__word { font-weight: 600; color: var(--pp-steel-7); }
.pp-sr-suggestion__context {
  font-size: 0.85rem;
  color: var(--pp-steel-5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Contextual translation revealed under a row once it's added, so the user
   sees the meaning of what they just saved. Wraps (glosses can be a few words);
   tinted to read as the "answer" rather than more Portuguese. */
.pp-sr-suggestion__gloss {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pp-grey-3);
  margin-top: 2px;
}
.pp-sr-suggestion__state {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--pp-accent-rgb), 0.12);
  color: var(--theme-palette-color-5);
  font-weight: 700;
}
.pp-sr-suggestion.is-added {
  border-color: var(--pp-green-2);
  background: var(--pp-green-1);
  cursor: default;
}
.pp-sr-suggestion.is-added .pp-sr-suggestion__state { background: var(--pp-green-3); color: #fff; }
.pp-sr-suggestion.is-busy { opacity: 0.6; cursor: progress; }
.pp-sr-suggestion.has-error { border-color: var(--pp-red-2); }

/* Buttons */
.pp-sr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.28);
  border-radius: 8px;
  background: transparent;
  color: var(--pp-steel-7);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pp-sr-button--more:hover { background: var(--pp-steel-1); }
.pp-sr-button:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }

/* Manual contextual add */
.pp-sr-manual {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}
.pp-sr-manual__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pp-steel-7);
}
.pp-sr-manual__row {
  display: flex;
  gap: 8px;
}
.pp-sr-manual__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
/* Scoped under .pp-sr-manual so the selector outranks Blocksy's
   input[type="text"] rule (which otherwise wins on specificity). */
.pp-sr-manual .pp-sr-manual__input {
  width: 100%;
  padding: 11px 14px;
  /* Match the Add button's fill color (solid teal) so the input border reads
     as the same color as the button to its right. */
  border: 1px solid var(--theme-palette-color-5);
  border-radius: 10px;
  background: var(--pp-steel-1);
  color: var(--pp-steel-7);
  font: inherit;
  font-size: 1rem;
}
.pp-sr-manual .pp-sr-manual__input:focus {
  outline: none;
  border-color: rgba(var(--pp-accent-rgb), 0.46);
  box-shadow: 0 0 0 3px var(--pp-focus-ring);
}

/* Autosuggest dropdown — opens upward (the form sits at the modal bottom). */
.pp-sr-suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 2;
  margin: 0;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  background: var(--theme-palette-color-8);
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(var(--pp-steel-7-rgb), 0.2);
}
.pp-sr-suggest__item {
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--pp-steel-7);
  cursor: pointer;
}
.pp-sr-suggest__item.is-active,
.pp-sr-suggest__item:hover {
  background: var(--pp-steel-1);
}
.pp-sr-manual__add {
  width: auto;
  flex: 0 0 auto;
  border-color: rgba(var(--pp-accent-rgb), 0.46);
  background: var(--theme-palette-color-5);
  color: #fff;
}
.pp-sr-manual__add:hover { filter: brightness(0.96); }
.pp-sr-manual.is-busy .pp-sr-manual__add { opacity: 0.6; cursor: progress; }
.pp-sr-manual__msg {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--pp-steel-4);
}
.pp-sr-manual__msg--error { color: var(--pp-red-4); }
.pp-sr-button[hidden] { display: none; }

/* =========================================================================
 * Review session (Step 5)
 * ====================================================================== */

/* Breathing room below the site header and above the footer; applies to every
   state (loading, card, caught-up, summary). */
.pp-smart-review { display: block; padding: clamp(32px, 5vw, 64px) 16px; }
.pp-sr-review__booting {
  text-align: center;
  color: var(--pp-steel-4);
  padding: 32px 0;
}
.pp-sr-review__spinner {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid rgba(var(--pp-steel-7-rgb), 0.15);
  border-top-color: rgb(var(--pp-accent-rgb));
  animation: pp-sr-spin 0.7s linear infinite;
}
@keyframes pp-sr-spin {
  to { transform: rotate(360deg); }
}

.pp-sr-review {
  max-width: 560px;
  margin: 0 auto;
}

/* Progress */
.pp-sr-review__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--pp-steel-4);
  font-size: 0.85rem;
  font-weight: 600;
}
.pp-sr-review__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--pp-steel-1);
  overflow: hidden;
}
.pp-sr-review__bar > span {
  display: block;
  height: 100%;
  background: var(--theme-palette-color-5);
  transition: width 0.25s ease;
}

/* Card */
.pp-sr-card {
  position: relative;
  background: var(--theme-palette-color-8);
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(var(--pp-steel-7-rgb), 0.1);
  padding: 28px 22px;
  text-align: center;
}

/* Info icon + popover — mirrors the scorecard's details/summary pattern */
.pp-sr-card__info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}
.pp-sr-card__info:hover,
.pp-sr-card__info:focus-within,
.pp-sr-card__info[open] { z-index: 12; }
.pp-sr-card__info summary { list-style: none; }
.pp-sr-card__info summary::-webkit-details-marker { display: none; }
.pp-sr-card__info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pp-steel-5);
  cursor: pointer;
  opacity: 0.85;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.pp-sr-card__info-toggle:hover,
.pp-sr-card__info-toggle:focus-visible,
.pp-sr-card__info[open] .pp-sr-card__info-toggle {
  color: var(--pp-steel-7);
  opacity: 1;
}
.pp-sr-card__info-toggle:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}
.pp-sr-card__info-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  width: min(260px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 26px rgba(var(--pp-steel-7-rgb), 0.14);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pp-steel-7);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.pp-sr-card__info[open] .pp-sr-card__info-popover,
.pp-sr-card__info:focus-within .pp-sr-card__info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pp-sr-card__info-steps {
  margin: 0;
  padding: 0 0 0 18px;
}
.pp-sr-card__info-steps li { margin-bottom: 6px; }
.pp-sr-card__info-steps li:last-child { margin-bottom: 0; }
.pp-sr-card__word {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--pp-steel-7);
}
.pp-sr-card__back { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12); }
.pp-sr-card__back[hidden] { display: none; }
.pp-sr-card__sentence {
  margin: 0 0 14px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--pp-steel-7);
}
.pp-sr-card__sentence strong { color: var(--theme-palette-color-5); }
.pp-sr-card__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-steel-4);
  margin-bottom: 2px;
}
.pp-sr-card__word-tr {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pp-steel-7);
}
.pp-sr-card__sentence-tr {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--pp-steel-4);
}
.pp-sr-card__no-tr {
  font-weight: normal;
  font-style: italic;
  color: var(--pp-steel-4);
}
.pp-sr-card__tr-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pp-sr-card__tr-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--pp-steel-7);
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}
.pp-sr-card__tr-edit:hover,
.pp-sr-card__tr-edit:focus-visible {
  color: var(--pp-steel-7);
  transform: translateY(-1px);
}
.pp-sr-card__tr-edit:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}
.pp-sr-card__tr-input {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pp-steel-7);
  border: 0;
  border-bottom: 2px solid var(--theme-palette-color-5);
  background: transparent;
  outline: none;
  padding: 0 0 1px;
  min-width: 120px;
  max-width: 100%;
}

/* Audio */
/* Bare icon button — no frame, the icon itself is the control. */
.pp-sr-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.pp-sr-audio:hover { transform: scale(1.06); opacity: 0.85; }
.pp-sr-audio:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 4px; border-radius: 50%; }
.pp-sr-audio__icon { width: 52px; height: 52px; color: var(--theme-palette-color-5); }

/* Worksheet TTS: brief loading state while the first clip is synthesized. */
.pp-sr-audio.is-loading { cursor: progress; }
.pp-sr-audio.is-loading .pp-sr-audio__icon { opacity: 0.5; animation: pp-sr-audio-pulse 1s ease-in-out infinite; }
@keyframes pp-sr-audio-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }

/* Actions */
.pp-sr-review__actions { margin-top: 18px; }
/* Self-contained primary action — must NOT share the Listen-pill .pp-sr-cta
   selector, or restyling that pill bleeds in here. */
.pp-sr-review__show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7em 1.1em;
  border: 0;
  border-radius: 8px;
  background: var(--theme-palette-color-5);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: filter 0.18s ease;
}
.pp-sr-review__show:hover { filter: brightness(0.95); }
.pp-sr-review__show:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }
.pp-sr-review__actions.is-busy { opacity: 0.6; pointer-events: none; }

/* Rating buttons */
.pp-sr-rate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pp-sr-rate__btn {
  padding: 12px 8px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.16);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  /* Lighter echo of the card's elevation so the buttons read as the same
     floating layer rather than flat cut-outs. */
  box-shadow: 0 3px 10px rgba(var(--pp-steel-7-rgb), 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pp-sr-rate__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--pp-steel-7-rgb), 0.12); }
.pp-sr-rate__btn:focus-visible { outline: 2px solid var(--pp-focus-ring); outline-offset: 2px; }

/* Semantic base states (traffic-light) — the cue is visible at rest; hover
   adds only the lift/shadow above, no color change. */
.pp-sr-rate__btn--missed   { background: var(--pp-red-1);   border-color: var(--pp-red-2);   color: var(--pp-steel-6); }
.pp-sr-rate__btn--notquite { background: var(--pp-steel-1); border-color: var(--pp-steel-3); color: var(--pp-steel-6); }
.pp-sr-rate__btn--got      { background: var(--pp-green-1); border-color: var(--pp-green-3); color: var(--pp-steel-6); }

/* End-of-session / empty states */
.pp-sr-review__state {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 16px;
}
.pp-sr-review__icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
/* "Caught up" tick — white ✓ on a filled green disc, mirroring the scorecard
   tile (.pp-member-scorecard__check) and the mining modal's saved-item tick.
   Scaled up for the full-page surface. */
.pp-sr-review__icon--check {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--pp-green-3);
  color: #fff;
  font-size: 34px;
  /* Fatten the thin ✓ glyph so it reads prominently on the disc. */
  -webkit-text-stroke: 1px #fff;
}
.pp-sr-review__heading { 
  margin: 0 0 6px; 
  color: var(--pp-steel-7); 
  font-size: 1.6rem;
}
.pp-sr-review__sub { 
  margin: 0 0 18px; 
  color: var(--pp-steel-4); 
   font-size: 1.1rem;
}
/* Solid steel button — overrides the ghost .pp-sr-button base. */
.pp-sr-review__back {
  max-width: 280px;
  margin: 8px auto 0;
  border: 0;
  background: var(--pp-steel-6);
  color: #fff;
  transition: background-color 0.18s ease;
}
.pp-sr-review__back:hover,
.pp-sr-review__back:focus { background: var(--pp-steel-7); color: #fff; }

.pp-sr-summary {
  list-style: none;
  margin: 0 auto 18px;
  padding: 0;
  max-width: 320px;
}
/* Rows mirror the rating-button treatment (traffic-light bg + border, steel-6
   text). Base = the "Almost" (notquite) look; got/missed override bg + border. */
.pp-sr-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 6px 0;
  border: 1px solid var(--pp-steel-3);
  border-radius: 8px;
  background: var(--pp-steel-1);
  color: var(--pp-steel-6);
  font-weight: 500;
}
.pp-sr-summary__row strong { font-size: 1.1rem; font-weight: 500; }
.pp-sr-summary__row--got    { background: var(--pp-green-1); border-color: var(--pp-green-3); }
.pp-sr-summary__row--missed { background: var(--pp-red-1);   border-color: var(--pp-red-2); }