/* Practice mode: the mode switch, the practice card and its carousel, the
   points of a round, the result and its confetti, and the "let's practice
   this" button after a talk. */

/* Practice: a short, friendly round around one point. */
.practice-target {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  margin: 4px 0 8px;
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  text-align: center;
}

.practice-target[hidden],
.practice-result[hidden],
.practice-back[hidden] {
  display: none;
}

.practice-target-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.practice-target-text {
  font-size: 1.25rem;
}

.practice-go {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.practice-go:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.practice-back {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.practice-result {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.practice-result-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
}

.practice-result-uses {
  display: grid;
  gap: 6px;
  width: min(380px, 100%);
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  list-style: none;
  color: var(--text);
  font-weight: 500;
}

.practice-result-uses[hidden] {
  display: none;
}

.practice-result-uses li {
  display: flex;
  gap: 8px;
  text-align: left;
}

.practice-result-uses li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}

/* The end of a round: a row for each point. */
.practice-result-points {
  display: grid;
  gap: 8px;
  width: min(460px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-result-points[hidden] {
  display: none;
}

.practice-result-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  text-align: left;
}

.result-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: #fff;
}

.practice-result-points li[data-right] .result-mark {
  border-color: var(--accent);
  background: var(--accent);
}

.result-mark svg {
  width: 14px;
  height: 14px;
}

.result-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.result-sentence {
  font-weight: 600;
}

.result-note {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: left;
}

.practice-result-points li[data-right] .result-note {
  color: var(--accent);
  font-weight: 700;
}

.practice-result-points .level-dots {
  flex: none;
}

.practice[data-result] .talk-status {
  display: none;
}

.practice-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.practice-go:focus-visible,
.practice-back:focus-visible,
.practice-try:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Two modes in one card: free conversation and point practice. */
.mode-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}

.mode-tab {
  position: relative;
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 1.05rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.mode-tab[aria-selected="true"] {
  color: #fff;
}

.mode-tab:disabled:not([aria-selected="true"]) {
  opacity: 0.45;
  cursor: default;
}

.mode-tab:focus-visible {
  outline: 3px solid var(--line);
  outline-offset: 2px;
}

.mode-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.mode-dot[hidden] {
  display: none;
}

/* Practice mode takes the calm blue: tab, mic and wave follow --brand, and
   the round's controls follow --accent. */
.practice[data-mode="practice"] {
  --accent: #4f7a94;
  --brand: var(--accent);
  --brand-strong: #3b6079;
  --live-button: #9db4c2;
  --live-accent: #3b6079;
  background: #f4f8fa;
  transition: background-color 0.3s ease;
}

.mode-tab svg {
  width: 20px;
  height: 20px;
}

.practice .mode-switch {
  position: absolute;
  top: 22px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
}

/* After a free talk with new points: the one way into a round on them,
   centered low on the card, where the buddy points at it. In practice's blue,
   since that is where it leads, with the mic button's offset shadow. Hover
   never moves the button itself: a moving edge slips out from under the
   pointer and back, and a half-pixel shift makes the icon shimmer. */
.practice:has(.practice-talk:not([hidden])) {
  padding-bottom: 112px;
}

/* What the button will practice: a clear title and the corrected sentences. */
.talk-points {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(460px, 100%);
  margin: 2px 0 0;
}

.talk-points[hidden] {
  display: none;
}

.talk-points-title {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.talk-points-list {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The speaker button at the start of the sentence, as in the "how to say it"
   box; the sentence is centered in the rest of the row. */
.talk-points-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 14px;
  padding-inline-start: 5px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #aed0b5 22%, var(--surface));
  font-size: 1.02rem;
  line-height: 1.45;
  text-align: center;
}

/* Larger and darker than on the cards: here it is the only control on the
   row, and in the light green row the small faded icon was hard to see. */
.talk-points-list .speak-button {
  position: relative; /* in the row, and holding its own ring and note */
  top: auto; /* centered in the row, not pushed down as on the cards */
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--brand-strong);
  opacity: 1;
}

.talk-points-list .speak-button svg {
  width: 22px;
  height: 22px;
}

/* Playing, without motion: white on the dark green, as on the cards. */
@media (prefers-reduced-motion: reduce) {
  .talk-points-list .speak-button.speaking {
    color: #fff;
  }
}

/* Up to two lines each, so a long sentence keeps its changed words in view.
   The marking of a changed word is as tall as the font (about 1.66em in
   Playpen Sans); a lower line height lets the marking on the hidden third
   line peek out under the second as a thin green line. */
.talk-point-sentence {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.talk-points-list .change {
  background: #aed0b5;
  color: #244d31;
}

.talk-points-list .talk-points-more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (max-width: 620px) {
  .talk-points-title {
    font-size: 0.98rem;
  }

  .talk-points-list li {
    padding: 2px 10px;
    padding-inline-start: 3px;
    font-size: 0.94rem;
  }
}

.practice-talk {
  position: absolute;
  bottom: 26px;
  inset-inline: 152px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: calc(100% - 304px);
  margin-inline: auto;
  padding-block: 8px;
  padding-inline: 8px 24px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #4f7a94;
  box-shadow: 3px 4px 0 rgb(66 60 54 / 22%);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease;
  animation: talk-tip-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.practice-talk:hover {
  background: #3b6079;
  box-shadow: 4px 6px 0 rgb(66 60 54 / 22%);
}

.practice-talk:active {
  box-shadow: 1px 2px 0 rgb(66 60 54 / 18%);
}

.practice-talk:focus-visible {
  outline: 3px solid #4f7a94;
  outline-offset: 3px;
}

/* A round white badge with a play sign: press and it starts. */
.practice-talk-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #4f7a94;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.practice-talk-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  /* The triangle's weight sits on its left; this centers it by eye. Like any
     player's, it points right in both directions. */
  translate: 1.5px 0;
}

.practice-talk:hover .practice-talk-icon {
  transform: scale(1.12);
}

/* Now and then a soft shine sweeps across it. */
.practice-talk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / 28%) 50%,
    transparent 65%
  );
  translate: -110% 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .practice-talk::after {
    animation: practice-talk-shine 4.5s ease-in-out 1.2s infinite;
  }
}

