/* ============================================================================
   Repositório Prático — UI Kit shared layout & utility styles
   Builds on colors_and_type.css tokens
   ============================================================================ */

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
  font-family: inherit;
}

/* ── App shell ───────────────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ── TopBar ──────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--primary-900);
  color: #fff;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
/* [PRUMO_F1 06/ago/2026] Aqui viviam `.topbar-brand .wordmark` e `.sub` do
   FATHOM (800, 16px, #fff). Eram ZUMBIS: perdiam para o styles.css, que entra
   depois (index.html:183 kit.css -> :185 styles.css injetado). Inverter a ordem
   de carga devolveria o wordmark branco e ninguem entenderia por que.
   O elemento nao existe mais -- a palavra e' <text> dentro do LogoLockup. */
.topbar-divider {
  height: 24px; width: 1px; background: rgba(255,255,255,0.15);
}
.topbar-nav {
  display: flex; gap: 2px;
}
.topbar-nav a {
  padding: 7px 14px;
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.78);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms;
}
.topbar-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar-nav a.active {
  background: rgba(255,255,255,0.12); color: #fff; font-weight: 600;
}
.topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.topbar-uid {
  font-family: var(--font-mono);
  font-size: 11px; color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold-500); color: var(--primary-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}

/* ── Sidebar (filter / tree) ─────────────────────────────────────────────── */

.sidebar {
  width: 320px;
  background: var(--surface);
  border-right: 1px solid var(--ink-100);
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
.sidebar-dark {
  background: var(--primary-900);
  color: #fff;
  border-right: none;
}
.sidebar-section {
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-section .label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-500); text-transform: uppercase;
}
.sidebar-dark .sidebar-section .label {
  color: var(--gold-300);
}

/* ── Main content area ───────────────────────────────────────────────────── */

.content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}
.content-narrow {
  max-width: 920px;
  margin: 0 auto;
}

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}

/* ── Card primitive ──────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.card-padded { padding: 20px 22px; }

/* ── [Item 1] Seleção de texto liberada no conteúdo (editor) ── */
/* [CANAL16PACOTE 12/ago/2026 · F1] `.rp-radio-bal` — o balão do Canal 16.
   Esta regra cobria card / questão / explicação e PARAVA na porta do rádio:
   era por isso que não havia como copiar o que alguém escreveu no canal, nem
   no Mac. Camada A das três do mockup (aba 1) — uma linha, e resolve sozinha
   no Mac. As camadas B (barra no hover) e C (toque longo) vivem no
   `kit-components.jsx`, no componente `RadioBordo`. */
