/* =========================================================
   Portfólio Juan Rocha — versão 2: "a planilha que vira site"
   Página clara construída com o vocabulário de uma planilha:
   barra de fórmulas, letras de coluna, números de linha,
   célula selecionada, tabelas e abas de planilha como menu.

   1. Tokens   2. Base   3. Barra do app   4. Planilha do início
   5. Blocos   6. Tabela de projetos   7. Checklist
   8. Folha de ponto   9. Contato e rodapé   10. Abas (menu)
   11. Animação de entrada   12. Celular
   ========================================================= */

/* ---------- 1. TOKENS ----------
   As cores e fontes vêm de ../../css/tokens.css (marca JR Dev).
   A classe "tema-planilha" no <html> ativa a paleta clara da marca.
   Aqui só damos apelidos com cara de planilha para essas variáveis. */
:root {
  /* cores */
  --paper: var(--fundo);        /* fundo, como a folha da planilha */
  --grid: var(--linha);         /* linhas de grade */
  --head: var(--superficie);    /* cabeçalhos de linha/coluna */
  --ink: var(--texto);          /* texto principal */
  --ink-soft: var(--texto-suave); /* texto secundário */
  --select: var(--menta);       /* seleção de célula, links, botão principal */
  --select-dark: color-mix(in srgb, var(--menta) 80%, var(--texto)); /* hover do botão */
  --marker: var(--marca-texto); /* marca-texto: o que está acontecendo agora */

  /* fundos das situações dos projetos (como formatação condicional) */
  --st-done-bg: var(--menta-fundo);   --st-done-ink: var(--menta);
  --st-build-bg: var(--marca-texto);  --st-build-ink: var(--texto);
  --st-idea-bg: var(--superficie);    --st-idea-ink: var(--texto-suave);
  /* "pessoal" mantém a cor de antes: única cor de apoio fora da marca */
  --st-own-bg: #EDE7F6;    --st-own-ink: #4A3A73;

  /* tipografia da marca */
  --font: var(--font-sans);
  --fs-small: 0.875rem;  /* 14px */
  --fs-body: 1.0625rem;  /* 17px */
  --fs-lead: 1.3125rem;  /* 21px */
  --fs-h3: 1.1875rem;    /* 19px */
  --fs-h2: clamp(1.75rem, 3.6vw, 2.625rem);
  --fs-h1: clamp(2.75rem, 7.5vw, 5.75rem);

  /* layout */
  --wrap: 1180px;
  --pad: 24px;
  --gutter: 44px;        /* largura da coluna dos números de linha */
  --tabs-h: 52px;        /* altura das abas fixas embaixo */

  color-scheme: light;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  padding-bottom: var(--tabs-h);     /* espaço para as abas fixas */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

/* Títulos: Space Grotesk 600 (fonte de destaque da marca) */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
}
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Números alinhados, como na planilha — só onde há números.
   (No texto corrido isso alargaria vírgulas e pontos.) */
.name-box, .col-heads, .hero-cells > *::before, .timesheet .period {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--select);
  text-underline-offset: 3px;
  touch-action: manipulation;
}

/* Foco do teclado = célula selecionada */
:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* Botões: cantos retos, como células */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border: 2px solid var(--select);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--select); color: var(--sobre-menta); }
.btn-primary:hover { background: var(--select-dark); border-color: var(--select-dark); }
.btn-ghost { background: var(--paper); color: var(--select); }
.btn-ghost:hover { background: var(--st-done-bg); }

/* ---------- 3. BARRA DO APP ---------- */
.app-bar { border-bottom: 1px solid var(--grid); }

.app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

/* Logo da marca: sempre o SVG, nunca texto digitado */
.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.brand img { height: 28px; width: auto; }

.app-bar-link {
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Troca de versão: botão com cara de célula, discreto */
.app-bar-switch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--grid);
  background: var(--head);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}
.app-bar-switch:hover { border-color: var(--select); }

/* ---------- 4. PLANILHA DO INÍCIO ---------- */
.formula-bar {
  background: var(--head);
  border-bottom: 1px solid var(--grid);
}

