@import url('/fonts/fontes.css');

/* ══════════════════════════════════════════════════════════════════════
   R I T U A L
   Cartaz de boxe, rótulo de barbearia, embalagem de farmácia dos anos 30.
   Papel envelhecido, tinta saturada, filete duplo, itálico inclinado.
   Só tema claro — por decisão, não por esquecimento.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Papel */
  --paper:        #f4ede0;
  --paper-deep:   #ebe1d1;
  --paper-shade:  #e2d6bf;
  --paper-edge:   #d6c8ad;

  /* Tintas */
  --ink:          #1a1a1a;
  --ink-soft:     #5c5346;
  --ink-faint:    #9a8f7e;
  --red:          #c0392b;
  --blue:         #1f3a93;
  --gold:         #d4a017;
  --green:        #2d6a4f;

  /* Categorias — cada uma uma tinta da mesma prensa */
  --cat-trabalho:    #1f3a93;
  --cat-estudo:      #6a2c5a;
  --cat-leitura:     #8a5a2b;
  --cat-academia:    #b3301f;
  --cat-aula:        #2d6a4f;
  --cat-ritual:      #4a3f6b;
  --cat-alimentacao: #a87c0f;

  --serif:  'Libre Baskerville', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --display:'Playfair Display', 'Libre Baskerville', Georgia, serif;

  --gap:    clamp(0.9rem, 4vw, 1.4rem);
  --frame:  3px;

  /* Curvas com peso. Nada de `ease` genérico. */
  --peso:      cubic-bezier(.16, .84, .28, 1);
  --overshoot: cubic-bezier(.34, 1.56, .48, 1);
  --seco:      cubic-bezier(.9, .03, .69, .22);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

/* ── Grão do papel ─────────────────────────────────────────────────────
   feTurbulence renderizado uma vez num data-URI e esticado por cima de tudo.

   SEM mix-blend-mode de propósito. `multiply` numa camada fixa do tamanho
   da tela obriga o navegador a refazer a mistura da página inteira a cada
   quadro de qualquer animação embaixo — foi o que derrubou o carimbo de 60
   para 5 quadros por segundo. Sobre papel claro e a 4% de opacidade, o
   ruído escuro puro é visualmente indistinguível do multiply, e sai de graça.
   ──────────────────────────────────────────────────────────────────── */
.grao {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Fibras longas do papel, quase imperceptíveis, pra tirar o ar de tela lisa. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .35;
  background:
    repeating-linear-gradient(94deg,  transparent 0 37px, rgba(140,120,90,.045) 37px 38px),
    repeating-linear-gradient(176deg, transparent 0 53px, rgba(140,120,90,.035) 53px 54px);
}

/* ── Tipografia ────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-style: italic;            /* a assinatura visual do app */
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
}

.rotulo {
  font-family: var(--serif);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: lining-nums;
  letter-spacing: -.02em;
}

/* ── Molduras tipográficas ─────────────────────────────────────────────
   Filete duplo de verdade: traço grosso, respiro de papel, traço fino.
   Feito com box-shadow inset pra não somar três elementos por card.
   ──────────────────────────────────────────────────────────────────── */
.moldura {
  border: var(--frame) solid var(--ink);
  box-shadow:
    inset 0 0 0 2px var(--paper),
    inset 0 0 0 3px var(--ink);
  background: var(--paper);
}

.moldura-fina {
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 2px var(--ink);
  background: var(--paper);
}

/* Moldura na cor da tinta do bloco. */
.moldura[data-tinta] {
  border-color: var(--tinta, var(--ink));
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--tinta, var(--ink));
}

/* Filete divisório com ornamento no meio. */
.filete {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.1rem 0;
  color: var(--ink-faint);
  font-size: .8rem;
}
.filete::before, .filete::after {
  content: '';
  flex: 1;
  height: 3px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .5;
}

