/* Base visual do curso "IA no seu ritmo": tokens e componentes, a partir de mockups/base.css (aprovado, layout B).
   P1: corpo 20px, entrelinha 1.5, mínimo 16px, alvos >= 44px, texto principal >= 7:1,
   fundo claro por padrão com escuro opcional.
   Pesquisa de layout: sinalizadores fortes de clicável (Urbano et al. 2022; Moran/NNg 2017),
   rótulo de texto em todo controle (Leung et al. 2011), controles fora da periferia superior
   (Romano Bergstrom et al. 2016), ajuda sempre no mesmo lugar (WCAG 3.2.6).

   Todo tamanho de fonte é em rem: "Aparência" troca o font-size do <html> (20, 24 ou 28 px) e tudo escala.
   1rem = 20px no tamanho normal; 0.8rem = 16px é o menor texto permitido.

   Diferenças em relação ao mockup (achados da auditoria):
   - .btn-primary: as duas pontas do gradiente passam de 7:1 com o texto (o mockup tinha 6,33:1 na ponta clara);
   - .ai-badge e demais rótulos pequenos: nada abaixo de 0.8rem (16px); o mockup tinha 13px;
   - --warn um pouco mais escuro, para o "!" sobre --warn-bg chegar a 7:1. */

:root {
  color-scheme: light;
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --ink: #1C1B19;
  --ink-2: #45433E;
  --line: #7D7A72;
  --line-soft: #D9D5CC;

  --primary: #1D4C9C;      /* branco sobre ela: 8,2:1 */
  --primary-top: #2452A0;  /* branco sobre ela: 7,5:1 (ponta clara do gradiente) */
  --primary-ink: #FFFFFF;
  --primary-edge: #102E63;
  --focus: #0B3D91;

  /* voz do curso: âmbar */
  --course-bg: #FFF1D1;
  --course-line: #C99A3A;
  --course-label: #5C3D00;

  /* chat */
  --you-bg: #E4EDFC;
  --you-line: #8FAEE0;
  --ai-bg: #FFFFFF;
  --ai-line: #BDB8AD;
  --chat-bg: #F1EFEA;

  --ok: #17542E;
  --ok-bg: #E5F3E9;
  --warn: #763F00;         /* sobre --warn-bg: 7,3:1 (o #7A4100 do mockup dava 6,97:1) */
  --warn-bg: #FDEBD6;
  --pending: #5A574F;

  --radius: 14px;
  --raise: 0 3px 0 rgba(0,0,0,.28);
  --raise-press: 0 1px 0 rgba(0,0,0,.28);
  --slot: inset 0 2px 4px rgba(0,0,0,.12);
  --shadow-panel: 0 8px 32px rgba(0,0,0,.2);

  --fs-body: 1rem;      /* 20px */
  --fs-small: .85rem;   /* 17px */
  --fs-h1: 1.3rem;      /* 26px */
  --fs-h2: 1.2rem;      /* 24px */
  --fs-btn: 1rem;       /* 20px */
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191A1C;
  --surface: #24262A;
  --ink: #F2EFE8;
  --ink-2: #C9C5BC;
  --line: #8E8A82;
  --line-soft: #3A3C41;
  --primary: #8DB4F5;      /* texto #10213F sobre ela: 7,6:1 */
  --primary-top: #A3C3F7;  /* ponta clara: contraste ainda maior com o texto escuro */
  --primary-ink: #10213F;
  --primary-edge: #4E78BE;
  --focus: #BFD5FA;
  --course-bg: #3A2F17;
  --course-line: #B8893A;
  --course-label: #F5D79A;
  --you-bg: #1F3150;
  --you-line: #5C7FB8;
  --ai-bg: #2C2E33;
  --ai-line: #55585F;
  --chat-bg: #202225;
  --ok: #8FD6A6;
  --ok-bg: #1E3626;
  --warn: #F5C38A;
  --warn-bg: #3B2A14;
  --pending: #B5B1A8;
  --raise: 0 3px 0 rgba(0,0,0,.6);
  --raise-press: 0 1px 0 rgba(0,0,0,.6);
  --slot: inset 0 2px 4px rgba(0,0,0,.45);
  --shadow-panel: 0 8px 32px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { font-size: 20px; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1.1rem; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Só para leitor de tela (não conta como texto visível para a auditoria). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- topo: marca + onde estou ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px 24px;
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 2px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; flex: none; }
.brand-mark {
  width: 2rem; height: 2rem; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); font-size: .85rem;
}
.where-top { flex: 1; min-width: 0; }
.where-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.where-line span { color: var(--ink-2); font-size: var(--fs-small); }
.progress { display: flex; gap: 6px; margin-top: 4px; max-width: 520px; }
.progress span { height: 8px; flex: 1; border-radius: 4px; background: var(--line-soft); }
.progress span.done { background: var(--primary); }
.progress span.now { background: var(--primary); opacity: .45; }