.formula-bar-inner {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  font-family: var(--font-mono); /* fórmula e caixa de nome em mono, como código */
  font-size: var(--fs-small);
}

.name-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gutter);
  flex-shrink: 0;
  border-right: 1px solid var(--grid);
  color: var(--ink-soft);
}

.fx {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--grid);
  font-style: italic;
  font-weight: 700;
  color: var(--ink-soft);
}

.formula {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  min-width: 0;
  background: var(--paper);
  flex: 1;
  overflow-wrap: anywhere;
}

/* Letras das colunas: 6 colunas iguais depois da coluna dos números */
.col-heads {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-left: var(--gutter);
  border-left: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  background: var(--head);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}
.col-heads span { padding: 4px 0; border-right: 1px solid var(--grid); }

.hero-cells {
  counter-reset: linha;
  margin-left: var(--gutter);
  border-left: 1px solid var(--grid);
  /* linhas verticais da grade, alinhadas às colunas A–F */
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-position: -1px 0;
}

/* Cada filho do início é uma "linha" numerada: 1, 2, 3 */
.hero-cells > * {
  counter-increment: linha;
  position: relative;
  border-bottom: 1px solid var(--grid);
  padding: 28px 24px;
}

.hero-cells > *::before {
  content: counter(linha);
  position: absolute;
  top: 0;
  bottom: -1px;
  left: calc(-1 * var(--gutter) - 1px);
  width: var(--gutter);
  padding-top: 8px;
  background: var(--head);
  border-bottom: 1px solid var(--grid);
  border-right: 1px solid var(--grid);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* A célula selecionada: borda verde + alça de preenchimento */
.cell-selected {
  background: var(--paper);
  outline: 2px solid var(--select);
  outline-offset: -2px;
  padding: 36px 24px 40px !important;
}

.cell-selected::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--select);
  border: 2px solid var(--paper);
}

.cell-selected h1 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* o texto ocupa as colunas A–D (não a linha inteira) */
.hero-lead { padding-right: calc(100% / 3 + 24px) !important; }

.hero-cells > .actions { display: flex; }

/* ---------- 5. BLOCOS (seções) ---------- */
.block {
  padding: 96px 0;
  border-top: 1px solid var(--grid);
}

.block-head {
  display: grid;
  gap: 16px;
  max-width: 44rem;
  margin-bottom: 48px;
}

.block-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.block-head p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Três células lado a lado, separadas só pela grade */
.cells-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--grid);
  border-left: 1px solid var(--grid);
}

.cells-3 li {
  padding: 24px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  display: grid;
  align-content: start;
  gap: 8px;
}

.cells-3 h3, .checklist h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.cells-3 p { color: var(--ink-soft); }

/* ---------- 6. TABELA DE PROJETOS ----------
   Os elementos são criados pelo main.js (article.project, etc.).
   Aqui cada "card" vira uma LINHA de tabela com CSS Grid. */
.sheet-table {
  border-top: 1px solid var(--grid);
  border-left: 1px solid var(--grid);
  --cols: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr) 9.5rem;
}

.sheet-table-head,
.project {
  display: grid;
  grid-template-columns: var(--cols);
}

/* O article é a linha da tabela; o .project-body "some" (display: contents)
   para que título, descrição etc. virem células da mesma grade da miniatura. */
.project-body { display: contents; }

.sheet-table-head {
  background: var(--head);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-soft);
}

.sheet-table-head span,
.project-body > * {
  padding: 16px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}

.sheet-table-head span { padding: 8px 16px; }

.project {
  grid-template-areas:
    "thumb  desc tech status"
    "titulo desc tech status"
    "links  desc tech status";
  grid-template-rows: auto auto 1fr;
}

.project-body h3 {
  grid-area: titulo;
  font-size: var(--fs-h3);
  line-height: 1.3;
  overflow-wrap: anywhere;
  border-bottom: 0;
}

.project-body .desc { grid-area: desc; color: var(--ink-soft); }