/* Caixinha de cor sólida com o texto vazado no creme. */
.tarja {
  display: inline-block;
  padding: .2em .65em .26em;
  background: var(--ink);
  color: var(--paper);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
}
.tarja--vermelha { background: var(--red); }
.tarja--verde    { background: var(--green); }
.tarja--dourada  { background: var(--gold); color: var(--ink); }
.tarja--tinta    { background: var(--tinta, var(--ink)); }

/* ── Esqueleto ─────────────────────────────────────────────────────── */

/* Só no modo semana, e só se a janela for mesmo larga (monitor), a coluna
   se alarga pra caber a grade de 7 dias de verdade. No celular nada muda. */
@media (min-width: 62rem) {
  #app:has(.semana) { max-width: 70rem; }
}

#app {
  position: relative;
  z-index: 2;
  /* Contexto de container query: a grade da semana precisa reagir à largura
     DESTA coluna, não à da janela. Com media query ela virava 7 colunas num
     celular de 360px assim que a janela passava de 640px — o que nunca
     acontece aqui, porque a coluna é travada em 34rem. */
  container-type: inline-size;
  container-name: coluna;
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100dvh;
  transition: max-width .35s var(--peso);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gap) calc(var(--gap) + env(safe-area-inset-bottom));
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: calc(.7rem + env(safe-area-inset-top));
  padding-bottom: .55rem;
  background: linear-gradient(var(--paper) 72%, rgba(244,237,224,0));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.marca b { font-style: italic; font-weight: 900; letter-spacing: .1em; }

/* ── Seletor de modo ───────────────────────────────────────────────── */

.modos {
  display: flex;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.modos button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .42rem .62rem;
  cursor: pointer;
  transition: background .18s var(--peso), color .18s var(--peso);
}
.modos button + button { border-left: 1px solid var(--ink); }
.modos button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ── Barra do dia ──────────────────────────────────────────────────────
   A largura é escrita por um integrador de mola em JS (ui.js), não por
   transition — por isso aqui não há `transition: width`. Se houvesse, as
   duas curvas brigariam e o resultado ficaria mole.
   ──────────────────────────────────────────────────────────────────── */
.barra-dia {
  position: relative;
  height: 1.55rem;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  overflow: hidden;
}
.barra-dia__enchimento {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--green);
  background-image: repeating-linear-gradient(
    -45deg, rgba(0,0,0,.14) 0 3px, transparent 3px 9px);
}
.barra-dia__pulado {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--paper-shade);
  background-image: repeating-linear-gradient(
    -45deg, var(--red) 0 2px, transparent 2px 8px);
  opacity: .55;
}
.barra-dia__marca {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.18);
}
.barra-dia__texto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  /* Contorno creme em vez de mix-blend-mode: a legenda fica por cima da
     parte já preenchida (verde-garrafa) e da vazia (papel), e precisa ler
     nas duas. Multiply deixaria tinta escura sobre verde escuro — ilegível —
     e ainda obrigaria a remisturar a barra a cada quadro da mola. */
  text-shadow:
     1px  0 0 var(--paper), -1px  0 0 var(--paper),
     0  1px 0 var(--paper),  0 -1px 0 var(--paper),
     1px  1px 0 var(--paper), -1px -1px 0 var(--paper),
     1px -1px 0 var(--paper), -1px  1px 0 var(--paper);
}

/* ══════════════════════════════════════════════════════════════════════
   MODO FOCO — a tela principal
   ══════════════════════════════════════════════════════════════════════ */

.foco {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: .6rem 0 1rem;
  text-align: center;
}

.foco__cartao {
  position: relative;
  padding: clamp(1.3rem, 6vw, 2.1rem) clamp(1rem, 5vw, 1.6rem) clamp(1.5rem, 6vw, 2rem);
  overflow: hidden;
}

/* O cartão do passo de agora respira. Lento, quase imperceptível —
   presença, não animação. */
.foco__cartao--agora {
  animation: respira 4.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes respira {
  0%, 100% { transform: scale(1);      box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--tinta, var(--ink)), 0 0 0 0 rgba(192,57,43,0); }
  50%      { transform: scale(1.0125); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--tinta, var(--ink)), 0 0 0 7px rgba(192,57,43,.06); }
}
@media (prefers-reduced-motion: reduce) {
  .foco__cartao--agora { animation: none; }
}

