/* Ready in 5 self-guided training pages */

.r5-hero { padding: 1.5rem 0 2.25rem; }
.r5-hero a { color: var(--white); }
.r5-hero a:hover { color: var(--sand-200); }
.r5-hero p { max-width: 44rem; font-size: 1.15rem; }
.r5-hero .cta-row { margin-top: 1.25rem; }

.r5-crumbs ol {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 1rem;
}
.r5-crumbs li + li::before { content: "\203A"; margin-right: 0.35rem; opacity: 0.85; }
.r5-crumbs [aria-current] { font-weight: 700; }

.r5-kicker {
  display: inline-block;
  margin-bottom: 0.5rem !important;
  font-weight: 700;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
}
.r5-hero-grid {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 640px) {
  .r5-hero-grid { grid-template-columns: auto 1fr; }
}
.r5-hero-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  padding: 0.75rem;
  background: var(--white);
  border-radius: 50%;
}
.r5-say { margin: 0 0 0.5rem !important; }
.r5-def { font-size: 1.3rem !important; }
.r5-src { display: block; font-size: 0.9rem; margin-top: 0.35rem; }

.r5-body { padding: 2rem 0 3rem; max-width: 52rem; font-size: 1.2rem; }
.r5-body h2 {
  font-family: var(--font-display);
  color: var(--teal-900);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
.r5-body h3 { margin: 0 0 0.25rem; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.r5-howto {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--sand-100);
  border-left: 6px solid var(--sand-500);
  border-radius: var(--radius-sm);
}

.r5-section,
.r5-step {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-bottom: 1.25rem;
}
.r5-section > p:last-child,
.r5-step > :last-child { margin-bottom: 0; }

.r5-step-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.5rem; }
.r5-step-head h2 { margin: 0; }
.r5-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--teal-700);
  color: var(--white);
  font-weight: 800;
  font-size: 1.35rem;
}
.r5-q { font-size: 1.35rem; font-weight: 700; margin: 0.5rem 0; }
.r5-think { margin: 0 0 0.75rem; color: var(--ink-muted); }

.r5-answer,
.r5-quiz details {
  border: 2px solid var(--teal-600);
  border-radius: var(--radius-sm);
  background: var(--teal-50);
}
.r5-answer summary,
.r5-quiz summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  min-height: 48px;
  font-weight: 700;
  color: var(--teal-900);
  list-style-position: inside;
}
.r5-answer summary:focus-visible,
.r5-quiz summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.r5-answer[open] summary { border-bottom: 1px solid var(--teal-100); }
.r5-answer p,
.r5-quiz details p { margin: 0; padding: 0.85rem 1rem 1rem; font-size: 1.3rem; }

/* Breathing break: the circle grows and shrinks (still for reduced motion) */
.r5-breathe { background: var(--teal-50); border-color: var(--teal-100); }
.r5-breathe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.r5-breathe-dot {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-100) 0%, var(--teal-600) 100%);
  animation: r5-breathe 8s ease-in-out infinite;
}
@keyframes r5-breathe {
  0%, 100% { transform: scale(0.7); }
  50% { transform: scale(1); }
}
.r5-breathe-steps { margin: 0; padding-left: 1.4rem; font-size: 1.25rem; }

.r5-actions {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .r5-actions { grid-template-columns: repeat(3, 1fr); }
}
.r5-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  border: 2px solid var(--teal-100);
  border-radius: var(--radius);
}
.r5-action img { width: auto; height: 110px; object-fit: contain; margin: 0.5rem 0 0.75rem; }
.r5-action h3 { font-size: 1.5rem; letter-spacing: 0.03em; }
.r5-action p { margin: 0; }
.r5-order {
  font-weight: 800;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  padding: 0.1rem 0.8rem;
  font-size: 1rem;
}

.r5-five { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.r5-five li { display: flex; gap: 1rem; align-items: flex-start; }
.r5-five img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.r5-five p { margin: 0; }

.r5-list { margin: 0 0 1rem; padding-left: 1.4rem; }
.r5-list li { margin-bottom: 0.5rem; }
.r5-tip {
  background: var(--sand-100);
  border: 2px solid var(--sand-500);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.r5-tip p { margin: 0 0 0.75rem; }
.r5-tip p:last-child { margin-bottom: 0; }
.r5-quiz { margin-top: 1rem; }
.r5-quiz-q { margin: 0 0 0.75rem; }

.r5-adapt { display: grid; gap: 1.25rem; margin: 1rem 0; }
.r5-adapt figure { margin: 0; }
.r5-adapt img { width: 100%; max-width: 480px; border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); }
.r5-adapt figcaption { margin-top: 0.5rem; }

.r5-card-section { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 640px) {
  .r5-card-section { grid-template-columns: 1fr auto; }
}
.r5-drill-card { width: 200px; height: auto; justify-self: center; }

.r5-done { border: 2px solid var(--teal-600); }
.r5-done-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.r5-done-btn[aria-pressed="true"] { background: var(--teal-900); }
.r5-done-status { font-weight: 700; color: var(--teal-900); margin: 0.75rem 0 0; }
.r5-done-status:empty { display: none; }

.r5-resources { margin: 0; padding-left: 1.4rem; }
.r5-resources li { margin-bottom: 0.75rem; }
.r5-res-note { display: block; color: var(--ink-muted); font-size: 1.05rem; }

.r5-pager {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .r5-pager { grid-template-columns: 1fr 1fr; }
}
.r5-pager a {
  display: block;
  padding: 1rem 1.25rem;
  border: 2px solid var(--teal-600);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
}
.r5-pager a:hover { background: var(--teal-50); }
.r5-pager span { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-muted); }
.r5-pager .r5-next { text-align: right; background: var(--teal-700); color: var(--white); }
.r5-pager .r5-next span { color: var(--white); }
.r5-pager .r5-next:hover { background: var(--teal-900); color: var(--white); }
.r5-prev span::before { content: "\2190  "; }
.r5-next span::after { content: "  \2192"; }

/* Training page */
.r5-how { margin: 0 0 1rem; padding-left: 1.4rem; }
.r5-how li { margin-bottom: 0.6rem; }
.r5-ess {
  list-style: none;
  counter-reset: ess;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.r5-ess li {
  counter-increment: ess;
  position: relative;
  padding: 0.75rem 1rem 0.75rem 4rem;
  background: var(--teal-50);
  border-radius: var(--radius-sm);
}
.r5-ess li::before {
  content: counter(ess);
  position: absolute;
  left: 0.85rem;
  top: 0.8rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal-700);
  color: var(--white);
  font-weight: 800;
}
.r5-ess p { margin: 0; }

.r5-progress { font-weight: 700; color: var(--teal-900); }
.r5-progress:empty { display: none; }
.r5-lessons { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .r5-lessons { grid-template-columns: 1fr 1fr; }
}
.r5-lesson {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 2px solid var(--teal-100);
  border-radius: var(--radius);
  background: var(--white);
}
.r5-lesson:hover,
.r5-lesson:focus-within { border-color: var(--teal-600); background: var(--teal-50); }
.r5-lesson.is-done { border-color: var(--teal-700); }
.r5-lesson img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.r5-lesson h3 { font-size: 1.4rem; }
/* The whole card is clickable; the link text stays the accessible name */
.r5-lesson h3 a { text-decoration: none; }
.r5-lesson h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.r5-lesson h3 a:focus-visible { outline: none; }
.r5-lesson h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.r5-lesson p { margin: 0; }
.r5-lesson-num { font-size: 0.95rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.r5-lesson-status { margin-top: 0.35rem !important; font-weight: 700; color: var(--teal-800); }

@media print {
  .sample-banner, .util-bar, .bar-211, .site-header, .site-footer,
  .r5-pager, .r5-done, .r5-crumbs, .r5-hero .cta-row, .skip-link { display: none !important; }
  .r5-hero { background: none; color: var(--ink); padding: 0; }
  .r5-hero a { color: var(--ink); }
  .r5-section, .r5-step { box-shadow: none; break-inside: avoid; }
  .r5-breathe-dot { animation: none; }
}