/* =====================================================================
   pin-editor.css — o alfinete (js/lib/pin-editor.js)

   Modal de resumo curto por tópico. O quadro é escuro (nv-*); a FOLHA de
   escrita troca entre escuro/sépia/branco, igual ao Notebook — quem lê
   muito tempo escolhe o fundo, e essa escolha vale aqui também.

   Cuidado ao mexer: a regra de tinta do realce (mais abaixo) tem uma
   ordem de precedência deliberada. Ver o comentário lá.
   ===================================================================== */

.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pin-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.08 0.01 250 / 0.78);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.pin {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: 86vh;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px oklch(0 0 0 / 0.7);
  overflow: hidden;
  font-family: var(--font-sans);
}

/* ---------- cabeçalho ---------- */
.pin-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.pin-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: oklch(0.8 0.13 75 / 0.13);
  border: 1px solid oklch(0.8 0.13 75 / 0.3);
  color: oklch(0.82 0.13 75);
}
.pin-id { flex: 1; min-width: 0; }
.pin-rot {
  display: block;
  margin-bottom: 5px;
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: oklch(0.82 0.13 75);
}
.pin-tit {
  margin: 0;
  font: 600 14.5px/1.35 var(--font-sans);
  color: var(--text-1);
}
.pin-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-x {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-4);
  font-size: 14px;
  cursor: pointer;
}
.pin-x:hover { background: var(--bg-3); color: var(--text-1); }

/* ---------- barra de formatação ---------- */
.pin-barra {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.pin-barra button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  font: 500 12.5px/1 var(--font-sans);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pin-barra button:hover { background: var(--bg-3); color: var(--text-1); }
.pin-barra button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.pin-it { font-family: Georgia, serif; }
.pin-aa { font-size: 12px; }
.pin-sep {
  width: 1px;
  height: 16px;
  margin: 0 5px;
  background: var(--border-soft);
}
/* botão de cor: ícone em cima, faixa da última cor embaixo */
.pin-cbtn { flex-direction: column; gap: 2px; padding: 0 6px !important; }
.pin-cbar {
  display: block;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
}
.pin-ia {
  margin-left: auto;
  gap: 6px;
  padding: 0 9px !important;
  color: var(--text-4) !important;
  font-size: 11.5px !important;
}
.pin-ia:hover {
  color: var(--accent-strong) !important;
  background: var(--accent-soft) !important;
}

/* ---------- a folha ---------- */
.pin-corpo {
  flex: 1;
  min-height: 240px;
  padding: 16px 18px;
  overflow-y: auto;
  transition: background 200ms ease;
}
.pin[data-surface="dark"] .pin-corpo {
  background: oklch(0.185 0.008 250);
  --pin-tinta: oklch(0.90 0.006 250);
  --pin-forte: #fff;
  --pin-linha: oklch(0.35 0.012 250);
}
.pin[data-surface="sepia"] .pin-corpo {
  background: #f4ecd8;
  --pin-tinta: #4a4034;
  --pin-forte: #2b241a;
  --pin-linha: #d6c9ab;
}
.pin[data-surface="white"] .pin-corpo {
  background: #fdfdfd;
  --pin-tinta: #24272c;
  --pin-forte: #0f1216;
  --pin-linha: #dfe3e8;
}
.pin-editor {
  min-height: 100%;
  outline: none;
  color: var(--pin-tinta);
  font: 400 15px/1.65 var(--font-sans);
}
.pin[data-font="serif"] .pin-editor {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
.pin-editor:empty::before {
  content: "Destile este tópico em poucas linhas: o que a banca cobra, a pegadinha, o que você sempre esquece.";
  color: var(--text-4);
}
.pin-editor > :first-child { margin-top: 0; }
.pin-editor > :last-child { margin-bottom: 0; }
.pin-editor p { margin: 0 0 0.75em; }
.pin-editor ul, .pin-editor ol { margin: 0 0 0.75em; padding-left: 1.4em; }
.pin-editor li { margin-bottom: 0.3em; }
.pin-editor strong, .pin-editor b { color: var(--pin-forte); font-weight: 700; }
.pin-editor h1, .pin-editor h2, .pin-editor h3 {
  margin: 0 0 0.5em;
  color: var(--pin-forte);
  font: 600 1.08em/1.3 var(--font-sans);
}
.pin-editor hr { border: 0; border-top: 1px solid var(--pin-linha);
  width: 52px; margin: 1em 0; }
.pin-editor blockquote {
  margin: 0 0 0.75em;
  padding-left: 0.9em;
  border-left: 2px solid var(--pin-linha);
  color: var(--pin-tinta);
  opacity: 0.85;
}
.pin-editor mark {
  background: rgba(250, 204, 21, 0.28);
  border-radius: 3px;
  padding: 0.1em 0.12em;
}

/* Realce claro pede tinta escura, senão o texto realçado some na folha
   branca. Mas isso é só o PADRÃO — se o aluno escolheu a cor da letra, ela
   manda. Daí a segunda regra ser mais específica DE PROPÓSITO: o navegador
   aninha o realce DENTRO do span colorido, e o de dentro não tem cor
   própria pra vencer sozinho. Mexer na ordem/especificidade daqui quebra
   um dos dois casos. */
.pin[data-surface="sepia"] .pin-editor :is(mark, .pin-hl),
.pin[data-surface="white"] .pin-editor :is(mark, .pin-hl) { color: var(--pin-forte); }
.pin[data-surface] .pin-editor .pin-tx :is(mark, .pin-hl) { color: inherit; }

/* ---------- rodapé de medida ---------- */
.pin-pe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-1);
}
.pin-medidor {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--bg-3);
  overflow: hidden;
}
.pin-medidor i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  display: block;
  border-radius: 3px;
  background: var(--accent);
  transition: width 160ms ease;
}
.pin-medidor i.pin-cheio { background: oklch(0.68 0.19 25); }
.pin-conta {
  font: 500 11px/1 var(--font-mono);
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.pin-conta b { color: var(--text-2); font-weight: 600; }
.pin-conta b.pin-estourou { color: oklch(0.72 0.19 25); }
.pin-status { font: 500 11px/1 var(--font-sans); color: var(--text-3); min-width: 62px; }

/* ---------- ações ---------- */
.pin-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-2);
}
.pin-espaco { flex: 1; }
.pin-dica { margin-right: 4px; font-size: 10.5px; color: var(--text-4); }