.foco__aba {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  padding: .26rem .9rem .3rem;
  background: var(--red);
  color: var(--paper);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.foco__aba--atrasado { background: var(--ink); }
.foco__aba--proximo  { background: var(--ink-soft); }
.foco__aba--solta    { background: var(--tinta, var(--ink)); }

.foco__hora {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  color: var(--tinta, var(--ink));
  margin-top: .55rem;
  letter-spacing: .02em;
}

.foco__titulo {
  font-size: clamp(2.15rem, 11.5vw, 3.6rem);
  margin: .3rem 0 .1rem;
  text-wrap: balance;
  hyphens: auto;
}

.foco__assunto {
  font-style: italic;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-top: .35rem;
}

.foco__restante {
  margin-top: .85rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foco__restante b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.28rem;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}

.foco__ornamento {
  color: var(--tinta, var(--ink-faint));
  font-size: 1.05rem;
  opacity: .62;
  letter-spacing: .5em;
  margin-top: .9rem;
}

/* Rodapé do foco: o que vem depois. */
.foco__adiante {
  font-size: .72rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.foco__adiante b { font-style: italic; font-family: var(--display); font-size: .92rem; }

.foco__atras {
  display: inline-block;
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  background: none; border-width: 0 0 1px; font-family: var(--serif);
}

/* ── Botões ────────────────────────────────────────────────────────── */

.acoes {
  display: grid;
  gap: .6rem;
}

.botao {
  appearance: none;
  display: block;
  width: 100%;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .92rem 1rem;
  cursor: pointer;
  position: relative;
  transition: transform .12s var(--peso), box-shadow .12s var(--peso), background .16s var(--peso);
  box-shadow: 4px 4px 0 0 var(--ink);
  text-decoration: none;
  text-align: center;
}
.botao:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--ink);
}
.botao--feito {
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
  box-shadow: 4px 4px 0 0 var(--ink);
  font-size: .95rem;
  padding: 1.05rem 1rem;
}
.botao--nao {
  background: var(--paper);
  color: var(--red);
  border-color: var(--red);
  box-shadow: 4px 4px 0 0 var(--red);
}
.botao--treino {
  background: var(--cat-academia);
  color: var(--paper);
  border-color: var(--cat-academia);
  font-size: .92rem;
  padding: 1.05rem 1rem;
}
.botao--fantasma {
  border-width: 2px;
  box-shadow: none;
  background: transparent;
  font-size: .68rem;
  padding: .6rem .8rem;
  letter-spacing: .14em;
}
.botao--fantasma:active { transform: scale(.97); box-shadow: none; }
.botao[disabled] { opacity: .42; pointer-events: none; }

/* ── Cronômetro da meditação ───────────────────────────────────────── */

