/* A pele do Painel da Casa, sobre o núcleo do Scriptorium.
   Cromo escuro na navegação, papel no conteúdo, e os gráficos na paleta validada
   pela skill dataviz (categorias em ordem fixa, status reservado). */

:root {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-neutra: #a8a59c;
  --bom: #2d7a4b;
  --alerta: #a86a00;
  --ruim: #b3261e;
  --grade-cor: color-mix(in srgb, var(--tinta) 9%, transparent);
  --eixo-cor: color-mix(in srgb, var(--tinta) 28%, transparent);
  --nav-largura: 13rem;
}
html[data-tema="escuro"] {
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-neutra: #77746d;
  --bom: #6fce93;
  --alerta: #e8b45a;
  --ruim: #ff8a80;
}

[hidden] { display: none !important; }
html { background: var(--tela); }
body {
  background: var(--tela);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--letra-texto);
  line-height: 1.5;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
h1 { font-family: var(--serif); font-weight: 500; font-size: var(--letra-titulo-grande); line-height: 1.15; letter-spacing: -.01em; }
h2 { font-family: var(--serif); font-weight: 500; font-size: var(--letra-titulo); line-height: 1.2; }
h3 { font-weight: 600; font-size: var(--letra-subtitulo); }
b { font-weight: 600; }

/* ── A porta ──────────────────────────────────────────────────────────────── */
.porta { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.porta-marca { width: 56px; height: 56px; color: var(--tinta-2); }
.porta p { color: var(--tinta-2); max-width: 34ch; }
.botao { min-width: 11rem; margin-top: 12px; border: 0; border-radius: var(--raio); background: var(--cromo-2); color: var(--cromo-tinta); font: 600 var(--letra-rotulo) var(--sans); padding: 0 20px; cursor: pointer; }
html[data-tema="escuro"] .botao { background: var(--tinta); color: var(--papel); }
.botao-leve, html[data-tema="escuro"] .botao-leve { background: transparent; color: var(--tinta); border: 1px solid var(--borda-controle); }

/* ── A casa ───────────────────────────────────────────────────────────────── */
.casa { display: grid; grid-template-columns: var(--nav-largura) minmax(0, 1fr); min-height: 100dvh; }
.nav { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: calc(env(safe-area-inset-top) + 20px) 12px 16px; background: linear-gradient(180deg, var(--cromo-1), var(--cromo-2)); color: var(--cromo-tinta); }
.nav a { color: inherit; text-decoration: none; }
.nav-marca { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-family: var(--serif); font-size: var(--letra-titulo); }
.nav-marca svg { width: 24px; height: 24px; flex: none; }
.nav-itens { display: grid; gap: 2px; }
.nav-itens a { display: flex; align-items: center; padding: 0 12px; border-radius: var(--raio-p); color: var(--cromo-tinta-2); font-size: var(--letra-rotulo); font-weight: 500; }
.nav-itens a:hover { color: var(--cromo-tinta); }
.nav-itens a[aria-current="page"] { background: rgba(255, 255, 255, .09); color: var(--cromo-tinta); }
.nav-pe { margin-top: auto; display: grid; gap: 6px; padding: 0 12px; }
.nav-foto { font-size: var(--letra-legenda); color: var(--cromo-tenue); }
.nav-sair { justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--cromo-tinta-2); font: 500 var(--letra-legenda) var(--sans); text-decoration: underline; cursor: pointer; }
.nav :focus-visible { outline-color: var(--cromo-acento); }

.visao { display: grid; gap: 24px; align-content: start; width: 100%; max-width: 76rem; margin-inline: auto; padding: 32px clamp(16px, 3vw, 40px) 64px; outline: none; min-width: 0; }
.visao > * { min-width: 0; }

@media (max-width: 760px) {
  .casa { grid-template-columns: minmax(0, 1fr); }
  .nav { position: fixed; inset: auto 0 0 0; z-index: 10; height: auto; flex-direction: row; gap: 0; padding: 4px 4px calc(env(safe-area-inset-bottom) + 4px); background: var(--cromo-2); border-top: 1px solid var(--cromo-borda); }
  .nav-marca, .nav-foto { display: none; }
  .nav-itens { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-itens a { justify-content: center; padding: 0 2px; font-size: var(--letra-legenda); }
  .nav-pe { margin: 0; padding: 0 8px 0 4px; align-content: center; }
  .visao { padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 92px); }
}