/* ---------- popovers (aparência e cores) ---------- */
.pin-pop {
  position: absolute;
  z-index: 20;
  display: none;
  padding: 12px;
  border-radius: 13px;
  background: oklch(0.21 0.009 250 / 0.98);
  border: 1px solid oklch(0.38 0.012 250 / 0.55);
  box-shadow: 0 16px 40px -10px oklch(0 0 0 / 0.75);
}
.pin-pop.on { display: block; }
.pin-pop--aa { min-width: 216px; }
.pin-pop--cor { width: 240px; }
.pin-pop-t {
  margin: 0 0 8px;
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pin-pop-t + .pin-pop-linha { margin-bottom: 14px; }
.pin-pop-linha { display: flex; gap: 6px; }
.pin-op {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--bg-3);
  color: var(--text-2);
  font: 500 11.5px/1 var(--font-sans);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.pin-op:hover { color: var(--text-1); }
.pin-op[aria-pressed="true"] { border-color: var(--accent); color: var(--text-1); }
.pin-op i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16);
}
.pin-pop-pe {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid oklch(0.42 0.012 250 / 0.4);
  font: 400 10.5px/1.45 var(--font-sans);
  color: var(--text-4);
}
.pin-grade { display: grid; grid-template-columns: repeat(7, 26px); gap: 6px; }
/* A amostra fica sobre PAPEL claro: cor translúcida composta contra o fundo
   escuro do popover sairia marrom, e o aluno escolheria uma coisa e veria
   outra na folha. */
.pin-sw {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #efefef;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
  transition: transform 120ms ease;
}
.pin-sw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sw, transparent);
}
.pin-sw:hover { transform: scale(1.12); }
.pin-sw[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14), 0 0 0 2px var(--accent);
}
.pin-sw--nada { background: var(--bg-3); }
.pin-sw--nada::before { background: none; }
.pin-sw--nada::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 12px;
  height: 1.5px;
  background: oklch(0.62 0.012 250);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .pin-corpo, .pin-medidor i, .pin-sw, .pin-barra button, .pin-op { transition: none; }
  .pin-sw:hover { transform: none; }
}

/* menu de prompts (quando o tópico oferece mais de um pedido à IA) */
.pin-pop--ia { min-width: 236px; }
.pin-menu { display: flex; flex-direction: column; gap: 4px; }
.pin-mi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--bg-3);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.pin-mi:hover { border-color: var(--accent); }
.pin-mi-t { font: 500 12.5px/1.2 var(--font-sans); color: var(--text-1); }
.pin-mi-n { font: 400 10.5px/1.3 var(--font-sans); color: var(--text-4); }