.cronometro {
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: .3rem 0 .2rem;
}
.cronometro__mostrador {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.4rem, 19vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cronometro__mostrador--correndo { color: var(--cat-ritual); }
.cronometro__mostrador--fim      { color: var(--green); }
.cronometro__anel {
  width: clamp(9rem, 46vw, 12rem);
  height: clamp(9rem, 46vw, 12rem);
  transform: rotate(-90deg);
}
.cronometro__anel circle { fill: none; stroke-linecap: butt; }
.cronometro__trilho { stroke: var(--paper-shade); stroke-width: 7; }
.cronometro__arco   { stroke: var(--cat-ritual); stroke-width: 7; transition: stroke-dashoffset .95s linear; }

/* ══════════════════════════════════════════════════════════════════════
   MODO DIA — linha do tempo vertical
   ══════════════════════════════════════════════════════════════════════ */

.dia { padding-bottom: 1.5rem; }

.dia__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin: .5rem 0 .2rem;
}
.dia__titulo { font-size: clamp(1.7rem, 8vw, 2.4rem); }
.dia__data   { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

.linha {
  position: relative;
  margin-top: 1.1rem;
  padding-left: 3.6rem;
}
/* O fio do tempo. */
.linha::before {
  content: '';
  position: absolute;
  left: 3.05rem;
  top: .5rem;
  bottom: .5rem;
  width: 3px;
  border-left: 1px solid var(--ink-faint);
  border-right: 1px solid var(--ink-faint);
  opacity: .45;
}

.passo {
  position: relative;
  margin-bottom: .75rem;
  transition: opacity .3s var(--peso);
}
.passo__hora {
  position: absolute;
  left: -3.6rem;
  top: .62rem;
  width: 2.7rem;
  text-align: right;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* Conta do fio do tempo. */
.passo__conta {
  position: absolute;
  left: -.72rem;
  top: .88rem;
  width: .62rem;
  height: .62rem;
  background: var(--paper);
  border: 2px solid var(--tinta, var(--ink));
  transform: rotate(45deg);
  z-index: 2;
}
.passo--feito  .passo__conta { background: var(--green); border-color: var(--green); }
.passo--pulado .passo__conta { background: var(--red);   border-color: var(--red); }
.passo--agora  .passo__conta { background: var(--red);   border-color: var(--red); transform: rotate(45deg) scale(1.35); }

.passo__corpo {
  position: relative;
  padding: .62rem .8rem .68rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  overflow: hidden;
}
/* Faixa de tinta da categoria na lateral. */
.passo__corpo::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--tinta, var(--ink));
}
.passo__texto  { flex: 1; min-width: 0; }
.passo__nome   { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.passo__meta   { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: .12rem; }

.passo--passado { opacity: .46; }
.passo--passado .passo__corpo { border-style: solid; }

.passo--agora .passo__corpo {
  border-color: var(--red);
  border-width: 3px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--red);
}
.passo--agora { opacity: 1; }

.passo--feito .passo__corpo  { background: color-mix(in srgb, var(--green) 9%, var(--paper)); border-color: var(--green); }
.passo--feito .passo__nome   { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--green); }
.passo--pulado .passo__corpo { background: color-mix(in srgb, var(--red) 7%, var(--paper)); border-color: var(--red); }
.passo--pulado .passo__nome  { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--red); opacity: .7; }

.passo__selo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: .1rem .42rem .14rem;
  border: 1.5px solid currentColor;
  transform: rotate(-5deg);
  white-space: nowrap;
}
.passo--feito  .passo__selo { color: var(--green); }
.passo--pulado .passo__selo { color: var(--red); }

/* ── Bloco informativo ─────────────────────────────────────────────────
   Acontece, mas não se cobra. Visual de anotação à margem: filete fino
   tracejado, sem preenchimento de tinta na lateral, sem cursor de clique.
   Precisa ler como "isto é contexto", não como "isto é uma tarefa que você
   esqueceu de marcar".
   ──────────────────────────────────────────────────────────────────── */
.passo--informativo .passo__corpo {
  border-style: dashed;
  border-width: 1.5px;
  background: transparent;
  cursor: default;
}
.passo--informativo .passo__corpo::before {
  opacity: .35;
  width: 3px;
}
.passo--informativo .passo__nome {
  font-weight: 400;
  font-size: .95rem;
  color: var(--ink-soft);
}
.passo--informativo .passo__conta {
  background: var(--paper);
  border-style: dashed;
  border-width: 1.5px;
  transform: rotate(45deg) scale(.72);
}
.passo--informativo.passo--agora .passo__corpo {
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}

.faixa--informativa {
  background: transparent;
  border-left-style: dashed;
  border-left-width: 3px;
  opacity: .62;
  cursor: default;
}
.faixa--informativa .faixa__nome { font-style: italic; }

/* Tarefa solta do fim de semana: sem hora, sem cobrança. */
.solta .passo__hora { display: none; }
.solta .passo__corpo { border-style: dashed; }

/* ══════════════════════════════════════════════════════════════════════
   MODO SEMANA — grade de 7 dias
   ══════════════════════════════════════════════════════════════════════ */

.semana { padding-bottom: 1.5rem; }