/* Antes (à mão) x depois (com automação), dentro da célula "O que é" */
.antes-depois {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--grid);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: var(--fs-small);
}
.antes-depois dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding-top: 2px;
}
.antes-depois dd { margin: 0; }
.antes-depois-depois { color: var(--select); }
.antes-depois-depois + dd { color: var(--ink); }
.project-body .tech { grid-area: tech; font-size: var(--fs-small); }

/* Situação: célula inteira pintada, como formatação condicional */
.project-body .badge {
  grid-area: status;
  font-size: var(--fs-small);
  font-weight: 700;
}
.badge--concluido { background: var(--st-done-bg);  color: var(--st-done-ink); }
.badge--construcao { background: var(--st-build-bg); color: var(--st-build-ink); }
.badge--ideia     { background: var(--st-idea-bg);  color: var(--st-idea-ink); }
.badge--pessoal   { background: var(--st-own-bg);   color: var(--st-own-ink); }

/* Coluna "Projeto" fica sem linha entre título e links */
.project-body .project-links {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 0;
  font-size: var(--fs-small);
  font-weight: 700;
}
.project-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* Quando não há links, a célula "titulo" precisa da linha de baixo */
.project-body:not(:has(.project-links)) h3 {
  grid-row: 2 / -1;
  border-bottom: 1px solid var(--grid);
}

/* Print do projeto: miniatura no topo da coluna "Projeto",
   como uma imagem colada dentro da célula */
.project-media { display: none; }
.project-media:has(img) {
  display: block;
  grid-area: thumb;
  padding: 16px 16px 0;
  border-right: 1px solid var(--grid);
}
.project-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid var(--grid);
}

.projects-message {
  padding: 16px;
  color: var(--ink-soft);
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}

/* ---------- 7. CHECKLIST (ferramentas) ---------- */
.checklists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 52rem;
}

.checklist h3 { margin-bottom: 12px; }

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--grid);
}

/* Caixinha de seleção desenhada com CSS */
.checklist li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-soft);
}

.checklist li.is-done::before {
  border-color: var(--select);
  background: var(--select)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* ---------- 8. FOLHA DE PONTO (jornada) ---------- */
.timesheet {
  border-top: 1px solid var(--grid);
  border-left: 1px solid var(--grid);
  --cols: 11rem minmax(0, 1fr) minmax(0, 1.6fr);
}

.timesheet-head,
.timesheet li {
  display: grid;
  grid-template-columns: var(--cols);
}

.timesheet-head {
  background: var(--head);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-soft);
}

.timesheet-head span,
.timesheet li > * {
  padding: 16px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}
.timesheet-head span { padding: 8px 16px; }

.timesheet h3, .timesheet h4 { font-size: var(--fs-h3); line-height: 1.3; }

/* Mono nos períodos e nos números dos passos (01, 02, 03) */
.timesheet .period { font-family: var(--font-mono); font-size: var(--fs-small); }

/* A mesma "folha" serve para Serviços (Serviço | O que entrega | Exemplo) */
.timesheet--servicos { --cols: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.4fr); }

/* ...e para os passos de "Como funciona" (número | etapa | o que acontece) */
.steps-title {
  font-size: var(--fs-h3);
  margin: 48px 0 16px;
}
.timesheet--passos { --cols: 5rem minmax(0, 1fr) minmax(0, 2.6fr); }
.timesheet--passos .period { color: var(--select); }
.timesheet li > p { color: var(--ink-soft); }

/* Linha atual: marcada com marca-texto
   (o "> p" no seletor deixa a regra mais forte que a de cima) */
.timesheet li.is-current > *,
.timesheet li.is-current > p { background: var(--marker); color: var(--ink); }

/* Linha futura: ainda em branco, só o rascunho */
.timesheet li.is-next > * { color: var(--ink-soft); font-style: italic; }

/* ---------- 9. CONTATO E RODAPÉ ---------- */
.block-contact { padding: 120px 0; }

.block-contact h2 {
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-bottom: 40px;
}