.card, .card-padded, .modal-body,
.question-card, .question, .alt, .alt-text, .explanation,
.rp-radio-bal {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* [CANAL16PACOTE 12/ago/2026 · F1] O toque longo do iPad tem inimigo próprio:
   segurar o dedo sobre texto no WebKit dispara o menu nativo de seleção
   (“Copiar / Consultar”), que rouba o gesto antes dos 400 ms. Desligar o
   callout NÃO desliga a seleção — são duas coisas, e a de cima continua de pé.
   Só sob `html[data-toque]`: no Mac o callout não existe e o menu nativo do
   botão direito não deve ser mexido. Ver a regra do `data-toque` no CLAUDE.md
   (comportamento é `data-toque`, largura é `@media`). */
html[data-toque] .rp-radio-bal {
  -webkit-touch-callout: none;
}

/* ── Button primitives ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px;
  border: none; cursor: pointer;
  transition: background 120ms, transform 80ms, box-shadow 120ms;
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  /* [PALETA_OURO_ESCURO_APLICAR 19/ago/2026] o rotulo NAO pode ser #fff cravado:
     --primary-600 e' dourado nos 7 modos escuros e branco sobre ouro da 1,81:1.
     --on-primary ja' e' tinta escura no escuro (ds/colors_and_type.css:1136 e os
     3 modos de arquivo proprio) e #fff no claro. O padrao ja' existia certo no
     .btn-gold da linha 210. */
  background: var(--primary-600); color: var(--on-primary, #fff);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-700); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-secondary {
  background: var(--surface); color: var(--ink-800);
  border: 1px solid var(--ink-200);
}
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-300); }
.btn-ghost {
  background: transparent; color: var(--primary-600); padding: 7px 12px;
}
.btn-ghost:hover { background: var(--primary-50); }
.btn-danger {
  background: var(--danger-50); color: var(--danger-700);
  border: 1px solid var(--danger-100);
}
.btn-danger:hover { background: var(--danger-100); }
.btn-gold {
  background: var(--gold-500); color: var(--primary-900);
  font-weight: 700;
}
.btn-gold:hover { background: var(--gold-600); color: var(--on-primary, #fff); }

/* Solid-red "Iniciar caderno" CTA — high-emphasis commit action */
.btn-start {
  background: var(--danger); color: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.btn-start:hover { background: var(--danger-700); }
.btn-start:active { transform: translateY(1px); box-shadow: none; }
.btn-lg {
  padding: 12px 22px; font-size: 15px;
}
.btn-icon {
  background: transparent; color: var(--ink-500);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
}
.btn-icon:hover { background: var(--ink-50); color: var(--ink-800); }

/* ── Form ────────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--ink-700);
}
.field .hint { font-size: 11px; color: var(--ink-500); }
.input, .select, .textarea {
  padding: 9px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: var(--ring);
}
.textarea { resize: vertical; min-height: 64px; }

/* ── Tag / pill ──────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.tag-module    { background: var(--primary-100); color: var(--primary-700); text-transform: uppercase; }
.tag-source    { background: var(--ink-100); color: var(--ink-700); font-weight: 600; letter-spacing: 0; }
.tag-original  { background: var(--gold-100); color: var(--gold-700); font-weight: 600; letter-spacing: 0; }
.tag-type      { background: var(--surface); color: var(--ink-700); border: 1px solid var(--ink-200); font-weight: 600; letter-spacing: 0; }
.tag-facil     { background: var(--success-100); color: var(--success-700); font-weight: 600; letter-spacing: 0; }
.tag-media     { background: var(--warning-100); color: var(--warning-700); font-weight: 600; letter-spacing: 0; }
.tag-dificil   { background: var(--danger-100); color: var(--danger-700); font-weight: 600; letter-spacing: 0; }
.tag-ruim      { background: var(--danger-100); color: var(--danger-700); font-weight: 600; letter-spacing: 0; }
.tag-pert-media{ background: var(--warning-100); color: var(--warning-700); font-weight: 600; letter-spacing: 0; }
.tag-boi       { background: var(--success-100); color: var(--success-700); font-weight: 600; letter-spacing: 0; }
.tag-muito-boi { background: var(--success-600); color: #fff; font-weight: 700; letter-spacing: 0; }

/* ── Checkbox / radio (custom) ───────────────────────────────────────────── */

.check-row, .radio-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-700);
}
.check-row input, .radio-row input { accent-color: var(--primary-600); }

.sidebar-dark .check-row, .sidebar-dark .radio-row {
  color: rgba(255,255,255,0.85);
}

/* ── Listbox (for dual selector) ─────────────────────────────────────────── */

.listbox {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  padding: 4px;
  height: 130px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.listbox.light {
  background: var(--surface-sunken);
  border: 1px solid var(--ink-200);
}
.listbox-item {
  padding: 5px 8px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.listbox.light .listbox-item { color: var(--ink-800); }
.listbox-item:hover { background: rgba(255,255,255,0.06); }
.listbox.light .listbox-item:hover { background: var(--ink-50); }
.listbox-item.active { background: var(--primary-600); color: var(--on-primary, #fff); }

.listbox.selected { border-color: var(--gold-500); background: rgba(255,255,255,0.1); }

/* ── Tree (for editor) ───────────────────────────────────────────────────── */

.tree { display: flex; flex-direction: column; }
.tree-node {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
}
.tree-node:hover { background: rgba(255,255,255,0.06); }
.tree-node.active { background: rgba(255,255,255,0.12); color: #fff; font-weight: 600; }
.tree-node .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px; color: rgba(255,255,255,0.55);
}
.tree-children { padding-left: 16px; }

/* ── Question card layout ────────────────────────────────────────────────── */

.question-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 16px;
  border-left: 3px solid transparent;
  transition: border-color 150ms;
}

/* [PM_CANTODECLUTTER_08AGO] tipo + estado de revisão saíram do topo do cartão
   (Tag "type" + selo verificada/em_avaliacao/revisar) e foram pro FIM da linha
   do caminho. Regra: repouso é silêncio — "em avaliação" e o tipo da questão
   quase não existem na tela; só "revisar" pesa, porque é o único que pede algo
   de quem está lendo. Mockup aprovado pelo Kadu: Opus "Variação A + escalada
   da C". `:focus-within` entra ao lado de `:hover` pra não trancar quem navega
   por teclado/leitor de tela fora do hover do mouse. */

.pm-tipo-discreto {
  font-size: 11px; color: var(--ink-400); white-space: nowrap;
  letter-spacing: 0.02em; cursor: default;
  opacity: 0; transition: opacity 150ms;
}
.question-card:hover .pm-tipo-discreto,
.question-card:focus-within .pm-tipo-discreto { opacity: 1; }

.pm-rev-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-600); flex: none; cursor: default;
}

.pm-rev-neutro {
  font-size: 11px; color: var(--ink-400); white-space: nowrap; cursor: default;
  opacity: 0; transition: opacity 150ms;
}
.question-card:hover .pm-rev-neutro,
.question-card:focus-within .pm-rev-neutro { opacity: 1; }

.pm-rev-alerta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; white-space: nowrap; cursor: default;
  color: var(--warning-700); background: var(--warning-50);
  border: 1px solid var(--warning-100); border-radius: var(--r-pill);
  padding: 2px 9px;
}

.question-card.pm-alerta-borda { border-left-color: var(--warning-700); }

.pm-faixa-alerta {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-md, 8px);
  background: var(--warning-50); color: var(--warning-700);
  font-size: 12px; line-height: 1.4;
}