/* ── Peças ────────────────────────────────────────────────────────────────── */
.cab { display: grid; gap: 6px; }
.sobre { font-size: var(--letra-micro); color: var(--tenue); letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.guia { color: var(--tinta-2); font-size: var(--letra-subtitulo); max-width: 68ch; }
.guia b { color: var(--tinta); }
.nota { color: var(--tinta-2); font-size: var(--letra-legenda); line-height: 1.5; font-variant-numeric: tabular-nums; }
.nota b { color: var(--tinta); }
.pe { max-width: 75ch; }
.rotulo-c { font-size: var(--letra-legenda); color: var(--tinta-2); }
.grande { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--letra-titulo-grande); line-height: 1.15; font-variant-numeric: tabular-nums; }
.enorme { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.neg { color: var(--ruim); }

.cartao { container-type: inline-size; }
.cartao, .cartao-link { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px; background: var(--papel); border: 1px solid var(--papel-borda); border-radius: var(--raio); box-shadow: var(--sombra-pousada); }
.cartao.forte { background: var(--papel-elev); border-color: var(--borda-controle); }
.cartao-link { color: inherit; text-decoration: none; transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva); }
.cartao-link:hover { transform: translateY(-1px); box-shadow: var(--sombra-erguida); }
.abrir { font-size: var(--letra-legenda); color: var(--tinta-2); text-decoration: underline; margin-top: 4px; }

.resumo, .azulejos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.azulejos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grade2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.heroi { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.pilar { display: grid; gap: 14px; align-content: start; }
@media (max-width: 900px) { .heroi { grid-template-columns: minmax(0, 1fr); } }
.secao { display: grid; gap: 14px; min-width: 0; }
.cab-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }

.regua { display: block; height: 8px; border-radius: 99px; background: var(--grade-cor); overflow: hidden; margin: 4px 0; }
.regua i { display: block; height: 100%; border-radius: 99px; background: var(--serie-1); }
.pilha { display: flex; gap: 2px; height: 14px; margin: 8px 0; border-radius: 99px; overflow: hidden; background: var(--grade-cor); }
.pilha span { display: block; height: 100%; min-width: 2px; }
.legenda { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); font-size: var(--letra-legenda); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.legenda li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; transform: translateY(1px); }
.legenda b { margin-left: auto; color: var(--tinta); font-weight: 500; white-space: nowrap; }
.legenda.larga { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.legenda small { display: block; color: var(--tenue); font-size: var(--letra-legenda); }
.legenda.linha { display: flex; flex-wrap: wrap; }

.figuras { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.figuras dt { font-size: var(--letra-legenda); color: var(--tinta-2); }
.figuras dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rolagem.alta { max-height: 30rem; overflow-y: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--letra-legenda); font-variant-numeric: tabular-nums; }
.tabela th { position: sticky; top: 0; text-align: left; font-weight: 500; color: var(--tinta-2); padding: 6px 8px; border-bottom: 1px solid var(--regra); background: var(--papel); white-space: nowrap; }
.tabela td { padding: 8px; border-bottom: 1px solid var(--regra); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela .ent { color: var(--bom); }
.tabela .quando { color: var(--tinta-2); white-space: nowrap; }
.tabela tr.passado td { color: var(--tenue); }
.plano .uso { width: 40%; min-width: 7rem; vertical-align: middle; }
.plano .uso .regua { margin: 0; }
.plano tr.alerta .regua i { background: var(--alerta); }
.plano tr.alerta .resta { color: var(--alerta); }
.plano tr.passou .regua i { background: var(--ruim); }
.plano tr.passou .resta { color: var(--ruim); }
.selo { display: inline-block; padding: 0 8px; border: 1px solid var(--regra); border-radius: 99px; color: var(--tinta-2); white-space: nowrap; }
.selo.estimado { color: var(--alerta); border-color: currentColor; }
.selo.feito { color: var(--bom); border-color: currentColor; }
.selo.apagar { color: var(--ruim); border-color: currentColor; }

/* Tabela que não cabe vira lista, medida pelo cartão e não pela tela: nada rola de lado.
   `.fila`: data, nome e valor na primeira linha, o resto embaixo.
   `.plano`: nome e quanto resta, a régua, e gasto de teto.
   `.empilha`: a primeira célula é o título, e as outras levam o nome da coluna. */
@container (max-width: 460px) {
  .tabela.fila thead, .tabela.plano thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela.fila, .tabela.fila tbody, .tabela.plano, .tabela.plano tbody { display: block; }
  .tabela.fila tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "d n n v" ". o s s"; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--regra); align-items: baseline; }
  .tabela.fila tbody tr:last-child { border-bottom: 0; }
  .tabela.fila td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabela.fila .f-data { grid-area: d; min-width: 3.1em; }
  .tabela.fila .f-nome { grid-area: n; color: var(--tinta); }
  .tabela.fila .f-valor { grid-area: v; }
  .tabela.fila .f-onde { grid-area: o; color: var(--tinta-2); }
  .tabela.fila .f-sit { grid-area: s; }
  .tabela.fila .f-meta { grid-column: 2 / -1; grid-row: 2; color: var(--tinta-2); text-align: left; white-space: normal; }
  .tabela.plano tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "u u" "g t"; gap: 3px 12px; padding: 9px 0; border-bottom: 1px solid var(--regra); }
  .tabela.plano tbody tr:last-child { border-bottom: 0; }
  .tabela.plano td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  .tabela.plano .p-nome { grid-area: n; }
  .tabela.plano .resta { grid-area: r; }
  .tabela.plano .uso { grid-area: u; padding: 3px 0; }
  .tabela.plano .p-gasto { grid-area: g; text-align: left; color: var(--tinta-2); }
  .tabela.plano .p-gasto::before { content: "Gasto "; }
  .tabela.plano .p-teto { grid-area: t; color: var(--tinta-2); }
  .tabela.plano .p-teto::before { content: "Teto "; }
}
@container (max-width: 640px) {
  .tabela.empilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela.empilha, .tabela.empilha tbody { display: block; }
  .tabela.empilha tr { display: block; padding: 9px 0; border-bottom: 1px solid var(--regra); }
  .tabela.empilha tbody tr:last-child { border-bottom: 0; }
  .tabela.empilha td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 1px 0; border: 0; text-align: right; white-space: normal; }
  .tabela.empilha td::before { content: attr(data-r); flex: none; max-width: 48%; color: var(--tinta-2); text-align: left; }
  .tabela.empilha td:first-child { display: block; font-weight: 600; text-align: left; margin-bottom: 2px; }
  .tabela.empilha td:first-child::before { content: none; }
}

