/* Lesson goals and end-of-lesson practice (js/components/practice.js). */

.pr-scene { display: grid; gap: 14px; width: 100%; max-width: 720px; max-height: 100%; min-height: 0; overflow: auto; }
.pr-kicker { margin: 0; color: var(--green-deep); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pr-goals { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pr-goal { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); transition: opacity .3s, border-color .3s, background .3s; animation: sqIn .4s backwards; animation-delay: calc(var(--i) * 90ms); }
.pr-goal b { font-size: 15.5px; line-height: 1.4; }
.pr-goal p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.pr-goal code { font-family: var(--mono); font-size: .92em; }
.pr-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; color: var(--green-deep); background: var(--green-soft); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.pr-goal.pr-dim { opacity: .35; }
.pr-goal.pr-on { border-color: var(--green); }
.pr-goal.pr-done .pr-num { color: #fff; background: var(--green); }
.pr-goal.pr-done .pr-num { font-size: 0; }
.pr-goal.pr-done .pr-num::after { content: "✓"; font-size: 14px; }
.pr-goal em { align-self: center; padding: 3px 10px; border-radius: 99px; font-family: var(--mono); font-size: 11px; font-style: normal; }
.pr-goal.solid { border-color: var(--green); }
.pr-goal.solid em { color: #fff; background: var(--green); }
.pr-goal.revisit { border-color: var(--amber); }
.pr-goal.revisit em { color: var(--amber); background: var(--amber-soft); }

.pr-tag { justify-self: start; padding: 2px 9px; border-radius: 99px; color: var(--green-deep); background: var(--green-soft); font-family: var(--mono); font-size: 11px; }
.pr-count { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.pr-q { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pr-q p { margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 600; line-height: 1.4; }
.pr-q code, .gd-q code { font-family: var(--mono); font-size: .85em; }
.pr-who { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 99px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 3px; }
.pr-marks { justify-content: center; }

/* Question illustrations: the picture beside a check or warm-up (showVisual / revealVisual) */
.pr-qlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 32px; width: 100%; }
.pr-qlayout .pr-q, .pr-qlayout .gd-quiz { justify-items: start; max-width: none; text-align: left; }
.pr-qlayout .gd-q { text-align: left; }
.pr-qcol { display: grid; justify-items: start; gap: 14px; min-width: 0; }
.pr-qcol .pr-marks { justify-content: start; }
.pr-q-head { display: flex; align-items: center; gap: 10px; }
.pr-visual { --tint: var(--lime); --soft: var(--green-soft); --ink2: var(--green-deep); position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 150px; margin: 0; padding: 18px 16px 16px; border: 1.5px solid var(--line); border-top: 5px solid var(--tint); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 14px rgba(23, 33, 29, .06); transition: border-color .3s, box-shadow .3s; }
.pr-visual[data-hue="1"] { --tint: #b9d3ff; --soft: var(--blue-soft); --ink2: #2d4f8f; }
.pr-visual[data-hue="2"] { --tint: #ffd89a; --soft: var(--amber-soft); --ink2: #8a5a10; }
.pr-visual.right { border-color: var(--green); border-top-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.pr-visual.wrong { border-color: var(--coral); border-top-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.pr-visual-in { animation: gdCardIn .4s cubic-bezier(.2, .8, .3, 1); }
.pr-visual-body { display: grid; gap: 8px; min-width: 0; }
.pr-pending { display: grid; justify-items: center; gap: 2px; padding: 14px 10px; border: 1.5px dashed var(--line-strong); border-radius: 12px; color: var(--muted); background: var(--soft); text-align: center; }
.pr-pending b { color: var(--ink2); font-family: var(--mono); font-size: 26px; line-height: 1; animation: gdBob 2.4s ease-in-out infinite; }
.pr-pending small { font-size: 12px; }
.pr-mini tr.dim td { color: var(--muted); }
.pr-goalart { justify-items: center; align-content: center; text-align: center; background: linear-gradient(180deg, var(--soft), var(--surface) 70%); }
.pr-goalart-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--tint); font-size: 32px; animation: gdBob 2.8s ease-in-out infinite; }
.pr-goalart b { color: var(--ink2); font-size: 16px; }
.pr-goalart .pr-snippet { justify-self: stretch; text-align: left; }
.pr-verdict { min-height: 22px; padding: 2px 10px; border-radius: 99px; font-family: var(--mono); font-size: 11.5px; font-style: normal; }
.pr-visual.right .pr-verdict { color: #fff; background: var(--green); }
.pr-visual.wrong .pr-verdict { color: var(--amber); background: var(--amber-soft); }
.pr-interviewer { justify-items: center; align-content: center; gap: 12px; text-align: center; --tint: #b9d3ff; --soft: var(--blue-soft); --ink2: #2d4f8f; background: linear-gradient(180deg, var(--blue-soft), var(--surface) 75%); }
.pr-avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 5px #b9d3ff; font-size: 46px; }
.pr-avatar.pr-nod { animation: prNod .6s ease-in-out; }
.pr-avatar.pr-shake { animation: gdNope .45s; }
@keyframes prNod { 0%, 100% { transform: none; } 30% { transform: translateY(5px) rotate(-3deg); } 60% { transform: translateY(-2px); } }
.pr-bubble { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 8px 16px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); font-size: 14px; font-weight: 700; }
.pr-bubble::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-top: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); background: var(--surface); transform: translateX(-50%) rotate(45deg); }
.pr-bubble i { width: 7px; height: 7px; border-radius: 99px; background: var(--muted); animation: prDot 1.2s ease-in-out infinite; }
.pr-bubble i:nth-child(2) { animation-delay: .15s; }
.pr-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes prDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.pr-interviewer > small { color: var(--ink2); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pr-visual.right .pr-bubble { border-color: var(--green); background: var(--lime); }
.pr-visual.wrong .pr-bubble { border-color: var(--amber); background: var(--amber-soft); }
.quiz-question .pr-visual { margin: 12px 0 14px; min-height: 0; }
.quiz-question .pr-interviewer { grid-auto-flow: column; justify-content: start; align-items: center; }
.quiz-question .pr-avatar { width: 56px; height: 56px; font-size: 30px; }
.quiz-question .pr-goalart { grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
.quiz-question .pr-goalart-icon { width: 48px; height: 48px; font-size: 24px; }
@media (prefers-reduced-motion: reduce) { .pr-bubble i, .pr-pending b, .pr-goalart-icon { animation: none; } }

/* Open question */
.pr-open { display: grid; gap: 12px; }
.pr-ask { margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 600; line-height: 1.4; }
.pr-notes { position: relative; }
.pr-notes textarea { width: 100%; min-height: 84px; padding: 12px 64px 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
.pr-timer { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px; background: conic-gradient(var(--green) calc(var(--p, 0) * 360deg), var(--surface-soft) 0); }
.pr-timer i { position: absolute; inset: 4px; border-radius: 99px; background: var(--surface); }
.pr-timer b { position: relative; font-family: var(--mono); font-size: 11px; }
.pr-reveal { justify-self: start; }
.pr-model { display: grid; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--green); border-radius: 14px; background: var(--surface); }
.pr-model[hidden] { display: none; }
.pr-model-lede { margin: 0; color: var(--muted); font-size: 13px; }
.pr-points { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pr-points label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.pr-points input { margin-top: 3px; accent-color: var(--green); }
.pr-answer summary { color: var(--green-deep); font-size: 13px; font-weight: 700; cursor: pointer; }
.pr-answer p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.pr-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-rate span { margin-right: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.pr-rate button { min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pr-rate button[data-rate="got"]:hover, .pr-rate button[data-rate="got"].picked { border-color: var(--green); background: var(--lime); }
.pr-rate button[data-rate="partly"].picked { border-color: var(--amber); background: var(--amber-soft); }
.pr-rate button[data-rate="missed"].picked { border-color: var(--coral); background: var(--coral-soft); }
.pr-rate button:disabled:not(.picked) { opacity: .4; }

/* In lesson pages and the finish screen */
.pr-intro { display: grid; gap: 10px; margin-top: 22px; }
.pr-summary { display: grid; gap: 10px; width: 100%; max-width: 620px; }
.pr-explore .pr-goals { margin-bottom: 8px; }
.pr-h { margin: 22px 0 10px; font-size: 16px; }
.pr-open-host { margin-top: 16px; }

/* Flashcards: interview-question cards */
.fc-face.fc-interview b { font-size: clamp(16px, 2vw, 20px); line-height: 1.4; }
.fc-back .fc-def { max-width: 52ch; font-size: 15px; line-height: 1.5; text-align: left; }
.fc-back .fc-def ul { margin: 0; padding-left: 18px; }

/* Goal cards: the goals chapter, recap, and the Explore intro */
.pr-scene.wide { max-width: 1040px; padding: 4px 14px 18px; } /* room for the lit cards' pop and shadow inside the scroll box */
.pr-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-cards::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; border-top: 2px dashed var(--line-strong); z-index: 0; }
.pr-card { --tint: var(--lime); --soft: var(--green-soft); --ink2: var(--green-deep); position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); transform: scale(.98); transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), border-color .3s, box-shadow .3s; }
/* Unlit: the card stays opaque (so the path behind it doesn't show through) and only its contents fade. */
.pr-card > * { transition: opacity .35s, filter .35s; }
.pr-card:not(.pr-lit) > * { opacity: .38; filter: grayscale(1); }
.pr-card[data-hue="1"] { --tint: #b9d3ff; --soft: var(--blue-soft); --ink2: #2d4f8f; }
.pr-card[data-hue="2"] { --tint: #ffd89a; --soft: var(--amber-soft); --ink2: #8a5a10; }
.pr-card.pr-lit { transform: none; border-color: var(--ink2); box-shadow: 0 6px 14px rgba(23, 33, 29, .07); }
.pr-card header { display: flex; align-items: center; gap: 10px; }
.pr-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint); font-size: 22px; }
.pr-card-num { color: var(--ink2); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pr-card h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.pr-card-text { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.pr-snippet { display: block; padding: 8px 10px; border-radius: 10px; color: #e8efe9; background: var(--sidebar); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
.pr-stamp { margin-left: auto; padding: 3px 9px; border-radius: 99px; color: #fff; background: var(--green); font-family: var(--mono); font-size: 10.5px; opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .3, 1.5); }
.pr-card.pr-unlocked .pr-stamp { opacity: 1; transform: rotate(-4deg); }
.pr-card-recap { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.pr-card-recap code { font-family: var(--mono); font-size: .9em; }
.pr-example { display: grid; gap: 8px; }
.pr-example:empty { display: none; }
.pr-label { display: block; margin-bottom: 2px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.pr-mini table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.pr-mini th { padding: 4px 6px; color: var(--muted); font-weight: 500; text-align: left; border-bottom: 1px solid var(--line-strong); }
.pr-mini td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.pr-mini td i { color: var(--muted); }
.pr-mini tr.hot td { background: var(--lime); }
.pr-mini tr.good td { background: var(--green-soft); }
.pr-mini tr.bad td { background: var(--coral-soft); text-decoration: line-through; }
.pr-note { color: var(--ink2); font-size: 12px; font-weight: 600; }
.pr-cards.compact .pr-card > * { opacity: 1; filter: none; }
.pr-cards.compact .pr-card { transform: none; border-color: var(--line); box-shadow: none; }
.pr-cards.compact .pr-card h3 { font-size: 16px; }
.pr-cards.compact::before { display: none; }

/* Short screens: tighter recap cards, so three examples fit side by side at 700 px. */
@media (min-width: 861px) and (max-height: 780px) {
  .pr-visual { min-height: 0; padding: 14px 14px 12px; }
  .pr-avatar { width: 64px; height: 64px; font-size: 34px; }
  .pr-goalart-icon { width: 52px; height: 52px; font-size: 26px; }
  .pr-scene:has(.pr-cards.recap) { gap: 8px; padding-top: 0; padding-bottom: 2px; }
  .pr-cards.recap::before { top: 29px; }
  .pr-cards.recap .pr-card { gap: 6px; padding: 12px 14px; }
  .pr-cards.recap .pr-card-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
  .pr-cards.recap .pr-card h3 { font-size: 16px; }
  .pr-cards.recap .pr-mini td, .pr-cards.recap .pr-mini th { padding-top: 3px; padding-bottom: 3px; }
}

@media (max-width: 860px) {
  .pr-qlayout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr-qlayout > .pr-visual { order: 2; }
  .pr-qcol .pr-marks { justify-content: center; }
  .pr-qlayout .pr-q, .pr-qcol { justify-items: center; text-align: center; }
  .pr-qlayout .gd-quiz { justify-items: stretch; }
  .pr-visual { min-height: 0; padding: 12px; }
  .pr-interviewer { grid-auto-flow: column; justify-content: center; align-items: center; }
  .pr-avatar { width: 52px; height: 52px; font-size: 28px; }
  .pr-interviewer > small { display: none; }
  .pr-goalart { grid-auto-flow: column; justify-content: center; align-items: center; }
  .pr-goalart-icon { width: 44px; height: 44px; font-size: 22px; }
  .pr-goalart .pr-snippet { display: none; }
  .pr-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pr-cards::before { top: 12%; bottom: 12%; left: 38px; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong); }
  .pr-card { padding: 12px 14px; gap: 6px; }
  .pr-card-icon { width: 36px; height: 36px; font-size: 18px; }
  .pr-card h3 { font-size: 16px; }
}