.semana__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: .5rem 0 .9rem;
}
.semana__titulo { font-size: clamp(1.5rem, 7vw, 2.1rem); }
.semana__seta {
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  padding: .35rem .6rem;
  cursor: pointer;
}
.semana__seta:active { background: var(--ink); color: var(--paper); }

.grade {
  display: grid;
  gap: .5rem;
}

.coluna {
  border: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.coluna--hoje { border-width: 3px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }
.coluna--fds .coluna__cabeca { background: var(--paper-shade); color: var(--ink); }

.coluna__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .32rem .6rem .36rem;
  background: var(--ink);
  color: var(--paper);
}
.coluna--hoje .coluna__cabeca { background: var(--red); color: var(--paper); }
.coluna__dia {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.coluna__data { font-family: var(--display); font-style: italic; font-weight: 700; font-size: .84rem; opacity: .9; }
.coluna__contagem { font-size: .58rem; letter-spacing: .1em; opacity: .8; }

.coluna__corpo { padding: .35rem .4rem .45rem; display: grid; gap: .22rem; }

.faixa {
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .2rem .35rem .24rem;
  border-left: 4px solid var(--tinta, var(--ink));
  background: color-mix(in srgb, var(--tinta, var(--ink)) 7%, var(--paper));
  font-size: .7rem;
  line-height: 1.25;
  cursor: pointer;
}
.faixa__hora {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: .68rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.faixa__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa__sinal { font-size: .72rem; line-height: 1; }
.faixa--feito  { opacity: .55; }
.faixa--feito .faixa__nome { text-decoration: line-through; text-decoration-color: var(--green); }
.faixa--pulado .faixa__nome { text-decoration: line-through; text-decoration-color: var(--red); opacity: .6; }
.faixa--agora { outline: 2px solid var(--red); outline-offset: -1px; }

.coluna__vazio {
  padding: .5rem .5rem .6rem;
  font-style: italic;
  font-size: .72rem;
  color: var(--ink-faint);
  text-align: center;
}

@container coluna (min-width: 52rem) {
  .grade { grid-template-columns: repeat(7, 1fr); align-items: start; }
  .coluna__corpo { min-height: 7rem; }
  .faixa { flex-direction: column; align-items: flex-start; gap: 0; font-size: .64rem; }
  .faixa__nome { white-space: normal; }
}

/* Navegador sem container query: fica empilhado, que é o layout de celular
   e o que este app usa 99% do tempo. Degrada sem quebrar. */
@supports not (container-type: inline-size) {
  .grade { grid-template-columns: 1fr; }
}

/* ── Selo do dia do projeto ────────────────────────────────────────── */

.selo-dia {
  display: block;
  text-align: center;
  margin: .6rem auto 0;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.selo-dia--zero {
  color: var(--paper);
  background: var(--ink);
  padding: .26rem .7rem .3rem;
  width: fit-content;
}

/* ══════════════════════════════════════════════════════════════════════
   STREAK
   ══════════════════════════════════════════════════════════════════════ */

.streak {
  display: flex;
  align-items: stretch;
  gap: .55rem;
  margin: .2rem 0 .1rem;
}
.streak__caixa {
  flex: 1;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);
  background: var(--paper);
  padding: .6rem .7rem .7rem;
  text-align: center;
}
.streak__caixa--secundaria {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink);
  flex: 0 0 auto;
  min-width: 6.4rem;
}
.streak__numero {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.6rem, 14vw, 3.9rem);
  line-height: .95;
  color: var(--gold);
  letter-spacing: -.04em;
}
.streak__caixa--secundaria .streak__numero { font-size: clamp(1.7rem, 8vw, 2.3rem); color: var(--ink); }
.streak__legenda {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .18rem;
}

/* ══════════════════════════════════════════════════════════════════════
   CARIMBO — o momento de concluir
   ══════════════════════════════════════════════════════════════════════ */

#carimbo-camada {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  display: grid;
  place-items: center;
  /* Camada própria no compositor: o carimbo anima sozinho, sem arrastar o
     resto da página pra dentro do mesmo passe de pintura. */
  isolation: isolate;
  contain: layout paint;
}