@keyframes practice-talk-shine {
  0% {
    translate: -110% 0;
  }
  30%,
  100% {
    translate: 110% 0;
  }
}

.practice-talk[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .practice:has(.practice-talk:not([hidden])) {
    padding-bottom: 100px;
  }

  /* Beside the buddy, centered in the room it leaves. */
  .practice-talk {
    bottom: 18px;
    inset-inline: 104px 12px;
    gap: 7px;
    max-width: calc(100% - 116px);
    padding-block: 5px;
    padding-inline: 5px 12px;
    font-size: 0.9rem;
    text-wrap: balance;
  }

  .practice-talk-icon {
    width: 30px;
    height: 30px;
  }

  .practice-talk-icon svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-talk {
    animation: none;
  }

  .practice-talk-icon {
    transition: none;
  }
}

@media (max-width: 620px) {
  .mode-tab {
    padding: 8px 14px;
    font-size: 0.95rem;
  }
}

/* Practice target: a label, the familiar issue card, and one line on what happens. */
.practice-target {
  gap: 10px;
  width: min(560px, 100%);
  max-width: none;
  padding: 0;
  background: none;
}

.practice-target-card {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.practice-target-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.practice-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.practice-switch svg {
  width: 16px;
  height: 16px;
}

.practice-switch:hover {
  background: var(--accent);
  color: #fff;
}

.practice-switch:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.practice-target-footer {
  align-items: center;
}

/* The shuffle arrows follow the reading direction. */
html[dir="rtl"] .practice-switch svg {
  transform: scaleX(-1);
}

/* Practice carousel: arrows on both sides, the card can be dragged. */
.practice-carousel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.practice-carousel .practice-target-card {
  flex: 1;
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.practice-carousel .practice-target-card:active {
  cursor: grabbing;
}

.practice-target-card > li {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.practice-target-card > li.slide-in {
  animation: card-slide-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes card-slide-in {
  from {
    opacity: 0;
    transform: translateX(var(--slide-from, 0)) rotate(var(--slide-tilt, 0));
  }
}

.carousel-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.carousel-arrow[hidden] {
  display: none;
}

.carousel-arrow svg {
  width: 22px;
  height: 22px;
}

html[dir="ltr"] .carousel-arrow svg {
  transform: scaleX(-1);
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  transform: scale(1.06);
}

.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.carousel-arrow:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.carousel-count {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.carousel-count:empty {
  display: none;
}

@media (max-width: 620px) {
  .practice-carousel {
    gap: 4px;
  }

  .carousel-arrow {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-target-card > li.slide-in {
    animation: none;
  }
}

/* Practice: the round on screen is one card. Each point is folded to its
   corrected sentence; opening one shows what was said and why. */
.round-card {
  padding: 4px 14px;
}

.round-point + .round-point {
  border-top: 1.5px dashed var(--border);
}

.round-point > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  list-style: none;
  cursor: pointer;
}

.round-point > summary::-webkit-details-marker {
  display: none;
}

.round-point > summary:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.round-point > summary .sentence {
  flex: 1;
  min-width: 0;
}

.round-point > summary .level-dots {
  flex: none;
}

.round-point > summary .speak-button {
  position: relative; /* in the row, and holding its own ring and note */
  top: auto; /* centered in the row, not pushed down as on the cards */
  flex: none;
}

/* In a row the sentence is beside the speaker, so its note goes under it,
   opening toward the sentence: on the talk card the speaker starts the row,
   on the practice card it is near the row's end. */
.talk-points-list .speak-button[data-note]::after,
.round-point > summary .speak-button[data-note]::after {
  top: calc(100% + 4px);
  left: auto;
  inset-inline-start: 0;
  transform: none;
}

.round-point > summary .speak-button[data-note]::after {
  inset-inline: auto 0;
}

/* Trades the point on this row for another one. */
.swap-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.swap-button svg {
  width: 16px;
  height: 16px;
}

.swap-button:hover {
  background: #54836433;
  opacity: 1;
}

.swap-button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

/* The round is fixed once the talk starts. */
.talk-stage:not([data-state="idle"]) .swap-button {
  opacity: 0.3;
  pointer-events: none;
}

.round-point.swap-in > summary {
  animation: round-point-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes round-point-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.round-point-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: rotate 0.2s ease;
}

.round-point[open] .round-point-chevron {
  rotate: 180deg;
}

/* On a phone the sentence gets the row's whole width, and the level and the
   buttons move to a short line of their own under it. Side by side they left
   the sentence a column a few words wide. */
@media (max-width: 620px) {
  .round-point > summary {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "sentence sentence sentence chevron"
      "level . speak swap";
    gap: 2px 8px;
  }

  .round-point > summary .sentence {
    grid-area: sentence;
  }

  .round-point > summary .level-dots {
    grid-area: level;
    justify-self: start;
  }

  .round-point > summary .speak-button {
    grid-area: speak;
  }

  .round-point > summary .swap-button {
    grid-area: swap;
  }

  .round-point-chevron {
    grid-area: chevron;
    align-self: start;
    justify-self: end;
    margin-top: 5px;
  }
}

.round-point-body {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

/* A point opens and closes smoothly; the card grows with it. */
.round-point::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition:
    block-size 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease,
    content-visibility 0.28s allow-discrete;
}

.round-point[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .round-point::details-content,
  .round-point-chevron {
    transition: none;
  }

  .round-point.swap-in > summary {
    animation: none;
  }
}

/* A pill slides under the selected mode tab and takes the mode's color. */
.mode-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: 999px;
  background: var(--brand);
  translate: var(--pill-x, 0) 0;
}

.mode-switch[data-pill-ready]::before {
  transition:
    translate 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.3s ease;
}

.mode-tab {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mode-switch[data-pill-ready]::before {
    transition: none;
  }
}

/* A quick press flash on the carousel arrows. */
.carousel-arrow.pressed {
  animation: arrow-press 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes arrow-press {
  0% {
    background: var(--surface);
    color: var(--accent);
    transform: scale(1);
  }
  35% {
    background: var(--accent);
    color: #fff;
    transform: scale(0.84);
  }
  100% {
    background: var(--surface);
    color: var(--accent);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-arrow.pressed {
    animation-duration: 0.01s;
  }
}

/* Arrows stay at a fixed height from the top, so they don't jump as card heights change. */
.practice-carousel {
  align-items: flex-start;
}

.carousel-arrow {
  margin-top: 64px;
}

/* On a phone the arrows at the card's sides cost it a third of its width. There
   they sit under the card instead, at both ends of the line that counts the
   rounds, and the card runs the full width. */
@media (max-width: 620px) {
  .practice-carousel {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }

  .practice-carousel .practice-target-card {
    order: -1;
    flex: 0 0 100%;
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }

  /* The counter moves up into the arrows' line: their height, and the gap
     that .practice-target leaves between its rows. The space under the line
     keeps the arrows clear of the buddy's head at the card's corner. */
  .practice-carousel:has(.carousel-arrow:not([hidden]))
    + .practice-target-footer {
    min-height: 36px;
    margin-top: calc(-36px - 10px);
    margin-bottom: 18px;
    pointer-events: none;
  }
}

/* Full card width, so the practice card and its arrows don't shift sideways with content. */
.practice .talk-stage {
  justify-self: stretch;
}

/* Confetti layer: fills the talk card, behind everything in it. */
.confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* "Practicing now: [topic ▾]" above the practice card. */
.practice-topic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* One point or a round of three: a small switch next to the topic. */
.round-size {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
}

.round-size button {
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.round-size button[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
}

.round-size button:disabled {
  opacity: 0.5;
  cursor: default;
}

.round-size button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.practice-result-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}

.practice-result-level[hidden] {
  display: none;
}

.practice-result-level .level-dots i {
  width: 11px;
  height: 11px;
}