@charset "UTF-8";

:root {
  --r4-coral: #bf432a;
  --r4-coral-hover: #a73720;
  --r4-coral-border: #822614;
  --r4-coral-soft: #fff3ee;
  --r4-coral-line: #eab8aa;
  --r4-teal: #175955;
  --r4-teal-dark: #0e3d3a;
  --r4-teal-soft: #ebf6f4;
  --r4-teal-line: #a7cfc9;
  --r4-amber-soft: #fff8ec;
  --r4-amber-border: #c58641;
  --r4-ink: #1e3330;
  --r4-muted: #4b5e5b;
  --r4-surface: #ffffff;
  --r4-cream: #fcf9f4;
}

body {
  background: var(--r4-cream);
  color: var(--r4-ink);
}

/* Enforce 56px minimum touch target across all button variants */
button,
.primary,
.secondary,
.answered,
.text-button,
.link-card,
.settings-button,
.speech-tools .text-button {
  min-height: 56px;
}

/* Warm Coral & Deep Teal Modern Raised-Button Style */
.primary {
  background: linear-gradient(180deg, #cb4c32 0%, var(--r4-coral) 100%);
  border: 2px solid var(--r4-coral-border);
  border-bottom: 5px solid var(--r4-coral-border);
  border-radius: 16px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(130, 38, 20, 0.16);
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #b84027 0%, var(--r4-coral-hover) 100%);
}

.primary:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 3px;
  box-shadow: 0 2px 6px rgba(130, 38, 20, 0.14);
}

.primary:disabled {
  background: #e3e7e5;
  border-color: #c5cfcd;
  color: #5b6966;
  box-shadow: none;
}

.secondary {
  background: var(--r4-surface);
  border: 2px solid #577f7b;
  border-bottom: 4px solid #2b5c58;
  border-radius: 16px;
  color: var(--r4-teal-dark);
  font-weight: 750;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.secondary:hover:not(:disabled) {
  background: var(--r4-teal-soft);
}

.secondary:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.link-card {
  background: var(--r4-surface);
  border: 2px solid #86aba6;
  border-bottom: 4px solid #3c6c67;
  border-radius: 18px;
  color: var(--r4-ink);
  box-shadow: 0 4px 12px rgba(23, 89, 85, 0.06);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.link-card:hover:not(:disabled) {
  background: var(--r4-teal-soft);
}

.link-card:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--r4-teal-soft);
  color: var(--r4-teal);
  font-size: 1.45rem;
}

.r4-tile-cbt .tile-icon {
  background: var(--r4-amber-soft);
  color: #8b541b;
}

.tile-arrow {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--r4-teal);
  flex-shrink: 0;
}

.eyebrow {
  color: var(--r4-teal);
}

/* Today Screen: Top 5-Question CTA + Baby Hero */
.r4-today-hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.r4-cta-card {
  margin: 0;
  padding: 26px 24px;
  background: linear-gradient(180deg, var(--r4-coral-soft) 0%, #ffffff 62%);
  border: 2px solid var(--r4-coral-line);
  border-bottom: 5px solid #d48975;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(191, 67, 42, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  animation: r4-rise-once 0.36s ease-out 1;
}

.r4-cta-card .eyebrow {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--r4-coral-line);
  border-radius: 99px;
  padding: 5px 12px;
  color: #9e311b;
  margin-bottom: 10px;
}

.r4-cta-card h2 {
  font-size: 1.42rem;
  color: var(--r4-ink);
  margin-bottom: 6px;
}

.r4-cta-card > div > p {
  display: block;
  color: var(--r4-muted);
  margin: 0;
}

.r4-cta-card .primary {
  font-size: 1.12rem;
  min-height: 62px;
}

.r4-today-hero .child-card {
  margin: 0;
  border: 2px solid var(--r4-teal-line);
  border-bottom: 5px solid #6fa39c;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--r4-teal-soft) 0%, #f7fbf9 100%);
  min-height: 0;
}

.child-card .portrait {
  background: radial-gradient(ellipse at center, #fff7dc 0%, #fff7dc 52%, transparent 54%);
}

progress {
  background: #d3e5e2;
  accent-color: var(--r4-teal);
}

progress::-webkit-progress-bar {
  background: #d3e5e2;
}

progress::-webkit-progress-value {
  background: var(--r4-teal);
}

progress::-moz-progress-bar {
  background: var(--r4-teal);
}

/* Compact 3-Step Daily Learning Path */
.r4-daily-path {
  background: var(--r4-surface);
  border: 2px solid #cadbd8;
  border-radius: 22px;
  padding: 20px 22px;
  margin: 0 0 24px;
}

.r4-path-header h2 {
  font-size: 1.18rem;
  margin: 0 0 14px;
}

.r4-path-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.r4-path-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid #d5e1df;
  background: #f8fbfa;
  min-width: 0;
}

