/* Free ATLS sample chapter. Colours, radii and type follow the app's
   lesson and question screens (app/lib/shared/ui_tokens.dart). */

.atls-page {
  --al-navy: #141c2b;
  --al-accent: #00d09e;
  --al-border: #e2e8f0;
  --al-muted: #64748b;
  --al-surface: #ffffff;
  --al-screen: #f7fafc;
  --al-correct-bg: #f0fdf4;
  --al-correct-border: #16a34a;
  --al-correct-ink: #166534;
  --al-wrong-bg: #fff1f2;
  --al-wrong-border: #fda4af;
  --al-wrong-ink: #9f1239;
  /* Until Inter has loaded, prefer Windows 11's smooth variable Segoe over
     the static Segoe UI, which renders jagged at bold weights. */
  --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI Variable', system-ui, -apple-system, sans-serif;
}

.atls-page a.lang-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Same paper-and-grid surface as the privacy and support pages. */
.al-page {
  background:
    linear-gradient(90deg, rgba(16, 17, 20, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(16, 17, 20, 0.045) 1px, transparent 1px),
    var(--pattern-paper);
  background-size: 28px 28px;
}

.al-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 16px 56px;
  color: var(--al-navy);
}

.al-hero {
  text-align: center;
  margin-bottom: 36px;
}

.al-hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.al-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #475569;
  max-width: 620px;
  margin: 0 auto;
}

.al-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.al-try {
  margin: 28px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
}

.al-try strong { color: var(--al-navy); }

/* Buttons: the app's navy primary and white outlined secondary. */
.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}

.al-btn:active { transform: scale(0.98); }

.al-btn-primary {
  background: var(--al-navy);
  color: #fff;
}

.al-btn-primary:hover { background: #1f2a40; }

.al-btn-ghost {
  background: var(--al-surface);
  color: var(--al-navy);
  border-color: var(--al-border);
}

.al-btn-ghost:hover { background: #f1f5f9; }

.al-btn-block {
  display: flex;
  width: 100%;
  margin-top: 12px;
}

.al-btn:focus-visible,
.al-opt:focus-visible,
.al-back:focus-visible,
.atls-page summary:focus-visible {
  outline: 3px solid var(--al-accent);
  outline-offset: 2px;
}

/* The lesson panel: one app screen. */
.al-lesson {
  max-width: 560px;
  margin: 0 auto;
  background: var(--al-screen);
  border: 1.5px solid var(--al-border);
  border-radius: 28px;
  padding: 24px 20px 22px;
  box-shadow: 0 16px 48px rgba(20, 28, 43, 0.08);
  position: relative;
}

/* Celebration confetti on the result screen (75% and up, as in the app). */
.al-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.al-confetti span {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: al-confetti-fall 3s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes al-confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(var(--al-drift, 0), 620px, 0) rotate(var(--al-spin, 360deg)); opacity: 0; }
}

.al-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.al-topbar[hidden],
.al-result[hidden] { display: none; }

.al-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px 0 -8px -10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #94a3b8;
  cursor: pointer;
}

.al-progress {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #e6ecf5;
  overflow: hidden;
}

.al-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--al-accent);
  transition: width 250ms ease;
}

.al-lesson-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.al-ori { width: 56px; height: 56px; }

.al-course-tag {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--al-muted);
}

.al-count {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--al-muted);
}

.al-chapter-label,
.al-section-label,
.al-question-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-muted);
  margin: 18px 0 0;
}

.al-title {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 6px 0 0;
}

.al-section-label { margin: 22px 0 10px; }

.al-card {
  background: var(--al-surface);
  border: 1.5px solid var(--al-border);
  border-radius: 16px;
  padding: 18px 18px 18px 14px;
}

.al-keypoints {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kp;
}

.al-keypoints li {
  counter-increment: kp;
  position: relative;
  padding-left: 38px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

.al-keypoints li + li { margin-top: 16px; }

.al-keypoints li::before {
  content: counter(kp) ".";
  position: absolute;
  left: 4px;
  top: 0;
  font-weight: 800;
  color: var(--al-accent);
}

.al-start { margin-top: 18px; }

/* Questions. Without JavaScript they are a plain list with a
   "show answer" disclosure; the script turns them into one-at-a-time
   cards with instant feedback. */
.al-questions { margin-top: 32px; }

.al-questions-heading {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.al-question { padding: 6px 0 26px; }

.al-question + .al-question { border-top: 1.5px solid var(--al-border); }

.al-stem {
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 8px 0 16px;
}

.al-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.al-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--al-navy);
  background: var(--al-surface);
  border: 1.5px solid var(--al-border);
  border-radius: 14px;
  box-shadow: 0 3px 0 #dce4f2;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.al-opt:hover:not(:disabled) { border-color: #cbd5e1; background: #f8fafc; }
.al-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #dce4f2; }
.al-opt:disabled { cursor: default; }

.al-opt-letter {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--al-muted);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.al-opt.is-dimmed {
  background: #f1f3f5;
  color: #94a3b8;
}

.al-opt.is-correct {
  background: var(--al-correct-bg);
  border-color: var(--al-correct-border);
  color: var(--al-correct-ink);
  box-shadow: none;
}

.al-opt.is-correct .al-opt-letter { background: var(--al-correct-border); color: #fff; }

.al-opt.is-wrong {
  background: var(--al-wrong-bg);
  border-color: var(--al-wrong-border);
  color: var(--al-wrong-ink);
  box-shadow: none;
}

.al-opt.is-wrong .al-opt-letter { background: #e11d48; color: #fff; }

.al-answer {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.6;
}

.al-answer summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--al-muted);
  padding: 8px 0;
}

.al-feedback {
  margin-top: 16px;
  padding: 18px;
  border: 1.5px solid var(--al-correct-border);
  border-radius: 20px;
  background: var(--al-correct-bg);
  color: var(--al-correct-ink);
  font-weight: 600;
  line-height: 1.6;
}

.al-feedback.is-wrong {
  border-color: var(--al-wrong-border);
  background: var(--al-wrong-bg);
  color: var(--al-wrong-ink);
}

.al-feedback-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 8px;
}