/* ---------- botões com cara de botão ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; min-width: 56px;
  padding: 0 24px;
  font: inherit; font-size: var(--fs-btn); font-weight: 700; line-height: 1.25;
  border-radius: 12px;
  border: 2px solid var(--primary-edge);
  box-shadow: var(--raise);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(2px); box-shadow: var(--raise-press); }
.btn-primary {
  background: linear-gradient(var(--primary-top), var(--primary));
  color: var(--primary-ink);
}
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.btn-help { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-help .q {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center; font-size: .9rem; line-height: 1;
}
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); min-height: 48px; padding: 0 18px; }
/* Aparência aberta: o botão fica com borda grossa, ligado ao painel logo abaixo */
.btn-appearance[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), var(--raise); }
/* botão de escolha (Aparência): a escolhida ganha ✓ escrito e borda mais grossa, nunca só cor */
.btn-choice { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-choice[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary), var(--raise); }
.btn-choice .check { visibility: hidden; color: var(--primary); }
.btn-choice[aria-pressed="true"] .check { visibility: visible; }
.arrow { font-weight: 700; }

/* ---------- barra inferior: voltar, ajuda, dica ou próximo passo ---------- */
.bottombar {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--surface);
  border-top: 2px solid var(--line-soft);
  padding: 10px 24px;
}
.bottombar-inner { display: flex; align-items: center; gap: 14px; max-width: 1320px; margin: 0 auto; }
.bottombar .spacer { flex: 1; }
.bottombar-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
/* Na etapa 1 não há para onde voltar: o botão some, mas o lugar fica reservado para a Ajuda não mudar de lugar. */
.bottombar .btn-back.is-placeholder { visibility: hidden; }
.nav-hint { color: var(--ink-2); font-size: var(--fs-small); max-width: 420px; text-align: right; }

/* ---------- voz do curso ---------- */
.course-card {
  background: var(--course-bg);
  border: 2px solid var(--course-line);
  border-radius: var(--radius);
  padding: 14px 20px;
  color: var(--ink);
}
.course-label {
  display: block;
  font-size: var(--fs-small); font-weight: 700;
  color: var(--course-label);
}
.course-label + p { margin-top: 2px; }
p + .course-label, ul + .course-label { margin-top: 12px; }

.criteria { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.criteria li { display: flex; align-items: center; gap: 12px; }
.mark {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--pending); color: var(--pending); background: var(--surface);
}
.criteria li.ok .mark { border-color: var(--ok); background: var(--ok); color: var(--surface); }
.criteria li.miss .mark { border-color: var(--warn); color: var(--warn); }
.criteria .state { font-size: var(--fs-small); color: var(--ink-2); margin-left: auto; padding-left: 8px; white-space: nowrap; }
.criteria li.ok .state { color: var(--ok); font-weight: 700; }
.criteria li.miss .state { color: var(--warn); font-weight: 700; }

.feedback {
  margin-top: 10px; border-radius: 12px; padding: 10px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.feedback.ok { background: var(--ok-bg); border: 2px solid var(--ok); }
.feedback.warn { background: var(--warn-bg); border: 2px solid var(--warn); }
.feedback .icon { font-weight: 700; flex: none; }
.feedback.ok .icon { color: var(--ok); }
.feedback.warn .icon { color: var(--warn); }

/* ---------- avisos da casca (retomada, armazenamento): não bloqueiam a tela ---------- */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  border-radius: 12px; padding: 10px 16px;
  border: 2px solid var(--course-line);
  background: var(--course-bg);
  color: var(--ink);
}
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice .icon { font-weight: 700; flex: none; color: var(--course-label); }
.notice.warn .icon { color: var(--warn); }
.notice-text { flex: 1 1 16rem; min-width: 0; }