.carimbo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.6rem, 19vw, 6.2rem);
  letter-spacing: .02em;
  color: var(--green);
  border: 7px solid var(--green);
  padding: .1em .26em .16em;
  opacity: 0;
  /* Desfoque CONSTANTE, nunca animado: um blur que muda a cada quadro
     obriga a rasterizar de novo uma superfície enorme (o carimbo entra em
     escala 3,4). Constante, ele é rasterizado uma vez e só o compositor
     trabalha depois. */
  filter: blur(.3px) contrast(1.25);
  text-shadow: 0 0 1px rgba(45,106,79,.5);
  will-change: transform, opacity;
}
.carimbo--nao { color: var(--red); border-color: var(--red); font-size: clamp(2.5rem, 13vw, 4.2rem); }

/* Cai de cima, bate no papel, quica e assenta torto.
   Só transform e opacity: as duas únicas propriedades que o compositor
   anima sem repintar nada. */
@keyframes bater-carimbo {
  0%   { opacity: 0;   transform: rotate(-26deg) scale(3.4); }
  22%  { opacity: .55; transform: rotate(-17deg) scale(1.9); }
  38%  { opacity: 1;   transform: rotate(-11deg) scale(1.02); }
  52%  {               transform: rotate(-6.5deg) scale(.86); }
  66%  {               transform: rotate(-10.5deg) scale(1.07); }
  78%  {               transform: rotate(-7.8deg) scale(.965); }
  88%  { opacity: 1;   transform: rotate(-9.4deg) scale(1.012); }
  100% { opacity: 0;   transform: rotate(-9deg) scale(1); }
}
.carimbo--batendo { animation: bater-carimbo 1.15s var(--peso) forwards; }

/* O papel inteiro leva o tranco da batida. */
@keyframes tranco {
  0%, 100% { transform: translate(0, 0); }
  32% { transform: translate(0, 3px) scale(1.004); }
  40% { transform: translate(-2px, -1px); }
  48% { transform: translate(2px, 1px); }
  56% { transform: translate(-1px, 0); }
}
.tranco { animation: tranco .5s var(--seco); }

@media (prefers-reduced-motion: reduce) {
  .carimbo--batendo { animation-duration: .35s; }
  .tranco { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOLHAS SOBREPOSTAS (motivo, editor, ajustes)
   ══════════════════════════════════════════════════════════════════════ */

#folha-camada {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(26, 22, 16, .34);
  backdrop-filter: blur(1.5px);
}
#folha-camada.aberta { display: flex; }

.folha {
  width: min(34rem, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-bottom: 0;
  padding: 1.1rem var(--gap) calc(1.2rem + env(safe-area-inset-bottom));
  animation: subir .34s var(--overshoot);
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);
}
@keyframes subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.folha__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .2rem;
}
.folha__titulo { font-size: clamp(1.5rem, 7vw, 2rem); }
.folha__fechar {
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: .9rem;
  line-height: 1;
  padding: .3rem .55rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.folha__sub { color: var(--ink-soft); font-size: .78rem; font-style: italic; margin-top: .1rem; }

/* Botões de motivo */
.motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr));
  gap: .45rem;
  margin-top: 1rem;
}
.motivo {
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: .74rem;
  font-weight: 700;
  padding: .72rem .5rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  transition: transform .1s var(--peso), background .14s var(--peso), color .14s var(--peso);
}
.motivo:active { transform: scale(.96); }
.motivo[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--paper); }

.campo {
  width: 100%;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--ink);
  padding: .6rem .7rem;
  margin-top: .6rem;
}
.campo:focus { outline: 2px solid var(--red); outline-offset: 1px; }
textarea.campo { min-height: 4.5rem; resize: vertical; }

