/* Lesson-specific styles for the coding-agent lesson. Prefix: ca-. */
.ca-hero-emoji {
  font-size: clamp(56px, 8vw, 104px);
  line-height: 1;
  margin-bottom: 14px;
}

.ca-panel,
.ca-chat-bubble,
.ca-file-list,
.ca-file,
.ca-diff,
.ca-run-box,
.ca-report,
.ca-recap-board {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Broken/working login button used across scenes */
.ca-login-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 18px; color: #fff;
  border: none; border-radius: 12px; padding: 12px 22px;
  background: #c94f4f; box-shadow: 0 5px 0 #9c3a3a;
}
.ca-login-btn.ca-working { background: var(--hands); box-shadow: 0 5px 0 #3fae7a; color: #123; }

.ca-corner-status {
  position: absolute; top: 14px; right: 18px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--muted);
}

.ca-chat-bubble {
  max-width: 640px; margin: 24px auto 0; padding: 18px 22px;
  border: 3px solid var(--accent); text-align: left;
  font-size: clamp(18px, 2vw, 24px); font-weight: 700; min-height: 32px;
}
.ca-chat-who { display: block; font-size: 13px; color: var(--muted); font-weight: 800; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.ca-caret { border-right: 3px solid var(--ink); animation: ca-blink 1s step-end infinite; }
@keyframes ca-blink { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .ca-caret { animation: none; } }

.ca-file-list { max-width: 460px; margin: 24px auto 0; padding: 12px; text-align: left; }
.ca-file {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 12px; font-weight: 700; box-shadow: none; margin: 6px 0;
  border: 2px solid transparent; transition: background .2s ease, border-color .2s ease;
}
.ca-file.ca-scanning { background: var(--bg-2); }
.ca-file.ca-found { border-color: var(--accent); background: #fff7e6; }
.ca-file .ca-file-note { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 800; }

.ca-diff {
  max-width: 640px; margin: 24px auto 0; padding: 18px; text-align: left;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(14px, 1.6vw, 18px);
}
.ca-diff-file { font-family: var(--font); font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.ca-line { padding: 8px 12px; border-radius: 8px; margin: 6px 0; display: block; }
.ca-line-bad { background: #fdecec; color: #a33; text-decoration: line-through; }
.ca-line-good { background: #e9f9f1; color: #1a7a52; opacity: 0; transition: opacity .4s ease; }
.ca-line-good.ca-show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ca-line-good { transition: none; } }

.ca-run-box {
  max-width: 560px; margin: 24px auto 0; padding: 20px; text-align: left;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(14px, 1.6vw, 18px);
}
.ca-run-line { margin: 8px 0; display: flex; align-items: center; gap: 10px; }
.ca-run-spinner { animation: ca-spin 0.8s linear infinite; display: inline-block; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ca-run-spinner { animation: none; } }
.ca-run-result { font-weight: 800; font-family: var(--font); }
.ca-run-result.ca-pass { color: #1a7a52; }
.ca-run-result.ca-fail { color: #a33; }

.ca-report { max-width: 620px; margin: 24px auto 0; padding: 20px 24px; text-align: left; }
.ca-report-who { font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.ca-report-item {
  padding: 10px 0; border-top: 1px solid #efe7db; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.ca-report-item.ca-show { opacity: 1; transform: none; }
.ca-report-item:first-of-type { border-top: none; }
@media (prefers-reduced-motion: reduce) { .ca-report-item { transition: none; } }

.ca-recap-board {
  max-width: 720px; margin: 22px auto 0; padding: 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ca-recap-cell { padding: 14px; }
.ca-recap-cell .ca-recap-emoji { font-size: 40px; }
.ca-recap-cell h3 { margin: 8px 0 4px; }
.ca-recap-cell p { font-size: 15px; color: var(--muted); }
.ca-contrast { margin-top: 18px; }
@media (max-width: 720px) { .ca-recap-board { grid-template-columns: 1fr; } }