/* ---------- área de treino (chat) ---------- */
.chat {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.chat-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 8px 18px;
  border-bottom: 2px solid var(--line-soft);
}
.chat-title { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.chat-dot { width: 14px; height: 14px; border-radius: 50%; background: #2F8F55; flex: none; }
.chat-note { font-size: var(--fs-small); color: var(--ink-2); }
.chat-body {
  background: var(--chat-bg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1; min-height: 0;
}
.chat-empty { margin: auto; text-align: center; color: var(--ink-2); padding: 16px 12px; }
.msg { max-width: 88%; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg .who { font-size: var(--fs-small); font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.msg .bubble { border-radius: 16px; padding: 10px 16px; border: 2px solid; white-space: pre-line; color: var(--ink); }
.msg.you { align-self: flex-end; align-items: flex-end; }
.msg.you .bubble { background: var(--you-bg); border-color: var(--you-line); border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; }
.msg.ai .bubble { background: var(--ai-bg); border-color: var(--ai-line); border-bottom-left-radius: 4px; }
.ai-badge {
  min-width: 1.6rem; height: 1.6rem; padding: 0 4px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--surface); font-size: .8rem; line-height: 1;
}
.composer { border-top: 2px solid var(--line-soft); padding: 10px 18px 14px; background: var(--surface); }
.composer label { display: block; font-weight: 700; margin-bottom: 6px; }
.composer-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.composer textarea {
  flex: 1 1 12rem; min-width: 0; min-height: 64px; resize: vertical;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: var(--slot);
  border-radius: 12px;
  padding: 10px 14px;
}
.composer textarea::placeholder { color: var(--ink-2); opacity: 1; }

/* ---------- painel de ajuda (abre acima da barra inferior) ---------- */
.help-panel {
  position: fixed; bottom: var(--acima-da-barra, 92px); left: 24px;
  width: min(460px, calc(100vw - 48px));
  max-height: calc(100vh - 120px); overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 18px 20px;
  z-index: 20;
}
.help-panel h2 { margin-bottom: 6px; }
.help-panel h2:focus { outline: none; }
.help-panel p + p { margin-top: 8px; }
.help-steps { display: grid; gap: 10px; margin-top: 12px; }
.help-steps .btn { width: 100%; justify-content: flex-start; text-align: left; }
.help-steps .lvl {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .8rem; border: 2px solid currentColor;
}
.help-foot { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- painel Aparência (faixa logo abaixo do topo; não cobre a etapa) ---------- */
.appearance {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
  padding: 12px 24px 16px;
  position: relative; z-index: 5;
}
.appearance-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 48px;
}
.appearance h2 { flex: 1 1 100%; }
.appearance h2:focus { outline: none; }
.appearance fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance legend { font-weight: 700; padding: 0; }
.appearance .status { color: var(--ink-2); font-size: var(--fs-small); margin-top: 6px; min-height: 1.5em; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.appearance-end { margin-left: auto; align-self: flex-end; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.appearance-note { font-size: var(--fs-small); color: var(--ink-2); max-width: 22rem; }

/* zoom alto ou tela estreita: barra inferior não pode comer a tela */
@media (max-width: 760px) {
  .brand-name { display: none; }
  .topbar { gap: 8px 14px; padding: 8px 14px; flex-wrap: wrap; }
  .bottombar { padding: 8px 14px; }
  .bottombar-inner { flex-wrap: wrap; gap: 10px; }
  .bottombar .spacer { display: none; }
  /* o próximo passo continua à direita, mesmo numa linha só dele */
  .bottombar-right { flex: 1 1 100%; justify-content: flex-end; }
  .nav-hint { flex: 1; text-align: left; max-width: none; }
  .help-panel { left: 14px; width: calc(100vw - 28px); }
  .appearance { padding: 10px 14px 14px; }
  .appearance-end { margin-left: 0; }
}
/* bem estreito (320 px, zoom de 400%): "Onde estou" ganha a linha inteira */
@media (max-width: 560px) {
  .topbar .where-top { order: 3; flex-basis: 100%; }
  .topbar .btn-appearance { margin-left: auto; }
  /* a barra quebra em três linhas: fixa, cobriria um terço da tela; fica no fim da página, na mesma ordem */
  .bottombar { position: static; }
}
@media (max-height: 520px) {
  .bottombar { position: static; }
  .help-panel { bottom: 8px; max-height: calc(100vh - 16px); }
}

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