/* Suporte (modal / bottom sheet), entrada discreta de feedback na home e o
   cartão de revisão. Autocontido: também carrega nas páginas de apoio, que
   não usam o site.css. */
.sp-backdrop {
  --sp-ink: #1c2b21; --sp-muted: #5d6d5d; --sp-line: #e6deca; --sp-paper: #fffdf7; --sp-butter: #f8c637; --sp-butter-deep: #dfa518; --sp-leaf: #2b5541;
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgb(20 36 28 / .46);
  animation: sp-fade .18s ease-out both;
}
body.has-support { overflow: hidden; }
.sp-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: min(92dvh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 22px;
  border-radius: 26px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  box-shadow: 0 24px 60px rgb(20 36 28 / .28);
  font: 400 15px/1.55 'DM Sans', system-ui, sans-serif;
  animation: sp-rise .26s cubic-bezier(.22, 1, .36, 1) both;
}
.sp-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: #f3eedf; color: var(--sp-ink);
  font: 500 24px/1 'DM Sans', sans-serif; cursor: pointer;
}
.sp-close:hover { background: #ebe3cd; }
.sp-head { padding-right: 44px; }
.sp-kicker { font: 700 11px/1 'DM Sans', sans-serif; letter-spacing: 1.6px; color: #566a48; }
.sp-head h2, .sp-done h2 { margin: 8px 0 6px; font: 500 28px/1.1 Fredoka, 'DM Sans', sans-serif; letter-spacing: -.4px; }
.sp-head p { margin: 0 0 18px; color: var(--sp-muted); }
.sp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.sp-cats legend { margin-bottom: 8px; font-weight: 700; font-size: 13px; }
.sp-cat { position: relative; }
.sp-cat input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-cat span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--sp-line); border-radius: 999px;
  background: #fff; color: var(--sp-ink);
  font-weight: 500; font-size: 14px;
  transition: background .15s, border-color .15s;
}
.sp-cat input:checked + span { background: #fff4cc; border-color: var(--sp-butter-deep); font-weight: 700; }
.sp-cat input:focus-visible + span { outline: 3px solid var(--sp-leaf); outline-offset: 2px; }
.sp-label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 13px; }
.sp-form textarea, .sp-form input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--sp-line); border-radius: 16px;
  background: #fff; color: var(--sp-ink);
  font: 400 16px/1.5 'DM Sans', system-ui, sans-serif;
}
.sp-form textarea { min-height: 128px; resize: vertical; }
.sp-form textarea:focus, .sp-form input[type="email"]:focus { outline: 3px solid #cfe3c0; border-color: var(--sp-leaf); }
.sp-form input[type="email"] { margin-bottom: 14px; }
.sp-count { margin: 4px 0 12px; text-align: right; font-size: 12px; color: #8a9483; }
.sp-account { margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; background: #f1f5ea; color: #3f5346; font-size: 13.5px; }
.sp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sp-turnstile { min-height: 0; margin: 0 0 12px; }
.sp-turnstile:not(:empty) { min-height: 65px; }
.sp-status { min-height: 1.4em; margin: 0 0 10px; color: #a24a1c; font-size: 14px; font-weight: 500; }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sp-actions small { color: #8a9483; font-size: 12.5px; }
.sp-send {
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 16px;
  background: var(--sp-butter); color: #3d2e05;
  box-shadow: 0 5px 0 #d8a92a;
  font: 600 16px/1 Fredoka, 'DM Sans', sans-serif; letter-spacing: .2px;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.sp-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 #d8a92a; }
.sp-send:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #d8a92a; }
.sp-send:disabled { opacity: .7; cursor: progress; }
.sp-send:focus-visible, .sp-close:focus-visible { outline: 3px solid var(--sp-leaf); outline-offset: 3px; }
.sp-done { padding: 10px 0 4px; text-align: center; }
.sp-done__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: #fff4cc; font-size: 32px; }
.sp-done p { margin: 0 auto 14px; max-width: 34ch; color: var(--sp-muted); }
.sp-done h2:focus { outline: none; }
.sp-protocol b { color: var(--sp-ink); font-variant-numeric: tabular-nums; }
@keyframes sp-fade { from { opacity: 0; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 600px) {
  .sp-backdrop { place-items: end stretch; padding: 0; }
  .sp-dialog { width: 100%; max-height: 92dvh; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; animation-name: sp-sheet; }
  .sp-head h2 { font-size: 25px; }
  .sp-send { flex: 1 1 100%; }
}
@keyframes sp-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sp-backdrop, .sp-dialog { animation: none; } }

/* Entrada discreta no app ("Conta pra gente…") e botão de texto no rodapé. */
.feedback-nudge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 26px 0 8px; padding: 10px 16px;
  border: 1.5px dashed #d9cfb2; border-radius: 999px;
  background: transparent; color: #5d6d5d;
  font: 500 14px/1.2 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.feedback-nudge:hover { background: #fff8e3; color: #1c2b21; border-color: #dfa518; }
.feedback-nudge:focus-visible { outline: 3px solid #2b5541; outline-offset: 3px; }

/* Revisão na home: lembrar antes de ver a resposta. */
.review-card { margin-top: 18px; }
.review-card h2 { margin-bottom: 4px; }
.review-card > p { margin: 0 0 14px; color: var(--muted, #626b5d); font-size: 14.5px; }
.review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.review-item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line, #dde2d5); border-radius: 16px; background: #fff; }
.review-item__from { font-size: 14.5px; color: #7b5a2a; text-decoration: line-through; text-decoration-color: #e3b36a; text-decoration-thickness: 1.5px; }
.review-item__to { font-size: 16px; font-weight: 700; color: #20422f; }
.review-item__why { font-size: 13px; color: var(--muted, #626b5d); }
.review-item button {
  justify-self: start; min-height: 36px; padding: 0 14px;
  border: 1.5px solid #cfdcc2; border-radius: 999px; background: #f4f8ee; color: #2b5541;
  font: 600 13px/1 'DM Sans', system-ui, sans-serif; cursor: pointer;
}
.review-item button:focus-visible { outline: 3px solid #2b5541; outline-offset: 2px; }

/* Sugestão de nível no fim da aula. */
.level-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: #f1f5ea; color: #2f4a35; font-size: 14px; }
.level-nudge button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #2b5541; color: #fff; font: 600 13.5px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.level-nudge button:focus-visible { outline: 3px solid #f8c637; outline-offset: 2px; }