/* ── Alternativa row ─────────────────────────────────────────────────────── */

.alt {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--ink-100);
  background: var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.alt:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}
.alt.selected {
  border: 2px solid var(--primary-600);
  background: var(--primary-50);
  padding: 11px 15px;
}
.alt.correct {
  border: 2px solid var(--success-600);
  background: var(--success-50);
  padding: 11px 15px;
}
.alt.wrong {
  border: 2px solid var(--danger-600);
  background: var(--danger-50);
  padding: 11px 15px;
}
.alt-letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-200);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: var(--ink-600);
  flex-shrink: 0;
}
.alt:hover .alt-letter { border-color: var(--primary-300); color: var(--primary-700); }
.alt.selected .alt-letter { background: var(--primary-600); color: var(--on-primary, #fff); border-color: var(--primary-600); }
.alt.correct .alt-letter { background: var(--success-600); color: #fff; border-color: var(--success-600); }
.alt.wrong .alt-letter { background: var(--danger-600); color: #fff; border-color: var(--danger-600); }
.alt-text {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-800);
  white-space: pre-wrap;
}
.alt-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-sm);
  flex-shrink: 0;
}

/* ── Stat card ───────────────────────────────────────────────────────────── */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-card.dark { background: var(--primary-900); color: #fff; border: none; }
.stat-card .stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-500); text-transform: uppercase;
}
.stat-card.dark .stat-label { color: var(--gold-300); }
.stat-card .stat-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-top: 4px; color: var(--ink-900);
}
.stat-card.dark .stat-value { color: #fff; }
.stat-card .stat-sub {
  font-size: 11px; color: var(--ink-500); margin-top: 2px;
}
.stat-card.dark .stat-sub { color: rgba(255,255,255,0.7); }

/* ── Progress bar (simple) ───────────────────────────────────────────────── */

.progress {
  height: 6px;
  background: var(--ink-50);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress > div { height: 100%; background: var(--primary-600); }
.progress.success > div { background: var(--success-600); }
.progress.warning > div { background: var(--warning-600); }
.progress.danger > div  { background: var(--danger-600); }

/* ── Banner ──────────────────────────────────────────────────────────────── */

.banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
}
.banner-success { background: var(--success-50); border: 1px solid var(--success-100); color: var(--success-700); }
.banner-danger  { background: var(--danger-50); border: 1px solid var(--danger-100); color: var(--danger-700); }
.banner-icon-wrap {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}

/* ── Modal / dialog scrim ────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0;
  background: rgba(14, 27, 44, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
  background: var(--primary-900); color: #fff;
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer {
  border-top: 1px solid var(--ink-100);
  padding: 14px 22px;
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ── Misc helpers ───────────────────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.flex-1 { flex: 1; }
.muted-text { color: var(--ink-500); }
.subtle-text { color: var(--ink-400); }
.mono { font-family: var(--font-mono); }

.divider-h { height: 1px; background: var(--ink-100); }
.divider-paper { height: 1px; background: var(--paper-rule); }

.scroll-hide::-webkit-scrollbar { width: 6px; }
.scroll-hide::-webkit-scrollbar-track { background: transparent; }
.scroll-hide::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; }

/* ── Right-answer pulse / wrong shake ───────────────────────────────────── */

@keyframes correct-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.pulse-correct { animation: correct-pulse 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.shake-wrong { animation: wrong-shake 220ms ease-in-out 2; }

/* ── Profile list row (login) ───────────────────────────────────────────── */

.profile-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--ink-100);
  background: var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 120ms;
}
.profile-row:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  box-shadow: var(--shadow-sm);
}
.profile-row.selected {
  border: 2px solid var(--primary-600);
  background: var(--primary-50);
  padding: 11px 15px;
}