.footer {
  border-top: 1px solid var(--grid);
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Rodapé: marca à esquerda, assinatura à direita */
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Símbolo da marca (20 px) antes do texto */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img { width: 20px; height: 20px; }

/* ---------- 10. ABAS DA PLANILHA (menu) ---------- */
.sheet-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--tabs-h);
  background: var(--head);
  border-top: 1px solid var(--grid);
  padding-bottom: env(safe-area-inset-bottom);
}

.sheet-tabs ul {
  display: flex;
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  overflow-x: auto;                /* no celular, as abas rolam de lado */
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sheet-tabs ul::-webkit-scrollbar { display: none; }

.sheet-tabs a {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding: 0 18px;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-right: 1px solid var(--grid);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sheet-tabs li:first-child a { border-left: 1px solid var(--grid); }
.sheet-tabs a:hover { color: var(--ink); background: var(--paper); }

/* Aba ativa: branca, "na frente", com barra verde embaixo */
.sheet-tabs a[aria-current="true"] {
  background: var(--paper);
  color: var(--select);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--select);
}

.sheet-tabs a:focus-visible { outline-offset: -3px; }

/* ---------- 11. ANIMAÇÃO DE ENTRADA (uma só) ----------
   A fórmula é "digitada" e depois a seleção pousa no título. */
@media (prefers-reduced-motion: no-preference) {
  .formula-text {
    display: inline-block;
    animation: digitar 1.1s steps(40, end) 0.2s both;
  }
  .cell-selected {
    animation: selecionar 0.35s ease-out 1.35s both;
  }
  .cell-selected::after {
    animation: aparecer 0.2s ease-out 1.6s both;
  }
}

@keyframes digitar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes selecionar {
  from { outline-color: transparent; }
  to   { outline-color: var(--select); }
}
@keyframes aparecer {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- 12. CELULAR E TABLET ---------- */
@media (max-width: 860px) {
  .cells-3 { grid-template-columns: 1fr; }
  .hero-lead { padding-right: 24px !important; }

  /* Projetos: cada linha vira um bloco empilhado */
  .sheet-table-head { display: none; }
  .project {
    grid-template-columns: 1fr;
    grid-template-areas: "thumb" "status" "titulo" "desc" "tech" "links";
    grid-template-rows: none;
    border-bottom: 1px solid var(--grid);
    border-right: 1px solid var(--grid);
  }
  .project-media:has(img) { border-right: 0; }
  .project-body > * { border-bottom: 0; padding: 4px 16px; }
  .project-body .badge { justify-self: start; margin: 16px 16px 4px; padding: 4px 10px; border-right: 0; }
  .project-body h3 { grid-row: auto !important; border-bottom: 0 !important; }
  .project-body > :last-child { padding-bottom: 20px; }
  .project-body .project-links { padding-top: 0; }

  /* Folha de ponto empilhada */
  .timesheet-head { display: none; }
  .timesheet li { grid-template-columns: 1fr; border-bottom: 1px solid var(--grid); border-right: 1px solid var(--grid); }
  .timesheet li > * { border: 0; padding: 2px 16px; }
  .timesheet li > :first-child { padding-top: 16px; }
  .timesheet .period { font-size: var(--fs-small); }
  .timesheet li > :last-child { padding-bottom: 16px; }
}

@media (max-width: 600px) {
  :root { --pad: 16px; --gutter: 32px; }
  .block { padding: 64px 0; }
  .block-contact { padding: 80px 0; }
  .block-head { margin-bottom: 32px; }
  .checklists { grid-template-columns: 1fr; gap: 32px; }

  /* menos colunas no topo para caber */
  .col-heads { grid-template-columns: repeat(3, 1fr); }
  .col-heads span:nth-child(n+4) { display: none; }
  .hero-cells { background-size: calc(100% / 3) 100%; }
  .hero-cells > * { padding: 20px 16px; }
  .cell-selected { padding: 28px 16px 32px !important; }
  .hero-lead { font-size: 1.125rem; padding-right: 16px !important; }
  .fx { padding: 0 8px; }
  .formula { font-size: 0.8125rem; }
}