/* Componentes de campo (docs/arquitetura.md §6).
   Regra: o visual some dentro da página do planner — sem bordas além da pauta, sem fundo,
   fonte de escrita herdada dos tokens. Unidade: 1px CSS = 1pt da folha.
   Tokens consumidos (com padrão aqui; os temas sobrescrevem):
     --pauta-cor, --pauta-esp        linha de escrita (borda inferior)
     --grade-cor, --grade-esp        linhas de tabelas e grades
     --fonte-escrita, --escrita-cor, --escrita-corpo   texto digitado
     --fonte-rotulo, --rotulo-cor, --rotulo-corpo      rótulos impressos (cabeçalhos)
     --marca-cor                     marcas (toggle, escala-estrelas, pontos, células)
     --selecao-cor                   contorno do ícone selecionado
     --passo                         altura de linha das áreas pautadas
     --pixel-cor-1..6                paleta do "Ano em Pixel"
*/

linha-texto, area-texto, caixa-marca, seletor-icones, escala-estrelas, escala-pontos, escala-icones,
tabela-celulas, grade-habitos, grade-pixel, rastreador-sono, roda-da-vida, mini-calendario,
grade-mensal, quadro-livre {
  box-sizing: border-box;
  color: var(--escrita-cor, #333);
}
:is(linha-texto, area-texto, tabela-celulas, grade-habitos, grade-pixel, grade-mensal, quadro-livre) *,
:is(linha-texto, area-texto, tabela-celulas, grade-habitos, grade-pixel, grade-mensal, quadro-livre) *::before,
:is(linha-texto, area-texto, tabela-celulas, grade-habitos, grade-pixel, grade-mensal, quadro-livre) *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- entradas de texto */
linha-texto input,
area-texto textarea,
quadro-livre .item-texto textarea {
  all: unset;
  display: block;
  width: 100%;
  font-family: var(--fonte-escrita, 'Caviar Dreams', 'Lato', sans-serif);
  font-size: var(--escrita-corpo, 9px);
  color: var(--escrita-cor, #333);
  caret-color: currentColor;
  white-space: pre-wrap;
}
linha-texto input:focus-visible,
area-texto textarea:focus-visible,
quadro-livre .item-texto textarea:focus-visible { outline: none; }

linha-texto {
  display: block;
  border-bottom: var(--pauta-esp, 0.5px) solid var(--pauta-cor, #8f8f8f);
  min-height: 1em;
}
linha-texto input { height: 100%; min-height: 1.4em; padding: 0 1px; white-space: nowrap; }
linha-texto:focus-within { background: var(--foco-fundo, rgba(0, 0, 0, 0.025)); }

area-texto {
  --passo: 17px;
  display: block;
  position: relative;
  min-height: var(--passo);
}
area-texto textarea {
  height: 100%;
  min-height: inherit;
  resize: none;
  overflow: hidden auto;
  line-height: var(--passo);
  padding: 0 2px;
  scrollbar-width: none;
}
area-texto textarea::-webkit-scrollbar { display: none; }
area-texto[fundo="pautado"] {
  background-image: linear-gradient(to top, var(--pauta-cor, #8f8f8f) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px));
  background-size: 100% var(--passo);
  background-position: 0 0;
}
area-texto[fundo="pontilhado"] {
  background-image: radial-gradient(circle at center, var(--pauta-cor, #8f8f8f) 0.7px, transparent 0.9px);
  background-size: var(--passo) var(--passo);
  background-position: calc(var(--passo) / -2) calc(var(--passo) / -2);
}
area-texto[fundo="quadriculado"] {
  background-image:
    linear-gradient(to right, var(--pauta-cor, #b5b5b5) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px)),
    linear-gradient(to bottom, var(--pauta-cor, #b5b5b5) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px));
  background-size: var(--passo) var(--passo);
}
area-texto:focus-within { background-color: var(--foco-fundo, rgba(0, 0, 0, 0.02)); }

/* ---------------------------------------------------------------- botões neutros */
caixa-marca button,
escala-estrelas button, escala-pontos button, escala-icones button,
seletor-icones [data-valor],
grade-pixel .paleta button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
:is(caixa-marca, escala-estrelas, escala-pontos, escala-icones, seletor-icones) :focus-visible {
  outline: 1px dotted var(--selecao-cor, #555);
  outline-offset: 1px;
}

/* formas SVG: contorno; marcada = preenchida */
svg.forma { width: 100%; height: 100%; overflow: visible; }
svg.forma :is(circle, rect, path) {
  fill: transparent;
  stroke: var(--marca-cor, #222);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

caixa-marca { display: inline-block; width: 9px; height: 9px; vertical-align: middle; }
caixa-marca button { width: 100%; height: 100%; }
caixa-marca[marcado] svg.forma :is(circle, rect, path) { fill: var(--marca-cor, #222); }

escala-estrelas, escala-pontos, escala-icones {
  display: inline-flex;
  gap: var(--escala-espaco, 3px);
  height: var(--escala-altura, 10px);
  align-items: center;
  vertical-align: middle;
}
:is(escala-estrelas, escala-pontos, escala-icones) button { height: 100%; aspect-ratio: 1; }
escala-estrelas button.cheio svg.forma path,
escala-pontos button.cheio svg.forma circle { fill: var(--marca-cor, #222); }
escala-pontos text.numero {
  font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif);
  font-size: 12px;
  fill: var(--marca-cor, #222);
}
escala-pontos button.cheio text.numero { fill: var(--folha-fundo, #fff); }
escala-icones button { opacity: 0.28; transition: opacity 0.1s; }
escala-icones button.cheio { opacity: 1; }
escala-icones svg.forma.icone-ampulheta path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
escala-icones button.cheio svg.forma:not(.icone-ampulheta) :is(path, circle, rect) { fill: var(--marca-cor, #222); }
escala-icones img { height: 100%; width: auto; pointer-events: none; }

/* seletor de ícones: seleção por contorno */
seletor-icones { display: flex; align-items: center; justify-content: space-between; }
seletor-icones [data-valor] {
  border-radius: 50%;
  padding: 1px;
  outline: var(--selecao-esp, 1px) solid transparent;
  outline-offset: 1px;
}
seletor-icones [data-valor] img { pointer-events: none; max-height: 100%; }
seletor-icones [data-valor].selecionado { outline-color: var(--selecao-cor, #555); }

/* ---------------------------------------------------------------- tabelas e grades */
tabela-celulas, grade-habitos, grade-pixel, mini-calendario, grade-mensal { display: block; }
tabela-celulas table, grade-habitos table, grade-pixel table, grade-mensal table, mini-calendario table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
tabela-celulas :is(th, td), grade-habitos :is(th, td), grade-pixel td, grade-mensal td {
  /* Chromium arredonda a borda fracionária para 1px CSS. A tinta proporcional
     conserva o peso óptico do fio (25% para 0,25pt; 50% para 0,5pt). */
  border: var(--grade-esp, 0.5px) solid color-mix(in srgb, var(--grade-cor, #555) var(--grade-tinta, 50%), transparent);
  padding: 0;
}
:is(tabela-celulas, grade-habitos, grade-pixel, grade-mensal, mini-calendario) th {
  font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif);
  font-size: var(--rotulo-corpo, 6px);
  font-weight: normal;
  color: var(--rotulo-cor, #555);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
tabela-celulas th.rotulo-linha { text-align: left; padding: 0 3px; }
tabela-celulas td linha-texto { border-bottom: 0; height: 100%; }
tabela-celulas td linha-texto input { padding: 0 2px; }
tabela-celulas tbody tr { height: var(--celula-altura, 15px); }

grade-habitos thead th, grade-pixel thead th { border: 0; padding-bottom: 1px; }
grade-habitos th.titulo { text-align: left; font-size: var(--rotulo-corpo-titulo, 8px); }
grade-habitos tbody tr { height: var(--celula-altura, 20px); }
grade-habitos th.rotulo { text-align: left; }
grade-habitos th.rotulo linha-texto { border-bottom: 0; height: 100%; }
grade-habitos col.col-rotulo { width: var(--rotulo-largura, 26%); }
grade-habitos td[data-chave], grade-pixel td[data-chave] { cursor: pointer; touch-action: none; user-select: none; }
grade-habitos td.marcada { background: var(--marca-cor, #222); background-clip: padding-box; }
grade-habitos td:focus-visible, grade-pixel td:focus-visible { outline: 1px dotted var(--selecao-cor, #555); outline-offset: -2px; }

grade-pixel { --pixel-padrao-6: #8c8c8c; }
grade-pixel tbody tr { height: var(--celula-altura, 16.8px); }
grade-pixel tbody th { text-align: right; padding-right: 3px; border: 0; width: var(--rotulo-largura, 70px); }
grade-pixel thead th:first-child { width: var(--rotulo-largura, 70px); }
grade-pixel td.inexistente { cursor: default; background: var(--pixel-inexistente, repeating-linear-gradient(135deg, transparent 0 2px, rgba(0,0,0,.12) 2px 2.6px)); }
grade-pixel .paleta { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 3px; }
grade-pixel .paleta button {
  width: var(--paleta-tam, 9px);
  height: var(--paleta-tam, 9px);
  border-radius: 50%;
  outline: 0.5px solid rgba(0, 0, 0, 0.25);
}
grade-pixel .paleta button.ativa { outline: 1px solid var(--selecao-cor, #222); outline-offset: 1px; }

/* ---------------------------------------------------------------- calendários */
mini-calendario { font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif); font-size: var(--mini-corpo, 6px); }
mini-calendario caption { font-size: 1.3em; color: var(--rotulo-cor, #555); padding-bottom: 1px; }
mini-calendario td { text-align: center; padding: 0.5px 0; height: 1.5em; color: var(--rotulo-cor, #555); }
mini-calendario[modo="vazio"] td { border: var(--grade-esp, 0.5px) solid var(--grade-cor, #bbb); }
mini-calendario a { color: inherit; text-decoration: none; }
mini-calendario a:hover, mini-calendario a:focus-visible { text-decoration: underline; outline: none; }

grade-mensal thead th { border: 0; background: var(--grade-cabecalho-fundo, transparent); color: var(--grade-cabecalho-cor, var(--rotulo-cor, #555)); font-size: var(--rotulo-corpo, 8px); }
grade-mensal tbody tr { height: var(--celula-altura, 80px); }
grade-mensal td { position: relative; vertical-align: top; }
grade-mensal .numero {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif);
  font-size: var(--numero-corpo, 6px);
  color: var(--rotulo-cor, #555);
  text-decoration: none;
  z-index: 1;
}
grade-mensal td.fora .numero { opacity: 0.4; }
grade-mensal a.numero:hover, grade-mensal a.numero:focus-visible { text-decoration: underline; outline: none; }
grade-mensal area-texto { position: absolute; inset: 9px 1px 1px 1px; --passo: 9px; }
grade-mensal area-texto textarea { font-size: var(--celula-corpo, 6.5px); }

/* ---------------------------------------------------------------- rastreador do sono */
rastreador-sono { display: block; }
rastreador-sono svg { display: block; overflow: visible; touch-action: none; cursor: pointer; outline: none; }
rastreador-sono .numero { font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif); font-size: 8px; fill: var(--rotulo-cor, #333); }
rastreador-sono .guia { stroke: var(--sono-guia, rgba(0, 0, 0, 0.12)); stroke-width: 0.5; stroke-dasharray: 1 2; }
rastreador-sono .haste { stroke: var(--sono-linha, #111); stroke-width: 1; }
rastreador-sono .estrela { fill: var(--sono-estrela, #111); opacity: 0; }
rastreador-sono .dia.marcado .estrela { opacity: 1; }
rastreador-sono .dia:not(.marcado) .haste { opacity: 0; }
rastreador-sono .foco { fill: var(--foco-fundo, rgba(0, 0, 0, 0.04)); opacity: 0; }
rastreador-sono .foco.visivel { opacity: 1; }

/* ---------------------------------------------------------------- roda da vida */
roda-da-vida { display: block; }
roda-da-vida svg { display: block; overflow: visible; outline: none; }
roda-da-vida .celula {
  fill: var(--roda-vazia, transparent);
  stroke: var(--roda-linha, #9a9a9a);
  stroke-width: 0.6;
  cursor: pointer;
}
roda-da-vida .segmento.par .celula { fill: var(--roda-vazia-par, rgba(0, 0, 0, 0.035)); }
roda-da-vida .celula.cheia { fill: var(--roda-cheia, #7d7d7d); }
roda-da-vida .segmento.par .celula.cheia { fill: var(--roda-cheia-par, #6a6a6a); }
roda-da-vida .celula:hover { stroke: var(--roda-linha-foco, #333); }
roda-da-vida .faixa-rotulo { fill: var(--roda-rotulo-fundo, #a9a9a9); stroke: var(--roda-rotulo-linha, #fff); stroke-width: 1; }
roda-da-vida .segmento.par .faixa-rotulo { fill: var(--roda-rotulo-fundo-par, #bdbdbd); }
roda-da-vida .rotulo { font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif); fill: var(--roda-rotulo-cor, #333); pointer-events: none; }
roda-da-vida .centro { fill: var(--roda-centro, #2b2b2b); stroke: var(--roda-centro-borda, #ddd); stroke-width: 2; }
roda-da-vida .foco { fill: none; stroke: var(--selecao-cor, #222); stroke-width: 1.2; stroke-dasharray: 3 2; opacity: 0; pointer-events: none; }
roda-da-vida .foco.visivel { opacity: 1; }

/* ---------------------------------------------------------------- quadro livre */
quadro-livre {
  display: block;
  position: relative;
  outline: none;
  --passo: 17px;
}
quadro-livre[fundo="pautado"] { background-image: linear-gradient(to top, var(--pauta-cor, #8f8f8f) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px)); background-size: 100% var(--passo); }
quadro-livre[fundo="pontilhado"] { background-image: radial-gradient(circle at center, var(--pauta-cor, #8f8f8f) 0.7px, transparent 0.9px); background-size: var(--passo) var(--passo); }
quadro-livre[fundo="quadriculado"] {
  background-image:
    linear-gradient(to right, var(--pauta-cor, #b5b5b5) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px)),
    linear-gradient(to bottom, var(--pauta-cor, #b5b5b5) var(--pauta-esp, 0.5px), transparent var(--pauta-esp, 0.5px));
  background-size: var(--passo) var(--passo);
}
quadro-livre .camada { position: absolute; inset: 0; overflow: hidden; }
quadro-livre .item { position: absolute; touch-action: none; outline: none; }
quadro-livre .item img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
quadro-livre .item-imagem, quadro-livre .item-sticker { cursor: grab; }
quadro-livre .item.movendo { cursor: grabbing; }
quadro-livre .item img.ausente { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, 0.08) 4px 5px); }
quadro-livre .item-texto textarea { height: 100%; resize: none; overflow: hidden; line-height: 1.35; padding: 1px 2px; }
quadro-livre .item .alca {
  position: absolute; left: 0; right: 14px; top: -6px; height: 6px;
  cursor: move; opacity: 0;
  background: radial-gradient(circle, var(--quadro-controle, #777) 0.6px, transparent 0.8px) 0 0 / 3px 3px;
}
quadro-livre .item .remover {
  all: unset;
  position: absolute; top: -7px; right: -7px;
  width: 11px; height: 11px; border-radius: 50%;
  font: 9px/11px sans-serif; text-align: center;
  background: var(--quadro-controle, #777); color: #fff;
  cursor: pointer; opacity: 0;
}
quadro-livre .item .redimensionar {
  position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px;
  border-right: 1.2px solid var(--quadro-controle, #777);
  border-bottom: 1.2px solid var(--quadro-controle, #777);
  cursor: nwse-resize; opacity: 0;
}
quadro-livre .item:is(:hover, :focus-within, .movendo, .redimensionando) { box-shadow: 0 0 0 0.6px var(--quadro-controle, #999); }
quadro-livre .item:is(:hover, :focus-within, .movendo, .redimensionando) :is(.alca, .remover, .redimensionar) { opacity: 1; }
quadro-livre .ferramentas {
  position: absolute; right: 2px; bottom: 2px;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity 0.12s;
  z-index: 2;
}
quadro-livre:is(:hover, :focus-within) .ferramentas { opacity: 1; }
quadro-livre .ferramentas button {
  all: unset;
  font-family: var(--fonte-rotulo, 'Caviar Dreams', sans-serif);
  font-size: 7px; line-height: 1;
  padding: 2px 4px;
  color: var(--quadro-controle, #666);
  border: 0.5px solid currentColor; border-radius: 6px;
  background: var(--folha-fundo, #fff);
  cursor: pointer;
}
quadro-livre .ferramentas button:focus-visible { outline: 1px dotted currentColor; }

@media print {
  quadro-livre .ferramentas, quadro-livre .item :is(.alca, .remover, .redimensionar), grade-pixel .paleta { display: none !important; }
}