.r4-path-step.is-current {
  border-color: var(--r4-coral);
  background: var(--r4-coral-soft);
}

.r4-path-step.is-done {
  border-color: var(--r4-teal);
  background: var(--r4-teal-soft);
}

.r4-step-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  background: #e3ecea;
  color: var(--r4-teal-dark);
}

.r4-path-step.is-current .r4-step-icon {
  background: var(--r4-coral);
  color: #ffffff;
}

.r4-path-step.is-done .r4-step-icon {
  background: var(--r4-teal);
  color: #ffffff;
}

.r4-step-body {
  min-width: 0;
  flex: 1;
}

.r4-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.r4-step-top strong {
  font-size: 0.95rem;
}

.r4-step-badge {
  font-size: 0.75rem;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 99px;
  background: #e5eeec;
  color: var(--r4-teal-dark);
}

.r4-path-step.is-current .r4-step-badge {
  background: #ffffff;
  border: 1px solid var(--r4-coral-line);
  color: #9e311b;
}

.r4-path-step.is-done .r4-step-badge {
  background: #ffffff;
  border: 1px solid var(--r4-teal-line);
  color: var(--r4-teal-dark);
}

.r4-step-body p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--r4-muted);
}

/* Follow-up Review & CBT Honesty Section + Growth Note */
.r4-followup-section {
  margin: 0 0 22px;
}

.r4-section-head h2 {
  font-size: 1.18rem;
  margin: 0 0 12px;
}

.r4-action-grid {
  margin: 0;
}

.r4-growth-note {
  background: var(--r4-surface);
  border: 2px solid #cedcd9;
  border-radius: 20px;
  padding: 18px 20px;
  align-items: flex-start;
}

.r4-note-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--r4-coral-soft);
  color: var(--r4-coral);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.r4-note-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r4-growth-link {
  width: 100%;
}

/* Lesson Screen: 3-Step Strip, Raised Options & Encouraging Chosen/Correct Comparison */
.r4-lesson-steps {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.r4-lesson-steps li {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #cbd9d6;
  background: #f4f8f7;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--r4-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.r4-lesson-steps li.is-done {
  background: var(--r4-teal-soft);
  border-color: var(--r4-teal-line);
  color: var(--r4-teal-dark);
}

.r4-lesson-steps li.is-current {
  background: var(--r4-coral-soft);
  border: 2px solid var(--r4-coral);
  color: #962d17;
}

.answer {
  border: 2px solid #6b8d89;
  border-bottom: 4px solid #355e59;
  border-radius: 16px;
  min-height: 70px;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.answer:hover:not(:disabled) {
  background: #f3f9f8;
}

.answer.chosen {
  background: var(--r4-teal-soft);
  border-color: var(--r4-teal);
  border-bottom-color: var(--r4-teal-dark);
}

.answer.right {
  background: #e7f5ec;
  border-color: #1f6b45;
  border-bottom-color: #13462c;
  color: #133c27;
}

.answer.incorrect {
  background: var(--r4-amber-soft);
  border-color: var(--r4-amber-border);
  border-bottom-color: #8f5b22;
  color: #5b3912;
}

.answer-feedback {
  border: 2px solid var(--r4-amber-border);
  border-left: 6px solid var(--r4-amber-border);
  background: var(--r4-amber-soft);
  border-radius: 20px;
  padding: 22px;
  animation: r4-rise-once 0.34s ease-out 1;
}

.answer-feedback.success {
  border-color: #2c7a53;
  border-left-color: #1f6b45;
  background: #eef8f1;
}

.r4-answer-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0;
}

.r4-choice-box {
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #d5dfd9;
}

.r4-choice-box.is-picked {
  border-color: var(--r4-amber-border);
  background: #fffcf6;
}

.r4-choice-box.is-correct {
  border-color: #2c7a53;
  background: #f6fcf8;
}

.r4-choice-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--r4-teal-dark);
}

.r4-choice-box.is-picked .r4-choice-label {
  color: #7c4914;
}

.r4-choice-box.is-correct .r4-choice-label {
  color: #1b5c3b;
}

.r4-choice-box p {
  margin: 0;
}

.r4-explanation-card {
  background: #ffffff;
  border: 1px solid #cadad6;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 16px;
}

.r4-explanation-title {
  font-weight: 800;
  color: var(--r4-teal-dark);
  margin: 0 0 6px;
}

.r4-explanation-card p:last-child {
  margin: 0;
}