.linha-campos { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
.rotulo-campo { display: block; margin-top: .75rem; }
.rotulo-campo > span { display: block; margin-bottom: .1rem; }

/* Chaves liga/desliga */
.chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--paper-edge);
  cursor: pointer;
}
.chave__texto { flex: 1; min-width: 0; }
.chave__nome { font-family: var(--display); font-style: italic; font-weight: 700; font-size: .98rem; }
.chave__nota { font-size: .68rem; color: var(--ink-soft); }
.chave__caixa {
  flex: 0 0 auto;
  width: 2.7rem; height: 1.45rem;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  position: relative;
  transition: background .2s var(--peso);
}
.chave__caixa::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: calc(1.45rem - 6px); height: calc(1.45rem - 6px);
  background: var(--ink);
  transition: transform .22s var(--overshoot);
}
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave input:checked + .chave__caixa { background: var(--green); }
.chave input:checked + .chave__caixa::after { transform: translateX(1.25rem); background: var(--paper); }

/* Dias da semana (editor de bloco) */
.dias { display: flex; gap: .3rem; margin-top: .35rem; flex-wrap: wrap; }
.dias button {
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  width: 2.3rem;
  padding: .38rem 0;
  cursor: pointer;
}
.dias button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ══════════════════════════════════════════════════════════════════════
   FECHAMENTO DO DIA
   ══════════════════════════════════════════════════════════════════════ */

.fechamento { padding: .4rem 0 1.5rem; text-align: center; }
.fechamento__selo {
  font-size: 1.5rem;
  letter-spacing: .6em;
  color: var(--cat-ritual);
  opacity: .75;
}
.fechamento__titulo { font-size: clamp(2rem, 10vw, 3rem); margin: .35rem 0 .1rem; }
.fechamento__data {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.fechamento__frase {
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 1rem auto 0;
  max-width: 24rem;
  text-wrap: balance;
}
.fechamento__placar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1.1rem 0 .3rem;
}
.placar {
  border: 2px solid var(--ink);
  padding: .55rem .3rem .6rem;
  background: var(--paper);
}
.placar__n { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.85rem; line-height: 1; }
.placar__r { font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem; }
.placar--feitos  .placar__n { color: var(--green); }
.placar--pulados .placar__n { color: var(--red); }