details.cartao > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--alvo); }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::after { content: "Mostrar"; font-size: var(--letra-legenda); color: var(--tinta-2); }
details.cartao[open] > summary::after { content: "Esconder"; }

/* ── Gráficos ─────────────────────────────────────────────────────────────── */
.grafico { position: relative; width: 100%; min-width: 0; }
.grafico svg { display: block; max-width: 100%; touch-action: pan-y; outline-offset: 2px; }
.grafico text { font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .rotulo { fill: var(--tinta-2); }
.grafico .rotulo-forte { fill: var(--tinta); }
.grafico .grade { stroke: var(--grade-cor); }
.grafico .eixo { stroke: var(--eixo-cor); }
.grafico .referencia { stroke: var(--eixo-cor); stroke-dasharray: 3 3; }
.grafico .ponto { stroke: var(--papel); stroke-width: 2; }
.dica { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 2px; min-width: 9.5rem; max-width: min(22rem, 100%); padding: 7px 10px; background: var(--papel-elev); border: 1px solid var(--papel-borda); border-radius: var(--raio-p); box-shadow: var(--sombra-erguida); font-size: var(--letra-legenda); color: var(--tinta); font-variant-numeric: tabular-nums; }
.dica-t { color: var(--tinta-2); }
.dica div { display: flex; align-items: center; gap: 6px; }
.dica i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dica b { margin-left: auto; padding-left: 12px; font-weight: 600; white-space: nowrap; }

.seletor { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seletor button { min-height: 32px; padding: 0 10px; border: 1px solid var(--papel-borda); border-radius: 99px; background: none; color: var(--tinta-2); font: 500 var(--letra-legenda) var(--sans); cursor: pointer; }
.seletor button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
@media (pointer: coarse) { .seletor button { min-height: 38px; padding: 0 12px; } }
.seletor-linha { display: flex; justify-content: flex-end; }
.deslizar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--letra-rotulo); color: var(--tinta-2); }
.deslizar b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.deslizar input { grid-column: 1 / -1; width: 100%; min-height: 32px; accent-color: var(--serie-1); }

/* O Jardim tem cenário próprio: o papel dele é a estufa. */
.visao-jardim { padding: 0; max-width: none; display: block; }
.visao-jardim .vj { min-height: 100dvh; padding: 32px clamp(16px, 3vw, 40px) 64px; background: radial-gradient(1100px 620px at 8% -8%, var(--sun), transparent 62%), linear-gradient(180deg, var(--bg-light), var(--bg) 520px); background-color: var(--bg); }
.visao-jardim .wrap { max-width: 72rem; margin-inline: auto; }
.visao-jardim .cab h1 { font-family: var(--f-display); }
.visao-jardim .dica { background: var(--surface-solid); border-color: var(--line); color: var(--fg); }
.visao-jardim .grafico .rotulo, .visao-jardim .dica-t { fill: var(--muted); color: var(--muted); }
.visao-jardim .grafico .ponto { stroke: var(--surface-solid); }
.visao-jardim .seletor button { border-color: var(--line); color: var(--muted); }
.visao-jardim .seletor button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg-light); }
.visao-jardim .deslizar { color: var(--muted); }
.visao-jardim .deslizar b { color: var(--fg); }
@media (max-width: 760px) {
  .visao-jardim .vj { padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 92px); }
}