.r4-helper-btn {
  width: 100%;
  margin-bottom: 14px;
}

/* Result Screen: Immediate Sense of Achievement & Next Recommended Step */
.r4-celebration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  text-align: left;
  background: linear-gradient(135deg, #fff3e6 0%, #fffdf7 100%);
  border: 2px solid #e2b887;
  border-radius: 22px;
  padding: 18px 20px;
  animation: r4-rise-once 0.38s ease-out 1;
}

.r4-celebration-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--r4-coral);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.r4-celebration-text {
  flex: 1;
  min-width: 180px;
}

.r4-celebration-text p {
  margin: 0 0 2px;
  font-size: 1.12rem;
  color: #5f3813;
}

.r4-celebration-text small {
  color: #6b5235;
}

.r4-result-numbers {
  border: 2px solid #bfd6d2;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf8 100%);
  padding: 22px 16px;
}

.r4-metric-icon {
  font-size: 1.35rem;
}

.r4-result-numbers strong {
  color: var(--r4-teal-dark);
}

.r4-next-panel {
  border: 2px solid var(--r4-coral-line);
  background: linear-gradient(180deg, var(--r4-coral-soft) 0%, #ffffff 55%);
  border-radius: 22px;
}

.r4-result-grid {
  margin: 14px 0;
}

.r4-today-return {
  width: 100%;
}

/* Finite one-shot animations only: override any infinite loop from base stylesheet */
.companion-eyes {
  animation-iteration-count: 2;
}

@keyframes r4-rise-once {
  from {
    opacity: 0.45;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Focus mode preservation */
html[data-focus="true"] .r4-lesson-steps {
  display: none;
}

/* Reduced motion: both data-motion="false" and prefers-reduced-motion */
html[data-motion="false"] *,
html[data-motion="false"] *::before,
html[data-motion="false"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive layouts: 1280 / 768 / 390 / 360 / 320 and 200% font size */
@media (max-width: 960px) {
  .r4-today-hero {
    grid-template-columns: 1fr;
  }
  .r4-path-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .r4-cta-card {
    padding: 20px 16px;
  }
  .r4-daily-path {
    padding: 16px 14px;
  }
  .r4-lesson-steps {
    grid-template-columns: 1fr;
  }
  .r4-celebration {
    padding: 16px 14px;
  }
  .r4-growth-note {
    flex-direction: column;
    padding: 16px;
  }
}

html[data-size="2"] .r4-today-hero,
html[data-size="2"] .r4-path-list,
html[data-size="2"] .r4-lesson-steps,
html[data-size="2"] .r4-action-grid,
html[data-size="2"] .r4-result-grid,
html[data-size="2"] .r4-result-numbers {
  grid-template-columns: 1fr;
}

html[data-size="2"] .r4-step-top,
html[data-size="2"] .r4-celebration,
html[data-size="2"] .r4-growth-note {
  flex-direction: column;
  align-items: flex-start;
}

html[data-size="2"] .r4-cta-card,
html[data-size="2"] .r4-daily-path,
html[data-size="2"] .r4-next-panel,
html[data-size="2"] .answer-feedback {
  padding: 16px 14px;
}
/* Codex integration: keep the child and primary action together above the fold. */
@media(max-width:960px){
 .screen-today>.page-heading>p:last-child{display:none}
 .r4-today-hero .child-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:16px;align-items:center}
 .r4-today-hero .portrait{width:112px;min-height:0;padding:0}
 .r4-today-hero .portrait svg{width:105px;height:110px}
 .r4-today-hero .stage-label{font-size:.75rem;white-space:normal}
 .r4-today-hero .child-copy h2{font-size:1.1rem;margin:0 0 10px}
 .r4-today-hero .child-copy>.chip,.r4-today-hero .child-copy>p{display:none}
 .r4-today-hero .growth-label{flex-wrap:wrap;font-size:.8rem;gap:4px}
 .r4-cta-card{padding:16px}
 .r4-cta-card .eyebrow{border:0;padding:0;background:none}
 .r4-cta-card h2{margin:8px 0}
 .r4-cta-card .small{margin:10px 0 0}
}
html[data-size="2"] .r4-today-hero .child-card{grid-template-columns:1fr}
html[data-size="2"] .r4-today-hero .portrait{margin:auto}
@media(max-width:360px){.r4-today-hero .child-card{grid-template-columns:90px minmax(0,1fr)}.r4-today-hero .portrait{width:90px}.r4-today-hero .portrait svg{width:90px}}
.question-negative{color:#822614;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
@media(max-width:960px){.r4-today-hero .stage-age{display:none}}