.pendencia {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--paper));
  padding: .55rem .7rem;
  margin-bottom: .45rem;
  text-align: left;
}
.pendencia__texto { flex: 1; min-width: 0; }
.pendencia__nome { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1rem; }
.pendencia__hora { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pendencia__botao {
  appearance: none;
  border: 2px solid var(--red);
  background: var(--red);
  color: var(--paper);
  font-family: var(--serif);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .6rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   HISTÓRICO — gráficos de hachura, sem biblioteca
   ══════════════════════════════════════════════════════════════════════ */

.historico { padding-bottom: 1.5rem; }

.lente {
  display: flex;
  gap: .35rem;
  margin: .6rem 0 1rem;
}
.lente button {
  appearance: none;
  flex: 1;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .3rem;
  cursor: pointer;
}
.lente button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.achado {
  border-left: 5px solid var(--red);
  background: var(--paper-deep);
  padding: .65rem .8rem .7rem;
  margin-bottom: .5rem;
  font-size: .86rem;
  line-height: 1.45;
}
.achado--steady  { border-left-color: var(--green); }
.achado--perfect { border-left-color: var(--gold); }
.achado--reason  { border-left-color: var(--ink); }
.achado b { font-family: var(--display); font-style: italic; font-weight: 900; }

/* Barra de adesão com hachura — a densidade do traço conta a história. */
.medida { margin-bottom: .72rem; }
.medida__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .18rem;
}
.medida__nome { font-family: var(--display); font-style: italic; font-weight: 700; font-size: .92rem; }
.medida__pct  { font-family: var(--display); font-style: italic; font-weight: 900; font-size: .95rem; font-variant-numeric: tabular-nums; }
.medida__trilho {
  position: relative;
  height: 1.1rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.medida__barra {
  position: absolute;
  inset: 0 auto 0 0;
  background-color: var(--tinta, var(--ink));
  background-image: repeating-linear-gradient(
    -45deg, rgba(244,237,224,.42) 0 2px, transparent 2px 6px);
  width: 0;
  transition: width .9s var(--peso);
}
.medida__nota { font-size: .62rem; color: var(--ink-soft); margin-top: .12rem; letter-spacing: .04em; }

/* Barras verticais dos motivos. */
.motivos-grafico {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  height: 8.5rem;
  padding: .5rem .2rem 0;
  border-bottom: 3px solid var(--ink);
  margin-bottom: .4rem;
}
.motivo-barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; min-width: 0; }
.motivo-barra__n { font-family: var(--display); font-style: italic; font-weight: 900; font-size: .84rem; }
.motivo-barra__corpo {
  width: 100%;
  background-color: var(--red);
  background-image: repeating-linear-gradient(
    -45deg, rgba(244,237,224,.4) 0 2px, transparent 2px 5px);
  border: 2px solid var(--ink);
  border-bottom: 0;
  min-height: 3px;
  transition: height .8s var(--peso);
}
.motivos-rotulos { display: flex; gap: .4rem; }
.motivos-rotulos span {
  flex: 1;
  font-size: .5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.15;
  min-width: 0;
  word-break: break-word;
}

/* Calendário de pontos dos últimos dias. */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: .22rem; margin-top: .3rem; }
.calendario__celula {
  aspect-ratio: 1;
  border: 1.5px solid var(--ink-faint);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: .52rem;
  color: var(--ink-faint);
}
.calendario__celula--ok    { background: var(--green); border-color: var(--green); color: var(--paper); }
.calendario__celula--falha { background: var(--red); border-color: var(--red); color: var(--paper); opacity: .85; }
.calendario__celula--neutro{ background: var(--paper-shade); border-style: dashed; }
.calendario__celula--hoje  { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════════════ */

.portao {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gap);
}
.portao__caixa {
  width: min(24rem, 100%);
  padding: 2.2rem 1.6rem 1.9rem;
  text-align: center;
}
.portao__marca {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.9rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.portao__sub { font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; }
.portao__orn { color: var(--ink-faint); letter-spacing: .5em; margin: 1rem 0 .3rem; }
.portao__erro { color: var(--red); font-size: .76rem; font-style: italic; min-height: 1.2rem; margin-top: .5rem; }

/* ══════════════════════════════════════════════════════════════════════
   AVISOS E ESTADO DE REDE
   ══════════════════════════════════════════════════════════════════════ */

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 7500;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  font-size: .74rem;
  letter-spacing: .06em;
  max-width: calc(100vw - 2rem);
  text-align: center;
  transition: transform .42s var(--overshoot);
  pointer-events: none;
}
.aviso.visivel { transform: translate(-50%, 0); }
.aviso--erro { background: var(--red); }
.aviso--ok   { background: var(--green); }

.selo-rede {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .54rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.selo-rede::before {
  content: '';
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--green);
}
.selo-rede[data-estado="offline"]::before { background: var(--ink-faint); }
.selo-rede[data-estado="pendente"]::before { background: var(--gold); }
.selo-rede[data-estado="erro"]::before { background: var(--red); }

.rodape {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rodape button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0 0 1px;
  cursor: pointer;
}

.vazio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
}
.vazio__orn { font-size: 1.6rem; letter-spacing: .5em; opacity: .5; }
.vazio__frase { font-style: italic; font-size: 1.05rem; margin-top: .6rem; text-wrap: balance; }

/* Janela pop-up estreita do One UI. */
@media (max-width: 22rem) {
  :root { --gap: .7rem; }
  .marca { font-size: .74rem; letter-spacing: .24em; }
  .modos button { padding: .38rem .42rem; font-size: .52rem; }
  .foco__titulo { font-size: clamp(1.9rem, 13vw, 2.6rem); }
  .fechamento__placar { gap: .3rem; }
}

/* Tela baixa e larga (celular deitado). */
@media (max-height: 34rem) and (orientation: landscape) {
  .foco { justify-content: flex-start; }
  .foco__titulo { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .cronometro__anel { width: 6rem; height: 6rem; }
}

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }