/* Teen Real Estate Investing: the course's own styles (content v1).
   Mobile first; every rule is written for a phone and widened at 720px.
   Brand colours only: #07c4c8 teal, #f59070 orange, #a7b1c2 light gray,
   #30455c dark blue, #63697a dark gray, #e6ecf0 off-white. The darker
   #1f6e73 is the reading layout's link teal, used where teal must pass
   contrast as text. Scoped under .teen-re. */

.teen-re .reading-main { max-width: 720px; }
.teen-re .prose > .move { margin: 2.2em 0; }
.teen-re .prose .move > h2 { margin-top: 0; }
.teen-re .lede { font-size: var(--fs-lede); color: var(--navy-900); }
.teen-re .kicker { font: 600 12px/1.4 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #1f6e73; margin: 0 0 8px; }
.teen-re .fine { font-size: var(--fs-small); color: var(--color-ink-muted); margin: 8px 0 0; }
.teen-re .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 0; }
.teen-re .btn-row .btn { min-height: 44px; }
.teen-re .practice-label { display: inline-block; font: 600 12px/1.4 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #30455c; background: #e6ecf0; border-radius: var(--radius-pill); padding: 6px 12px; margin: 0 0 12px; }
.teen-re .lesson-footer-note { font-size: var(--fs-small); color: var(--color-ink-muted); border-top: 1px solid #a7b1c2; padding-top: 14px; margin-top: 2.4em; }
.teen-re [data-fig] { font-variant-numeric: tabular-nums; }
.teen-re table.worked { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 15px; }
.teen-re table.worked th, .teen-re table.worked td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #a7b1c2; vertical-align: top; }
.teen-re table.worked thead th { border-bottom: 2px solid #63697a; font: 600 12px/1.4 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #63697a; }
.teen-re table.course-map th[scope="row"] { white-space: nowrap; }

/* Cards every move sits in */
.teen-re .move.cold-open, .teen-re .move.spot, .teen-re .move.myths, .teen-re .move.your-move, .teen-re .move.build,
.teen-re .move.score, .teen-re .move.version-2, .teen-re .move.teach-back, .teen-re .move.reflect, .teen-re .move.result-card, .teen-re .move.live-rate {
  background: var(--white); border: 1px solid #a7b1c2; border-radius: var(--radius-lg); padding: 20px; }
.teen-re .move.cold-open { border-color: #30455c; border-width: 2px; }
.teen-re .move.cold-open .go { color: #30455c; }

/* The Mentor */
.teen-re .mentor-caption { font-size: var(--fs-small); color: var(--color-ink-muted); margin: 0 0 10px; }
.teen-re .video-slot { background: #30455c; color: #fff; border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 0 16px; }
.teen-re .video-slot .video-placeholder { margin: 0; color: #e6ecf0; font-size: var(--fs-small); }
.teen-re .video-slot iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); }
.teen-re .mentor-script, .teen-re .move.mentor-page .mentor { border-left: 4px solid #07c4c8; padding: 2px 0 2px 18px; }
.teen-re .mentor-script p, .teen-re .move.mentor-page .mentor p { margin: 0 0 0.8em; }

/* Forms: big targets, one column */
.teen-re input[type="number"], .teen-re input[type="text"], .teen-re input[type="email"], .teen-re textarea, .teen-re select {
  width: 100%; box-sizing: border-box; font: 400 16px/1.4 var(--font-body); color: #30455c;
  padding: 12px 14px; border: 1px solid #a7b1c2; border-radius: var(--radius-md); background: var(--white); }
.teen-re textarea { min-height: 84px; resize: vertical; }
.teen-re input:focus-visible, .teen-re textarea:focus-visible, .teen-re button:focus-visible { outline: 3px solid #07c4c8; outline-offset: 1px; }
.teen-re .choices { display: grid; gap: 8px; margin: 8px 0 14px; }
.teen-re .choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #a7b1c2; border-radius: var(--radius-md); cursor: pointer; font: 500 16px/1.3 var(--font-body); color: #30455c; }
.teen-re .choice:has(input:checked) { border-color: #1f6e73; background: #e6ecf0; }
.teen-re .choice input { width: 20px; height: 20px; margin: 0; accent-color: #1f6e73; flex: none; }
.teen-re .choices.stars { grid-template-columns: repeat(5, 1fr); }
.teen-re .choice.star { justify-content: center; padding: 10px 4px; }
.teen-re .slider { display: block; margin: 8px 0 14px; }
.teen-re .slider input[type="range"] { width: 100%; accent-color: #1f6e73; }
.teen-re .slider output { display: block; font: 700 22px/1.2 var(--font-body); color: #30455c; margin-top: 4px; }
.teen-re .cold-open-form ol > li { margin: 0 0 14px; }
.teen-re .after { margin: 12px 0 0; color: #30455c; }
.teen-re .reveal { margin-top: 16px; padding: 14px 16px; background: #e6ecf0; border-radius: var(--radius-md); }
.teen-re .reveal p { margin: 0; }
.teen-re .reveal .kicker { margin-bottom: 6px; }

/* Spot the Trap */
.teen-re .spot-list { list-style: none; margin: 0 0 14px; padding: 0; }
.teen-re .spot-row { border: 1px solid #a7b1c2; border-radius: var(--radius-md); margin: 0 0 8px; }
.teen-re .spot-row label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer; margin: 0; }
.teen-re .spot-row input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #f59070; }
.teen-re .spot-row .line { font: 500 16px/1.4 var(--font-body); color: #30455c; }
.teen-re .spot-row .note { display: none; padding: 0 14px 12px 46px; font-size: var(--fs-small); color: #30455c; }
.teen-re .spot-row.is-hit { border-color: #1f6e73; background: #e6ecf0; }
.teen-re .spot-row.is-miss { border-color: #f59070; background: #fff4ee; }
.teen-re .spot-row.is-wrong { border-color: #63697a; background: #f7f6f3; }
.teen-re .spot-row.is-hit .note, .teen-re .spot-row.is-miss .note, .teen-re .spot-row.is-wrong .note { display: block; }
.teen-re .spot-row .note::before { font-weight: 600; }
.teen-re .spot-row.is-hit .note::before { content: "You caught it. "; color: #1f6e73; }
.teen-re .spot-row.is-miss .note::before { content: "You missed this one. "; color: #c9603f; }
.teen-re .spot-row.is-wrong .note::before { content: "This line was fine. "; color: #63697a; }
.teen-re .spot-score { font-weight: 600; margin: 0 0 6px; }
.teen-re .starter-reveal[hidden] { display: none; }
.teen-re .starter-reveal { margin-top: 16px; padding-top: 14px; border-top: 2px solid #63697a; }

/* Myth or Money */
.teen-re .myth-list { list-style: none; margin: 0; padding: 0; counter-reset: myth; }
.teen-re .myth { border: 1px solid #a7b1c2; border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 10px; }
.teen-re .myth .claim { font: 500 17px/1.4 var(--font-body); color: #30455c; margin: 0 0 10px; }
.teen-re .myth-actions { display: flex; gap: 8px; margin: 0; }
.teen-re .myth-actions .btn { min-height: 44px; flex: 1; }
.teen-re .myth.is-right { border-color: #1f6e73; background: #e6ecf0; }
.teen-re .myth.is-wrong { border-color: #f59070; background: #fff4ee; }
.teen-re .myth-verdict { margin: 10px 0 0; }
.teen-re .myth-verdict[hidden] { display: none; }

/* Your Move: dilemmas, assign, levers */
.teen-re .dilemmas { list-style: none; margin: 0; padding: 0; }
.teen-re .dilemma { border: 1px solid #a7b1c2; border-radius: var(--radius-md); padding: 14px 16px; margin: 0 0 12px; }
.teen-re .dilemma .prompt { font-weight: 500; color: #30455c; }
.teen-re .dilemma .choices .choice-btn { text-align: left; white-space: normal; min-height: 44px; }
.teen-re .dilemma .choice-btn.is-picked { border-color: #30455c; background: #e6ecf0; }
.teen-re .dilemma .choice-btn.is-right { border-color: #1f6e73; }
.teen-re .dilemma .take { margin-top: 12px; padding: 12px 14px; background: #e6ecf0; border-radius: var(--radius-md); }
.teen-re .dilemma .take p { margin: 0; }
.teen-re .assign-buckets { display: grid; gap: 8px; margin: 10px 0 14px; }
.teen-re .bucket { font: 600 15px/1.3 var(--font-body); color: #30455c; background: var(--white); border: 2px dashed #a7b1c2; border-radius: var(--radius-md); padding: 12px 14px; min-height: 48px; text-align: left; cursor: pointer; }
.teen-re .bucket.is-target { border-style: solid; border-color: #1f6e73; }
.teen-re .bucket-count { float: right; color: #63697a; font-weight: 500; }
.teen-re .assign-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.teen-re .assign-cards .card { border: 1px solid #a7b1c2; border-radius: var(--radius-md); padding: 0; }
.teen-re .assign-cards .card-btn { display: block; width: 100%; text-align: left; font: 500 15px/1.4 var(--font-body); color: #30455c; background: none; border: 0; padding: 12px 14px; cursor: pointer; border-radius: var(--radius-md); }
.teen-re .assign-cards .card.is-selected .card-btn { background: #e6ecf0; outline: 2px solid #1f6e73; }
.teen-re .assign-cards .placed { display: block; padding: 0 14px 10px; font-size: var(--fs-small); color: #1f6e73; font-weight: 600; }
.teen-re .assign-cards .placed:empty { display: none; }
.teen-re .assign-cards .card.is-right { border-color: #1f6e73; background: #e6ecf0; }
.teen-re .assign-cards .card.is-wrong { border-color: #f59070; background: #fff4ee; }
.teen-re .assign-cards .note { padding: 0 14px 12px; font-size: var(--fs-small); color: #30455c; }
.teen-re .assign-score { font-weight: 600; margin: 10px 0 0; }
.teen-re .levers-result { font-size: 18px; color: #30455c; margin: 0 0 14px; }
.teen-re .lever { margin: 0 0 14px; }
.teen-re .lever label { display: block; }
.teen-re .lever-name { font-weight: 600; color: #30455c; }
.teen-re .lever input[type="range"] { width: 100%; accent-color: #1f6e73; display: block; margin: 6px 0; }
.teen-re .lever output { font: 700 18px/1.2 var(--font-body); color: #30455c; }
.teen-re .lever-answer { margin-top: 6px; }
.teen-re .lever-answer summary { cursor: pointer; color: #1f6e73; font-weight: 600; }

/* Build, Score It, prompts */
.teen-re .notes { margin-top: 14px; }
.teen-re .notes label > span { display: block; margin-bottom: 6px; }
.teen-re .score-list { list-style: none; margin: 0; padding: 0; }
.teen-re .score-row { border-top: 1px solid #a7b1c2; padding: 12px 0; }
.teen-re .score-row .choices { grid-template-columns: repeat(2, 1fr); }
.teen-re .score-row .choice { font-size: 14px; padding: 10px 12px; }

/* Skill Unlocked */
.teen-re .skill-badge { display: flex; gap: 14px; align-items: flex-start; background: #30455c; color: #fff; border-radius: var(--radius-lg); padding: 18px 20px; }
.teen-re .skill-badge .badge-mark { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #07c4c8; color: #30455c; font: 700 22px/44px var(--font-body); text-align: center; }
.teen-re .skill-badge .kicker { color: #07c4c8; margin-bottom: 2px; }
.teen-re .skill-badge .skill-name { font: 700 20px/1.2 var(--font-display); color: #fff; margin: 0 0 6px; }
.teen-re .skill-badge p { color: #e6ecf0; margin: 0; }
.teen-re .skill-badge.is-unlocked { box-shadow: 0 0 0 4px rgba(7,196,200,.25); }

/* Result card */
.teen-re .result-card { border: 2px solid #30455c; border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 12px; }
.teen-re .result-lines { margin: 0 0 14px; display: grid; gap: 6px 12px; grid-template-columns: 1fr auto; }
.teen-re .result-lines dt { color: #63697a; font-size: var(--fs-small); }
.teen-re .result-lines dd { margin: 0; font-weight: 600; color: #30455c; text-align: right; }
.teen-re .result-line-input span { display: block; font-weight: 600; color: #30455c; margin-bottom: 6px; }
.teen-re .send-parent { margin-top: 14px; padding-top: 14px; border-top: 1px solid #a7b1c2; }
.teen-re .send-parent label > span { display: block; font-weight: 600; color: #30455c; margin-bottom: 6px; }
.teen-re .send-parent .status { font-size: var(--fs-small); color: #1f6e73; }

/* Live rate */
.teen-re .rate-now { font-size: 18px; color: #30455c; margin: 0 0 8px; }

/* The gate (shared .gate rules from preview.css were copied here) */
.teen-re .gate { background: #30455c; color: #fff; border-radius: var(--radius-xl); padding: 26px 22px; margin: 2em 0 1em; }
.teen-re .gate .eyebrow { color: #07c4c8; font: 600 12px/1.4 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin: 0 0 8px; }
.teen-re .gate h2, .teen-re .gate h3 { color: #fff; margin: 0 0 10px; }
.teen-re .gate h2::after { display: none; }
.teen-re .gate p, .teen-re .gate li { color: #e6ecf0; }
.teen-re .gate strong { color: #fff; }
.teen-re .gate .gate-items { padding-left: 1.2em; margin: 10px 0 16px; }
.teen-re .gate .gate-items li { margin: 0 0 6px; }
.teen-re .gate .price { font: 700 34px/1 var(--font-display); color: #fff; margin: 14px 0 4px; }
.teen-re .gate .price small { display: block; font: 500 14px/1.4 var(--font-body); color: #a7b1c2; margin: 6px 0 0; }
.teen-re .gate .btn { min-height: 48px; }
.teen-re .gate .gate-credit { margin: 14px 0 0; padding: 12px 14px; background: rgba(255,255,255,0.08); border-radius: var(--radius-md); color: #fff; }
.teen-re .gate .fine { color: #a7b1c2; }
.teen-re .gate .gate-teaser { color: #fff; }

/* Course map and sidebar pills */
.teen-re .course-nav-item.is-locked .course-nav-link { color: var(--color-ink-muted); }
.teen-re .lock-pill, .teen-re .free-pill { display: inline-block; margin-left: auto; font: 600 11px/1 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-pill); flex: none; white-space: nowrap; }
.teen-re .free-pill { background: #e6ecf0; color: #1f6e73; }
.teen-re .lock-pill { background: var(--gray-200); color: #30455c; }
.teen-re .course-nav-link { display: flex; align-items: center; gap: 10px; }
.teen-re .lesson-row .lesson-title { flex: 1 1 auto; min-width: 0; }
.teen-re .course-detail-head .btn-row { margin-top: 18px; }

@media (max-width: 480px) {
  .teen-re .lesson-row { flex-wrap: wrap; gap: 8px 14px; }
  .teen-re .lesson-row .lesson-title { flex: 1 1 0; min-width: 180px; }
  .teen-re .lock-pill, .teen-re .free-pill { font-size: 10px; padding: 4px 6px; margin-left: auto; }
}
@media (min-width: 720px) {
  .teen-re .assign-buckets { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .teen-re .assign-cards { grid-template-columns: 1fr 1fr; }
  .teen-re .score-row .choices { grid-template-columns: repeat(4, 1fr); }
  .teen-re .gate { padding: 34px 36px; }
}