.al-feedback p { margin: 0; }
.al-feedback p + p { margin-top: 8px; }

/* Script-driven state. */
.al-lesson.is-js .al-answer,
.al-lesson.is-js .al-questions-heading { display: none; }

.al-lesson.is-js .al-questions { margin-top: 0; }
.al-lesson.is-js .al-question { padding: 0; border-top: 0; }
.al-lesson.is-js .al-question:not(.is-current) { display: none; }
.al-lesson.is-js[data-view="theory"] .al-questions,
.al-lesson.is-js[data-view="result"] .al-questions,
.al-lesson.is-js[data-view="questions"] .al-theory,
.al-lesson.is-js[data-view="result"] .al-theory { display: none; }

.al-result { text-align: center; }
.al-ori-large { width: 112px; height: 112px; margin: 0 auto; }
.al-result-title { font-size: 1.5rem; font-weight: 800; margin: 12px 0 4px; }
.al-result-score { font-size: 1.15rem; font-weight: 800; color: #0f9f7c; margin: 0; }
.al-result-text { color: #475569; line-height: 1.6; margin: 10px 0 0; }
.al-result-cta {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-muted);
  margin: 22px 0 0;
}

/* Supporting sections. */
.al-section { margin-top: 56px; }

.al-section > h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.al-section > p { color: #475569; line-height: 1.6; margin: 0; }

.al-features {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.al-feature {
  background: var(--al-surface);
  border: 1.5px solid var(--al-border);
  border-radius: 16px;
  padding: 18px;
}

.al-feature h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.al-feature p { color: #475569; line-height: 1.55; margin: 0; }

.al-store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.al-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ch;
  display: grid;
  gap: 8px;
}

.al-chapters li {
  counter-increment: ch;
  position: relative;
  padding: 12px 14px 12px 50px;
  background: var(--al-surface);
  border: 1.5px solid var(--al-border);
  border-radius: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.al-chapters li::before {
  content: counter(ch, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--al-accent);
}

.al-chapters li.is-free { border-color: var(--al-accent); }
.al-chapters a { color: inherit; }

.al-free-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--al-correct-bg);
  color: var(--al-correct-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.al-faq { display: grid; gap: 10px; margin-top: 4px; }

.al-faq-item {
  background: var(--al-surface);
  border: 1.5px solid var(--al-border);
  border-radius: 14px;
  padding: 0 16px;
}

.al-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 15px 0;
  line-height: 1.4;
}

.al-faq-item p { color: #475569; line-height: 1.6; margin: 0 0 16px; }

.al-disclaimer {
  margin: 48px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--al-muted);
}

.al-section-center > h2,
.al-section-center > p { text-align: center; }
.al-section-center > h2 { text-wrap: balance; }
.al-section-center .al-store-row { justify-content: center; }
.al-section-center > .al-chapters,
.al-section-center > .al-faq { margin-top: 20px; }

/* Keep the Next button clear of the viewport edge when it is scrolled into view. */
.al-next { scroll-margin-bottom: 20px; }

@media (min-width: 640px) {
  .al-lesson { padding: 28px 28px 26px; }
  .al-features { grid-template-columns: repeat(3, 1fr); }
  /* Read down, then across: 1-12 in the left column, 13-24 in the right. */
  .al-chapters {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(12, auto);
    grid-auto-flow: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .al-btn, .al-opt, .al-progress span { transition: none; }
}

/* The footer carries a link per language here; let it wrap on phones. */
.atls-page .footer-inner,
.atls-page .footer-links {
  flex-wrap: wrap;
  justify-content: center;
}

.atls-page .footer-copy { text-align: center; }

/* Desktop: the phone-sized type reads large on a monitor, so render the page
   at 80% and use the freed width (sizes below are before the 0.8 scale). */
@media (min-width: 900px) {
  .al-main {
    zoom: 0.8;
    max-width: 1200px;
    padding-top: 150px;
  }
  .al-lesson { max-width: 880px; }
  .al-lead { max-width: 820px; }
}