/* ══════════════════════════════════════════════════════════════
   CADERNO — folha de estilo única
   Referência visual: espécimes de fundição tipográfica
   (grotesca comprimida gigante, micro-labels mono, fios de 1px,
   monocromo + 1 acento, movimento expo com wipe e stagger)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root{
  /* recortes do aparelho (ilha dinâmica, barra de gestos). Ficam em
     variáveis para o CSS ler bem — e para o teste simular um iPhone. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  /* paleta padrão (noir) — sobrescrita em tempo de execução por js/palettes.js */
  --bg:#0c0c0c;
  --surface:#151515;
  --surface-2:#1d1d1d;
  --fg:#f4f2ee;
  --dim:#8b8781;
  --line:rgba(244,242,238,.22);       /* divisória decorativa */
  --line-2:rgba(244,242,238,.36);     /* borda de componente: 3:1 */
  --accent:#ff4d17;
  --accent-txt:#ff4d17;               /* o acento quando é TEXTO */
  --ok:#3ecf8e;                       /* deu certo — nunca é o acento */
  --erro:#e85e62;                     /* deu errado */
  --ink:#0c0c0c;          /* texto sobre o acento */

  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala tipográfica. São duas famílias de propósito — a grotesca pro que
     se lê e a mono pro que se mede —, mas os tamanhos tinham virado 17 e os
     pesos 6, escolhidos um a um em cada componente. Daí a sensação de "muita
     fonte". Agora são seis degraus de texto, três de display e três pesos.

     Nada de clamp no display: os três clamps antigos nunca saíam do mínimo
     dentro da faixa de telefone (6vw só cruza 2rem aos 533px de tela), então
     eram fluidez decorativa — o valor era fixo e fingia não ser. Agora é
     degrau fixo com salto declarado em duas larguras, que é o que de fato
     acontecia. */
  --t-micro:10px;    /* rótulo mono, caixa alta, tracking aberto */
  --t-mini:12px;     /* apoio: descrição de linha, legenda */
  --t-corpo:15px;    /* texto corrido */
  --t-item:17px;     /* nome de item, título de linha */
  --t-destaque:21px; /* frase de status */
  --t-num:26px;      /* número que se lê de longe, e título de bloco */

  /* display: grotesca comprimida, caixa alta. Degraus próprios porque a
     letra é outra — 32 comprimido não ocupa o que 32 de texto ocupa. */
  --d-lg:32px;       /* título de tela */
  --d-xl:44px;       /* número herói */
  --d-imersivo:54px; /* a retrospectiva, que fala mais alto de propósito */

  --peso-normal:400;
  --peso-forte:600;   /* nome de item, botão sólido */
  --peso-display:800; /* só o display */

  /* Tracking. Eram treze valores (-.05 a .2) escolhidos um a um em cada
     componente — a mesma doença que os corpos e os espaços já tinham
     curado. Aqui vira função: quanto maior e mais caixa-alta, mais o
     desenho pede aperto ou respiro, e componente novo escolhe um destes. */
  --tk-display:-.045em; /* display comprimido e número-herói */
  --tk-titulo:-.02em;   /* nome de item, título de linha, número mono */
  --tk-texto:-.01em;    /* texto de uma linha */
  --tk-mono:.06em;      /* mono em caixa baixa: valor, medida */
  --tk-micro:.12em;     /* rótulo mono em caixa alta */
  --tk-largo:.2em;      /* letreiro: o ticker da tranca, e só */

  /* Espaço. Grade de 4px: os 25 valores de gap e os 30 de padding eram
     vizinhos indistinguíveis (.5 e .55rem, .7 e .75 e .8rem) escolhidos um a
     um. Encostados na grade, viram sete degraus — e componente novo escolhe
     dentro deles. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:32px;
  --s-8:40px;

  /* Raio. Eram 12 valores de canto para 5 tipos de objeto. Agora o raio
     conta o que a coisa é: fio, controle, cartão, painel, pílula. */
  --r-fio:3px;       /* trilho, barrinha, quadradinho */
  --r-ctrl:10px;     /* campo, botão de ícone, alça */
  --r-card:14px;     /* caixa com conteúdo dentro */
  --r-painel:18px;   /* a moldura grande: calendário, total do mês */
  --r-pill:999px;

  --lift:-2px;       /* o levantar do hover — um só, não três */

  /* Luz. O acento pintado diz "chegou até aqui"; o acento aceso diz "isto
     está ligado". É o mesmo pixel com outro verbo, e em fundo quase preto a
     diferença é toda.

     REGRA: **uma coisa acesa por tela**, e ela é a coisa que você foi ali
     ver. Espalhar brilho é como se chega no vidro fosco sem perceber. Por
     isso é classe (`.acesa`), nunca padrão de componente. */
  --luz:0 0 8px color-mix(in srgb,var(--accent) 85%,transparent),
        0 0 22px color-mix(in srgb,var(--accent) 45%,transparent),
        0 0 48px color-mix(in srgb,var(--accent) 18%,transparent);
  --luz-svg:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 65%,transparent))
            drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 28%,transparent));

  /* Movimento. Eram dois easings pra tudo — entrada, saída, microfeedback e
     troca de tela usavam a mesma curva, e por isso nada tinha peso próprio.
     Agora a curva diz o que a coisa é:

       --ease      o repouso: entra e desacelera (o que já era)
       --ease-io   o que vai e volta
       --mola      o que tem massa: aparece passando um pouco do ponto e
                   assenta. É uma curva linear() de verdade, não um
                   cubic-bezier fingindo mola — dá pra ver a diferença no
                   número que pula e no visto que cai. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --mola:linear(
    0, .0033 2%, .0187 4.5%, .0776 9.2%, .3132 20%, .6079 30.5%,
    .8221 39.5%, .9515 48.5%, 1.0181 57%, 1.0345 62.5%, 1.0311 68%,
    1.0106 78%, .9981 87%, 1
  );
  --dur:.55s;
  --dur-fast:.25s;
  --dur-micro:.16s;   /* o que responde ao dedo: não pode ter latência visível */
  --dur-tela:.42s;    /* a troca de tela inteira */

  --pad:clamp(1rem,4vw,2.5rem);
  --rail:0px;
  --topbar:60px;
  --navbar:66px;
}

/* Os degraus grandes sobem em duas larguras declaradas — antes isso era um
   clamp que, no telefone, nunca saía do mínimo. */
@media (min-width:600px){:root{--d-lg:44px;--d-xl:64px;--d-imersivo:76px}}
@media (min-width:900px){:root{--d-lg:56px;--d-xl:96px;--d-imersivo:112px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-display);font-size:16px;line-height:1.45;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
::selection{background:var(--accent);color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea,select{background:none;border:0;outline:0}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);width:18px;height:18px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-fio)}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{display:block}

/* ── 2. Tipografia ─────────────────────────────────────────── */
.display{
  font-family:var(--font-display);font-weight:var(--peso-display);font-stretch:112%;
  letter-spacing:var(--tk-display);line-height:.86;text-transform:uppercase;
}
.micro{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--peso-normal);
  letter-spacing:var(--tk-micro);text-transform:uppercase;color:var(--dim);
}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tk-titulo)}
.h-xl{font-size:var(--d-xl)}
.h-lg{font-size:var(--d-lg)}

/* ── 3. Boot / splash ──────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:grid;place-items:center;
}
.boot__type{
  display:flex;font-family:var(--font-display);font-weight:var(--peso-display);font-stretch:120%;
  font-size:var(--d-xl);letter-spacing:var(--tk-display);
}
.boot__type span{
  display:block;opacity:0;transform:translateY(60%);
  animation:bootIn .7s var(--ease) forwards;
}
.boot__type span:nth-child(1){animation-delay:.02s}
.boot__type span:nth-child(2){animation-delay:.06s}
.boot__type span:nth-child(3){animation-delay:.10s}
.boot__type span:nth-child(4){animation-delay:.14s}
.boot__type span:nth-child(5){animation-delay:.18s}
.boot__type span:nth-child(6){animation-delay:.22s}
.boot__type span:nth-child(7){animation-delay:.26s}
@keyframes bootIn{to{opacity:1;transform:none}}
.boot.is-out{animation:bootOut .5s var(--ease) forwards}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* ── 4. Tela de senha ──────────────────────────────────────── */
.lock{
  position:relative;min-height:100svh;min-height:100dvh;
  display:grid;place-items:center;overflow:hidden;
  padding:calc(var(--pad) + var(--sat)) var(--pad) calc(var(--pad) + var(--sab));
}
.lock__grid{
  position:absolute;inset:-1px;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,9vw,120px) clamp(60px,9vw,120px);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 78%);
}
.lock__inner{position:relative;width:min(440px,100%);text-align:left}
.lock__eyebrow{display:block;margin-bottom:var(--s-5)}
.lock__title{font-size:var(--d-xl);margin-bottom:var(--s-3)}
.lock__sub{color:var(--dim);font-size:var(--t-corpo);max-width:34ch;margin-bottom:var(--s-8)}
.lock__form{display:grid;gap:var(--s-4)}
.lock__error{color:var(--accent-txt);min-height:14px;letter-spacing:var(--tk-micro)}
.lock__foot{margin-top:var(--s-7);line-height:1.8}

.field{display:grid;gap:var(--s-2)}
.field input,.field textarea,.field select{
  width:100%;padding:var(--s-4) 0;border-bottom:1px solid var(--line-2);
  font-size:var(--t-item);letter-spacing:var(--tk-texto);
  transition:border-color .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);opacity:.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:0}
.field select{padding:var(--s-3) 0;background:transparent}
.field select option{background:var(--surface);color:var(--fg)}

/* ── 5. Botões ─────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  text-decoration:none;
  padding:var(--s-4) var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--t-mini);letter-spacing:var(--tk-micro);text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--accent);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{color:var(--ink);border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.98)}
.btn--big{width:100%;padding:var(--s-5);font-size:var(--t-mini)}
.btn--solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--solid::before{background:var(--fg)}
.btn--solid:hover{color:var(--bg)}
.btn--ghost{border-color:var(--line);color:var(--dim)}
.btn--ghost:hover{color:var(--ink)}
.btn--danger::before{background:var(--erro)}
.btn--danger:hover{color:var(--bg);border-color:var(--erro)}
.btn--sm{padding:var(--s-3) var(--s-5);font-size:var(--t-micro);min-height:42px}

.iconbtn{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--fg);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.iconbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.iconbtn:active{transform:scale(.92)}
.swatchdot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--line)}

/* ── 6. Ticker ─────────────────────────────────────────────── */
.ticker{
  position:absolute;bottom:0;left:0;right:0;padding:var(--s-3) 0;
  border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;
}
.ticker__track{display:inline-flex;gap:var(--s-8);animation:marquee 34s linear infinite;will-change:transform}
.ticker__track span{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-largo);text-transform:uppercase;color:var(--dim)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── 7. Chrome do app ──────────────────────────────────────── */
.app{min-height:100svh;min-height:100dvh;padding-left:var(--rail)}
.topbar{
  position:sticky;top:0;z-index:40;
  height:calc(var(--topbar) + var(--sat));
  padding:var(--sat) max(var(--pad),var(--sar)) 0 max(var(--pad),var(--sal));
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
body.rolou .topbar{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent)}
/* identidade: avatar + nome, e daqui se chega ao perfil */
.ident{
  display:flex;align-items:center;gap:var(--s-3);text-align:left;flex:1;min-width:0;
  padding:var(--s-1) var(--s-2) var(--s-1) var(--s-1);margin-left:calc(-1 * var(--s-1));border-radius:var(--r-pill);
  transition:background .25s var(--ease);
}
.ident:hover,.ident.is-active{background:var(--surface-2)}
.ident__av{flex:none}
/* em tela secundária o avatar dá lugar à seta de voltar */
.ident__voltar{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);font-size:15px;line-height:1;
}
body.em-secundaria .ident:hover .ident__voltar{background:var(--fg);color:var(--bg);border-color:var(--fg)}
body.em-secundaria .ident__txt .micro{display:none}   /* sem segunda linha: o nome centraliza */
.ident__txt{display:grid;min-width:0}
.ident__n{font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);font-size:var(--t-item);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ident__txt .micro{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__right{display:flex;gap:var(--s-2);flex:none}
.iconbtn.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* avatar */
.av{
  display:grid;place-items:center;border-radius:50%;overflow:hidden;flex:none;
  background:var(--surface-2);color:var(--fg);border:1px solid var(--line);
  font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);line-height:1;
}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av--letras{background:var(--accent);color:var(--ink);border-color:transparent}
.av--grande{border-width:2px}

/* menu */
.menugrupo{display:grid;gap:var(--s-2)}
.menugrupo + .menugrupo{margin-top:var(--s-2)}
.menulista{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.menuitem{
  display:flex;align-items:center;gap:var(--s-4);text-align:left;background:var(--bg);
  padding:var(--s-4) var(--s-4);min-height:52px;transition:background .25s var(--ease);
}
.menuitem .row__t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menuitem:hover{background:var(--surface)}
.menuitem__i{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-ctrl);border:1px solid var(--line-2);flex:none;color:var(--fg)}
.menuitem__t{flex:1;min-width:0;display:grid;gap:var(--s-1)}
.atalho__seta{color:var(--dim);font-family:var(--font-mono);flex:none}

/* perfil */
.perfil{display:flex;gap:var(--s-6);flex-wrap:wrap;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-painel);padding:var(--s-5);background:var(--surface)}
.perfil__lado{display:grid;gap:var(--s-3);justify-items:center}
.perfil__foto{display:grid;place-items:center}
.perfil__campos{flex:1;min-width:220px;display:grid;gap:var(--s-4)}
.perfil__nome{font-size:var(--t-destaque);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);padding:var(--s-2) 0;border-bottom:1px solid var(--line);width:100%}
.perfil__frase{font-size:var(--t-corpo);padding:var(--s-2) 0;border-bottom:1px solid var(--line);width:100%;color:var(--dim)}
.perfil__nome:focus,.perfil__frase:focus{border-color:var(--accent);color:var(--fg)}
.atalhos{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.atalho{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);text-align:left;
  background:var(--bg);padding:var(--s-4) var(--s-5);transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.atalho:hover{background:var(--surface);padding-left:var(--s-5)}

.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:45;
  height:calc(var(--navbar) + var(--sab));
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:0 max(var(--s-1),var(--sal)) var(--sab) max(var(--s-1),var(--sar));
}
.nav__item{
  position:relative;display:grid;place-items:center;align-content:center;gap:var(--s-1);
  color:var(--dim);border-radius:var(--r-card);margin:var(--s-1) var(--s-1);padding:var(--s-2) 0;
  min-height:48px;   /* alvo de toque confortável */
  transition:color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease);
}
.nav__item svg{transition:transform .35s var(--ease)}
.nav__item:active{transform:scale(.94)}
.nav__item.is-active{color:var(--fg);background:var(--surface-2)}
.nav__item.is-active svg{transform:translateY(-1px) scale(1.06)}
.nav__item.is-active::after{
  content:"";position:absolute;bottom:.15rem;left:50%;width:14px;height:2px;
  background:var(--accent);border-radius:var(--r-fio);transform:translateX(-50%);
  animation:navMarca .35s var(--ease);
}
@keyframes navMarca{from{width:0}}
.nav__l{font-size:var(--t-mini);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);line-height:1}

.main{
  padding:var(--pad) max(var(--pad),var(--sar)) calc(var(--navbar) + var(--sab) + var(--s-8) + var(--s-2)) max(var(--pad),var(--sal));
  max-width:1180px;margin-inline:auto;
}
/* âncoras não somem atrás da barra de cima — nem da de baixo, que é fixa e
   cobre os 64px finais: rolar até um cartão e ele parar embaixo dela é o
   mesmo que não ter rolado. */
.entry,.meta,.section,.agitem,.todo,.assin{
  scroll-margin-top:calc(var(--topbar) + var(--sat) + var(--s-4));
  scroll-margin-bottom:calc(var(--navbar) + var(--sab) + var(--s-4));
}

/* ── 8. Cabeçalho de vista + troca de tela ─────────────────── */
/* O wipe de sempre, pra quem não tem View Transitions (e pro primeiro
   desenho, que não é troca de nada). */
.view{animation:viewIn .4s var(--ease) both}
@keyframes viewIn{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(10px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}

/* ── Troca de tela com View Transitions ──────────────────────
   O app trocava de tela apagando tudo e desenhando de novo com um wipe: o
   movimento não dizia PARA ONDE você foi. Agora o navegador fotografa a tela
   velha e a nova e faz a transição entre as duas — e a direção carrega a
   informação: Hoje→Mês anda pra esquerda, voltar anda pra direita, entrar
   numa tela secundária afunda, sair dela sobe.

   As barras fixas (topo, baixo, fundo vivo) ganham nome próprio pra saírem
   do retrato do miolo: sem isso elas deslizariam junto com o conteúdo, que é
   exatamente o que não pode acontecer com uma barra fixa. */
.topbar{view-transition-name:barra-topo}
.nav{view-transition-name:barra-baixo}
.fundo{view-transition-name:fundo-vivo}
.toast{view-transition-name:aviso}
/* o título da tela atravessa a troca: ele é o mesmo objeto, com outro texto */
.vhead__l .display{view-transition-name:titulo-da-tela}

html[data-vt] .view{animation:none}          /* uma animação só por troca */

::view-transition-group(root){animation-duration:var(--dur-tela)}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:var(--dur-tela);animation-timing-function:var(--ease);
  mix-blend-mode:normal;
}
::view-transition-old(titulo-da-tela),::view-transition-new(titulo-da-tela){
  animation-duration:var(--dur-tela);animation-timing-function:var(--ease);
  height:100%;object-fit:none;object-position:left top;
}

@keyframes vt-sai-esq{to{opacity:0;transform:translateX(-4%)}}
@keyframes vt-vem-dir{from{opacity:0;transform:translateX(4%)}}
@keyframes vt-sai-dir{to{opacity:0;transform:translateX(4%)}}
@keyframes vt-vem-esq{from{opacity:0;transform:translateX(-4%)}}
@keyframes vt-afunda{to{opacity:0;transform:scale(.97)}}
@keyframes vt-vem-de-fora{from{opacity:0;transform:scale(1.03)}}
@keyframes vt-sobe{to{opacity:0;transform:scale(1.03)}}
@keyframes vt-vem-de-dentro{from{opacity:0;transform:scale(.97)}}

html[data-vt="esquerda"]::view-transition-old(root){animation-name:vt-sai-esq}
html[data-vt="esquerda"]::view-transition-new(root){animation-name:vt-vem-dir}
html[data-vt="direita"]::view-transition-old(root){animation-name:vt-sai-dir}
html[data-vt="direita"]::view-transition-new(root){animation-name:vt-vem-esq}
html[data-vt="fundo"]::view-transition-old(root){animation-name:vt-afunda}
html[data-vt="fundo"]::view-transition-new(root){animation-name:vt-vem-de-fora}
html[data-vt="topo"]::view-transition-old(root){animation-name:vt-sobe}
html[data-vt="topo"]::view-transition-new(root){animation-name:vt-vem-de-dentro}

/* quem pediu menos movimento no sistema não ganha tela deslizando */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation-duration:.01ms!important;
  }
}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-7)}
.vhead__l{min-width:0}
.vhead h2{margin-top:var(--s-2)}
.vhead__r{display:flex;align-items:center;gap:var(--s-2)}

/* ── 9. Grade hairline ─────────────────────────────────────── */
.grid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cell{background:var(--bg);padding:var(--s-5) var(--s-5)}

/* ── 10. Check-in do dia ───────────────────────────────────── */
.daynav{
  display:flex;align-items:center;gap:var(--s-2);
}
.daynav__label{font-family:var(--font-mono);font-size:var(--t-mini);letter-spacing:var(--tk-micro);text-transform:uppercase;min-width:9ch;text-align:center}

/* minmax(0,1fr), nunca auto: com coluna automática a célula não desce abaixo
   do max-content do conteúdo, e a roleta — que é um trilho de 2000px com
   rolagem própria — esticava a página inteira. É a mesma regra que sumiu com
   o domingo do calendário. */
.entries{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.entry{min-width:0}
/* dia que não é o dela: sai da fila e vai pra gaveta logo abaixo. Some do
   app seria pior — remarcar terapia pra segunda é comum —, então ela fica
   a um toque, e aberta é um cartão igual aos outros. */
.entry.fora-do-dia{opacity:.62}
.entry.fora-do-dia:focus-within,.entry.fora-do-dia:hover,.entry.fora-do-dia.is-on{opacity:1}

.gaveta{border:1px dashed var(--line);border-radius:var(--r-card);overflow:hidden}
.gaveta.is-aberta{border-style:solid}
.gaveta__b{
  width:100%;min-height:52px;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);text-align:left;color:var(--dim);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.gaveta__b:hover{background:var(--surface);color:var(--fg)}
.gaveta__n{flex:none;color:var(--dim)}
.gaveta__q{
  flex:1;min-width:0;font-size:var(--t-mini);color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gaveta__s{flex:none;font-size:var(--t-destaque);line-height:1;transition:transform .3s var(--ease)}
.gaveta.is-aberta .gaveta__s{transform:rotate(45deg)}
.gaveta__l{display:grid;gap:var(--s-3);padding:0 var(--s-3) var(--s-3)}
.entry__dias{color:var(--dim);letter-spacing:var(--tk-micro)}
.entry{
  position:relative;border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5);background:var(--surface);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.entry:hover{border-color:color-mix(in srgb,var(--fg) 28%,transparent)}
.entry.is-on{border-color:var(--line-2);background:var(--surface-2)}
.entry.falta-hoje{border-left:3px solid var(--accent)}
.entry.pisca{animation:pisca 1.1s var(--ease) 2}
@keyframes pisca{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}}
.entry__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.entry__id{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.entry__emoji{font-size:var(--t-destaque);line-height:1;filter:saturate(1.1)}
.entry__label{font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);font-size:var(--t-item);line-height:1.2}
.entry__meta{display:flex;gap:var(--s-3);align-items:center}
.entry__streak{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--dim)}
.entry__ctl{margin-top:var(--s-4)}

/* toggle grande */
.tog{
  position:relative;width:100%;height:52px;border-radius:var(--r-ctrl);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-4);
  font-family:var(--font-mono);font-size:var(--t-mini);letter-spacing:var(--tk-micro);text-transform:uppercase;
  color:var(--dim);overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tog::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.tog[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.tog[aria-pressed="true"]::before{transform:none}
.tog__mark{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid currentColor;transition:transform .4s var(--ease);
}
.tog[aria-pressed="true"] .tog__mark{background:var(--ink);color:var(--accent);border-color:var(--ink)}
.tog:active{transform:scale(.995)}

/* stepper */
.step{display:flex;align-items:center;gap:var(--s-3)}
.step__btn{
  width:46px;height:46px;border-radius:var(--r-ctrl);border:1px solid var(--line-2);
  display:grid;place-items:center;font-size:var(--t-destaque);line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),transform .2s var(--ease);
}
.step__btn:hover{background:var(--fg);color:var(--bg)}
.step__btn:active{transform:scale(.9)}
.step__leitura{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:var(--s-1)}
.step__val{
  font-family:var(--font-mono);font-size:var(--t-num);font-weight:var(--peso-normal);
  font-variant-numeric:tabular-nums;
}
.step__val.is-zero{color:var(--dim)}
.step__unit{font-size:var(--t-mini);letter-spacing:var(--tk-micro);color:var(--dim)}
.pop{animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(.7);opacity:.4}100%{transform:none;opacity:1}}

/* chips rápidos */
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
.vhead .chips,.view>.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s-1)}
.vhead .chips::-webkit-scrollbar,.view>.chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;min-height:38px;
  padding:var(--s-2) var(--s-4);border:1px solid var(--line-2);border-radius:var(--r-pill);white-space:nowrap;flex:none;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--dim);
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* leitura grande de quantidade — o número que a régua abaixo move.
   Os dois botões de meia hora existem porque mira de dedo em trilho de 3px
   não acerta 7,5h: a régua dá a ordem de grandeza, eles dão o ajuste fino. */
.leitura{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-1)}
.leitura__v{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--s-2)}
.step__btn--fino{width:44px;height:44px;border-color:var(--line);color:var(--dim);font-size:var(--t-num)}
.step__btn--fino:hover{border-color:var(--line-2)}
.leitura__n{font-family:var(--font-mono);font-size:var(--t-num);font-variant-numeric:tabular-nums;letter-spacing:var(--tk-titulo)}
.leitura__n.is-zero{color:var(--dim)}
.leitura__u{letter-spacing:var(--tk-micro)}
.regua{display:flex;justify-content:space-between;margin-top:calc(-1 * var(--s-1))}

/* slider */
.slider{width:100%;-webkit-appearance:none;appearance:none;height:26px;background:transparent;margin:var(--s-1) 0}
.slider::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:var(--r-fio)}
.slider::-moz-range-track{height:3px;background:var(--line);border-radius:var(--r-fio)}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);
  margin-top:-9.5px;border:3px solid var(--bg);cursor:grab;transition:transform .2s var(--ease);
}
.slider::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--bg);border-radius:50%;background:var(--accent);cursor:grab}
.slider:active::-webkit-slider-thumb{transform:scale(1.2)}

/* ── Roleta ──────────────────────────────────────────────────
   O mostrador. A máscara nas bordas é o que faz o objeto parecer um cilindro
   girando em vez de uma fileira que acabou: o valor não some, ele se afasta. */
/* Largura explícita nos dois: o espaçador é 50% do trilho, e um flex que se
   mede pelo conteúdo faria esse 50% crescer com o próprio conteúdo. É a mesma
   armadilha do `1fr` da grade — percentual precisa de um pai com largura
   resolvida, senão a página inteira estica. */
.roleta{position:relative;padding-top:var(--s-2);width:100%;min-width:0}
.roleta__t{
  width:100%;min-width:0;
  display:flex;align-items:center;gap:var(--s-2);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.roleta__t::-webkit-scrollbar{display:none}
.roleta__ponta{flex:0 0 calc(50% - var(--roleta-item)/2 - var(--s-1))}
.roleta{--roleta-item:56px}
.roleta__v{
  flex:0 0 var(--roleta-item);scroll-snap-align:center;
  height:56px;display:grid;place-items:center;border-radius:var(--r-ctrl);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-mini);color:var(--dim);opacity:.45;
  transition:opacity var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             font-size var(--dur-fast) var(--ease),transform var(--dur-fast) var(--mola);
}
.roleta__v.is-perto{opacity:.8}
.roleta__v.is-centro{
  opacity:1;color:var(--accent-txt);font-size:var(--t-num);transform:scale(1.04);
}
/* zero escolhido continua sendo o centro, sem ser a coisa mais forte da tela */
.roleta__v.is-centro.is-zero{color:var(--fg)}
.roleta .lvl.is-zero{color:var(--fg);font-weight:var(--peso-normal)}
/* sem resposta o mostrador não finge que tem uma: o centro fica em branco */
.roleta.is-vazio .roleta__v.is-centro{color:var(--fg)}
.roleta.is-vazio .roleta__fio{opacity:.3}
/* o fio do centro — onde o valor vale */
.roleta__fio{
  position:absolute;left:50%;top:var(--s-2);width:var(--roleta-item);height:56px;
  transform:translateX(-50%);border:1px solid var(--line-2);border-radius:var(--r-ctrl);
  pointer-events:none;transition:border-color var(--dur-fast) var(--ease);
}
.roleta:focus-within .roleta__fio{border-color:var(--accent)}
.roleta__u{
  position:absolute;left:50%;top:calc(var(--s-2) + 56px + 2px);transform:translateX(calc(-50% + 0px));
  color:var(--dim);pointer-events:none;
}
.roleta .lvl{text-align:center;margin-top:var(--s-5)}

/* escala 1–5 */
.scale{display:grid;grid-auto-flow:column;gap:var(--s-2)}
/* Sem resposta, a escala não é onze caixas gritando: é um fio. O contorno
   forte só aparece no que você tocou (e no hover, que é intenção). */
.scale__dot{
  height:46px;border:1px solid var(--line);border-radius:var(--r-ctrl);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--t-mini);color:var(--dim);
  transition:all .3s var(--ease);
}
.scale__dot:hover{border-color:var(--fg);color:var(--fg)}
.scale__dot.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
/* escolher zero é uma resposta, não uma comemoração */
.scale__dot.is-on.is-zero,.meter__s.is-on.is-zero,.chip.is-on.is-zero{background:var(--surface-2);border-color:var(--fg);color:var(--fg);transform:none}

/* Medidor de escala longa (0–10). Era onze botões numerados de 29px lado a
   lado: lia como teclado numérico, e ninguém "digita" o humor. Agora é um
   medidor de verdade — enche até onde você tocou, sem dígito nenhum dentro.
   O número vive grande na nota logo abaixo, onde já morava a palavra. */
.meter{display:flex;gap:var(--s-1);align-items:flex-end;height:44px}
.meter__s{
  position:relative;flex:1;min-width:0;height:100%;border:1px solid var(--line);border-radius:var(--r-fio);
  background:transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),height .25s var(--ease);
}
/* a coluna curta tem 23px de desenho; o alvo de toque tem os 44 da caixa */
.meter__s::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}
.meter__s:hover{border-color:var(--fg)}
.meter__s.is-on{background:var(--accent);border-color:var(--accent)}
.meter__s.is-topo{border-color:var(--fg)}
/* a coluna cresce com o degrau: dá direção mesmo sem cor */
.meter__s:nth-child(1){height:52%}
.meter__s:nth-child(2){height:57%}
.meter__s:nth-child(3){height:62%}
.meter__s:nth-child(4){height:67%}
.meter__s:nth-child(5){height:72%}
.meter__s:nth-child(6){height:77%}
.meter__s:nth-child(7){height:82%}
.meter__s:nth-child(8){height:87%}
.meter__s:nth-child(9){height:92%}
.meter__s:nth-child(10){height:96%}
.meter__s:nth-child(11){height:100%}
.lvl__n{font-family:var(--font-mono);font-size:var(--t-destaque);letter-spacing:var(--tk-titulo);margin-right:var(--s-2)}
.lvl{
  margin-top:var(--s-3);font-size:var(--t-corpo);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);color:var(--accent-txt);
  min-height:1.25em;animation:rv .35s var(--ease);
}
.lvl.is-empty{color:var(--dim);font-weight:var(--peso-normal)}
.reflink{
  margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);
  text-transform:uppercase;color:var(--dim);text-decoration:underline;text-underline-offset:3px;
}
.reflink:hover{color:var(--fg)}
.refs{display:grid;gap:1px;margin-top:var(--s-3);background:var(--line);border:1px solid var(--line);border-radius:var(--r-ctrl);overflow:hidden}
.refs__r{display:flex;gap:var(--s-3);align-items:baseline;background:var(--bg);padding:var(--s-2) var(--s-3);font-size:var(--t-corpo)}
.refs__n{color:var(--dim);font-size:var(--t-mini);min-width:1.6em}
.refs__r.is-atual .refs__n{color:var(--accent-txt)}
.refs__r.is-atual{color:var(--fg)}

/* nota */
.note{
  width:100%;min-height:76px;resize:vertical;padding:var(--s-4) var(--s-4);border:1px solid var(--line-2);
  border-radius:var(--r-ctrl);background:var(--bg);font-size:var(--t-corpo);line-height:1.55;
  transition:border-color .3s var(--ease);
}
.note:focus{border-color:var(--accent)}

/* status do dia — a resposta pra "tá tudo em ordem?" */
.status{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);background:var(--surface);
  display:grid;gap:var(--s-3);
}
.status.is-ok{border-left-color:var(--ok)}
.status__topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.status__t{font-size:var(--t-destaque);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);margin-top:var(--s-1)}
.status.is-ok .status__t::before{content:"✓ ";color:var(--ok)}
.status__sub{color:var(--dim)}
.status__faltas{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.falta{
  display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);
  border:1px solid var(--accent);color:var(--accent-txt);background:transparent;
  font-size:var(--t-mini);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);
  transition:background .25s var(--ease),color .25s var(--ease),transform .2s var(--ease);
}
.falta:hover{background:var(--accent);color:var(--ink)}
.falta:active{transform:scale(.96)}

/* metas da semana, versão curta */
.semana{margin-bottom:var(--s-5)}
.semana__link{display:inline-flex;align-items:center;min-height:40px;padding:var(--s-1) 0;background:none;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.semana__link:hover{color:var(--fg)}
.semana__l{display:grid;gap:var(--s-3)}
.mini__t{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-1)}
.mini__n{font-size:var(--t-corpo);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini__v{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-mono);color:var(--dim);white-space:nowrap}
.mini__b{height:4px;background:var(--line);border-radius:var(--r-fio);overflow:hidden}
.mini__b i{display:block;height:100%;width:0;background:var(--dim);transition:width .8s var(--ease)}
.mini[data-sit="apertado"] .mini__b i,.mini[data-sit="estourou"] .mini__b i{background:var(--accent)}
.mini[data-sit="apertado"] .mini__v,.mini[data-sit="estourou"] .mini__v{color:var(--accent-txt)}
.mini[data-sit="batida"] .mini__b i{background:var(--ok)}
/* `overflow:hidden` aqui recortava a sombra do preenchimento — o brilho
   existia no CSS e era cortado fora. O arredondamento agora é do próprio
   preenchimento, que é quem precisa dele. */
.progress{position:relative;height:3px;background:var(--line);border-radius:var(--r-fio);flex:1;min-width:120px}
/* A barra do dia é a coisa acesa do check-in — a única. É pra ela que você
   olha pra saber se o dia está em ordem. */
.progress__bar{
  position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;border-radius:var(--r-fio);
  transition:width .7s var(--ease),box-shadow .7s var(--ease);box-shadow:var(--luz);
}
.status.is-ok .progress__bar{box-shadow:var(--luz),0 0 44px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ── 11. Calendário ────────────────────────────────────────── */
.cal__head{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:var(--s-2)}
.cal__head span{text-align:center;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--dim);text-transform:uppercase}
/* `1fr` é `minmax(auto,1fr)`, e o mínimo automático de uma célula com
   aspect-ratio + min-height é a própria min-height: os 54px viravam largura
   mínima onde só cabiam 50, e a sétima coluna (domingo) saía recortada pela
   borda arredondada. `minmax(0,1fr)` deixa a proporção derivar da largura. */
.cal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
}
/* o contorno do dia é desenhado por dentro da célula; nos quatro cantos da
   grade ele encostava na curva do contêiner e saía comido. Dando o mesmo raio
   às células de canto, o contorno acompanha a curvatura. */
.cal__day:first-child{border-radius:var(--r-card) 0 0 0}
.cal__day:nth-child(7){border-radius:0 var(--r-card) 0 0}
.cal__day:nth-last-child(7){border-radius:0 0 0 var(--r-card)}
.cal__day:last-child{border-radius:0 0 var(--r-card) 0}
.cal__day{
  position:relative;background:var(--bg);aspect-ratio:1/1;min-height:44px;padding:var(--s-2);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  transition:background .3s var(--ease);
}
.cal__day:hover{background:var(--surface-2)}
.cal__day.is-out{pointer-events:none}
.cal__day.is-out .cal__n,.cal__day.is-out .cal__dots{opacity:.3}
.cal__day.is-today .cal__n{color:var(--accent-txt);font-weight:var(--peso-forte)}
.cal__day.is-sel{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface)}
.cal__day.is-sel,.cal__day.is-today{z-index:1}
.cal__n{font-family:var(--font-mono);font-size:var(--t-mini);color:var(--dim)}
.cal__day.has-data .cal__n{color:var(--fg)}
.cal__dots{display:flex;flex-wrap:wrap;gap:var(--s-1);width:100%}
.dot{width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:.9}
@media (min-width:700px){.cal__day{aspect-ratio:auto;min-height:104px}}

/* o dia como pequeno gráfico: anel de cobrança, coluna de volume, marca
   de compromisso. O número fica dentro do anel. */
.cal__day{align-items:center;justify-content:center}
.cal__anel{
  position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,transparent 71%,#000 72%);
          mask:radial-gradient(closest-side,transparent 71%,#000 72%);
}
@media (min-width:700px){.cal__anel{width:46px;height:46px;margin:-23px 0 0 -23px}}
.cal__n{position:relative;font-family:var(--font-mono);font-size:var(--t-mini);color:var(--dim);z-index:1}
.cal__day.has-data .cal__n{color:var(--fg)}
.cal__day.is-fechado .cal__n{font-weight:var(--peso-forte);color:var(--fg)}
.cal__day.is-futuro{opacity:.45}
.cal__vol{
  position:absolute;left:6px;bottom:5px;height:3px;border-radius:var(--r-fio);
  width:calc((100% - 12px) * var(--v,.3));background:var(--fg);opacity:.4;
}
.cal__day.is-fechado .cal__vol{opacity:.75}
.cal__ag{
  position:absolute;top:5px;right:5px;min-width:10px;height:10px;padding:0 var(--s-1);border-radius:var(--r-pill);
  background:var(--accent);color:var(--ink);
  font-family:var(--font-mono);font-size:8px;line-height:10px;text-align:center;
}
.cal__ag.is-ok{background:var(--line-2)}
/* tarefa com dia marcado: quadrado vazado, canto de cima à esquerda.
   Sem acento — o acento já é do anel e da pílula de compromisso. */
.cal__tf{
  position:absolute;top:5px;left:5px;width:8px;height:8px;
  border:1.5px solid var(--fg);border-radius:1.5px;opacity:.75;
}
.cal__v{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:var(--t-micro);opacity:.85}
.cal--calor .cal__day.is-quente{background:color-mix(in srgb,var(--accent) calc(var(--calor,.3)*100%),var(--bg))}
.cal--calor .cal__day.is-quente .cal__n{color:var(--fg)}

.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)}
.legend__i{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-mono);color:var(--dim)}
.legend__anel{width:13px;height:13px;border-radius:50%;
  background:conic-gradient(var(--accent) 240deg,var(--line) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63%);
          mask:radial-gradient(closest-side,transparent 62%,#000 63%)}
.legend__vol{width:6px;height:13px;border-radius:var(--r-fio);background:var(--accent);opacity:.6}
.legend__calor{width:13px;height:13px;border-radius:var(--r-fio);background:linear-gradient(90deg,var(--line),var(--accent))}

.mesgraf{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap;margin-top:var(--s-6);
  border:1px solid var(--line);border-radius:var(--r-painel);padding:var(--s-5)}
.mesgraf__l{flex:1;min-width:min(220px,100%);display:grid;gap:var(--s-3)}
.mesgraf__linha{margin-top:var(--s-5);display:grid;gap:var(--s-2)}

.previa__topo{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-3)}
.previa__nota{margin-top:var(--s-3);padding:var(--s-3) var(--s-4);border-left:2px solid var(--accent);
  background:var(--surface);border-radius:0 var(--r-ctrl) var(--r-ctrl) 0;font-size:var(--t-corpo);color:var(--dim)}

/* ── 12. Lista de afazeres ─────────────────────────────────── */
.todoadd{display:flex;gap:var(--s-3);align-items:center;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);margin-bottom:var(--s-4);background:var(--surface)}
.todoadd input{flex:1;padding:var(--s-3) 0;font-size:var(--t-item)}
.tabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);overflow-x:auto;padding-bottom:var(--s-1);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.todos{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.todo{
  display:flex;align-items:center;gap:var(--s-3);background:var(--bg);padding:var(--s-3);
  transition:background .3s var(--ease),box-shadow .2s var(--ease);
  touch-action:pan-y;
}
.todo.is-star{box-shadow:inset 3px 0 0 var(--accent)}

/* pega do arrasto */
/* A alça é estreita de propósito: 34px dela eram 34px a menos de tarefa
   escrita, e o gesto de arrastar acontece no dedo que já está encostado. */
.todo__pega{margin-right:calc(-1 * var(--s-1))}
.todo__pega,.cat__pega{
  flex:none;display:grid;place-items:center;width:26px;height:44px;color:var(--dim);
  border-radius:var(--r-ctrl);cursor:grab;touch-action:none;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.todo__pega:hover,.cat__pega:hover{color:var(--fg);background:var(--surface-2)}
.todo__pega:active,.cat__pega:active{cursor:grabbing}
.todo__pega.is-off{opacity:0;pointer-events:none}
.todo.arrastando,.cat.arrastando{
  position:relative;z-index:5;cursor:grabbing;
  background:var(--surface-2);
  box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 1px var(--accent);
  /* animação com fill:forwards vence style inline — sem isto o item não anda */
  animation:none!important;opacity:1!important;
}
.arrastando-lista .todo:not(.arrastando),.arrastando-lista .cat:not(.arrastando){
  transition:transform .18s var(--ease);
}
.arrastando-lista{cursor:grabbing}
.todo:hover{background:var(--surface)}
.todo__box{
  position:relative;flex:none;width:24px;height:24px;border-radius:var(--r-ctrl);border:1px solid var(--line-2);
  display:grid;place-items:center;color:transparent;
  transition:all .3s var(--ease);
}
/* mesma ideia do check da agenda: o desenho é pequeno, o alvo não */
.todo__box::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);
}
.todo__box::after{left:-10px;right:-10px}
.todo__box:hover{border-color:var(--fg)}
.todo.is-done .todo__box{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.todo__txt{flex:1;min-width:0;font-size:var(--t-item);letter-spacing:var(--tk-texto);position:relative;word-break:break-word}
.todo__txt::after{
  content:"";position:absolute;left:0;top:50%;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.todo.is-done .todo__txt{color:var(--dim)}
.todo.is-done .todo__txt::after{transform:none}
/* Duas ações, sempre visíveis. Escondê-las no hover deixava a linha vazia
   no computador e não mudava nada no celular — e as três de antes comiam
   104px de uma tela de 393. */
.todo__act{display:flex;gap:var(--s-1);flex:none}
.todo__mais{
  position:relative;width:32px;height:32px;border-radius:var(--r-ctrl);display:grid;place-items:center;color:var(--dim);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.todo__mais::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.todo__mais:hover{background:var(--surface-2);color:var(--fg)}
.todo__feitaem{flex:none;color:var(--dim)}
.todo.is-leaving{animation:leave .32s var(--ease) forwards}
@keyframes leave{to{opacity:0;transform:translateX(24px);height:0;padding-block:0}}
/* cabeçalho de bloco de tempo — atrasadas, hoje, depois */
.grupoh{margin:var(--s-6) 0 var(--s-3)}
.grupoh:first-of-type{margin-top:var(--s-4)}
.grupoh__n{flex:none;color:var(--dim);order:3}
.grupoh.is-urgente .micro{color:var(--erro)}
.grupoh.is-urgente::after{background:var(--erro);opacity:.4}

/* data da tarefa: quando existe, ela ocupa o lugar do ícone */
.todo__sel{flex:none;color:var(--dim);letter-spacing:var(--tk-micro)}
.todo__sel.is-atrasada{color:var(--erro)}
/* largura fixa: com a data variando entre "hoje", "amanhã" e "14/09", a
   coluna do "mais" dançava de linha em linha. */
.todo__data{
  position:relative;min-width:58px;justify-content:center;height:32px;padding:0 var(--s-2);border-radius:var(--r-ctrl);
  display:grid;place-items:center;color:var(--dim);transition:color .25s var(--ease),border-color .25s var(--ease)}
.todo__data::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.todo__data:hover{color:var(--fg)}
.todo__data.is-on{color:var(--accent-txt);border:1px solid var(--line-2)}
.todo__data.is-atrasada{color:var(--erro);border-color:var(--erro)}
.todo__data .micro{color:inherit;letter-spacing:var(--tk-mono)}

.star{position:relative;color:var(--dim);width:32px;height:32px;border-radius:var(--r-ctrl);display:grid;place-items:center}
.star.is-on{color:var(--accent)}

/* ── 13. Insights ──────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:var(--s-6)}
.stat{background:var(--bg);padding:var(--s-5) var(--s-5)}
/* número ímpar de cartões não deixa buraco cinza na malha */
.stats>.stat:last-child:nth-child(odd){grid-column:1/-1}
.stat__n{font-family:var(--font-mono);font-size:var(--t-num);font-weight:var(--peso-normal);letter-spacing:var(--tk-display);display:block;line-height:1}
.stat__n small{font-size:.42em;letter-spacing:var(--tk-mono);color:var(--dim);margin-left:.2em}
.stat__l{margin-top:var(--s-2)}
.bars{display:grid;gap:var(--s-3)}
.bar__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-2)}
.bar__name{font-size:var(--t-corpo);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);display:flex;gap:var(--s-2);align-items:center}
.bar__v{font-family:var(--font-mono);font-size:var(--t-mini);color:var(--dim);margin-left:auto;white-space:nowrap}
.bar__track{height:6px;background:var(--line);border-radius:var(--r-fio);overflow:hidden}
.bar__fill{height:100%;width:0;border-radius:var(--r-fio);
  background:color-mix(in srgb,var(--fg) 34%,transparent);transition:width .9s var(--ease)}
.bar__fill.is-top{background:var(--accent)}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-1);margin-top:var(--s-3);max-width:460px}
.heat__c{max-height:56px}
.heat__c{aspect-ratio:1;border-radius:var(--r-fio);background:var(--line);position:relative}
.heat__lbl{text-align:center;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--dim);letter-spacing:var(--tk-mono)}
.tips{display:grid;gap:var(--s-3);margin-top:var(--s-3)}
.tip{
  border:1px solid var(--line);border-left:2px solid var(--line-2);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s-4) var(--s-5);background:var(--surface);
}
.tip__k{margin-bottom:var(--s-2)}
.tip__t{font-size:var(--t-corpo);line-height:1.5}
.tip__t b{font-weight:var(--peso-forte)}

/* ── 13b. Metas ────────────────────────────────────────────── */
.metas{display:grid;gap:var(--s-3)}
.meta{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4) var(--s-4);background:var(--surface)}
.meta.sem-meta{opacity:.72}
.meta__cab{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);min-width:0}
.meta__e{font-size:var(--t-item);flex:none}
.meta__dias{flex:none;color:var(--dim);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px var(--s-2)}
.meta__n{flex:1;min-width:0;font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta__prog{display:flex;align-items:baseline;gap:var(--s-2);flex:none}
.meta__v{font-family:var(--font-mono);font-size:var(--t-mini)}
.meta__ctl{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.meta__cad,.meta__on{display:flex;align-items:center;gap:var(--s-2);cursor:pointer}
.meta__campos{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-left:auto}
.meta__num{
  width:64px;padding:var(--s-2) var(--s-2);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--t-mini);text-align:center;color:var(--fg);background:transparent;
  -moz-appearance:textfield;appearance:textfield;   /* o − e o + já são os botões */
}
.meta__num::-webkit-outer-spin-button,
.meta__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.meta__campos select:disabled,.meta__num:disabled{opacity:.4}

/* ── 14. Ajustes ───────────────────────────────────────────── */
.section{margin-bottom:var(--s-8)}
.section__h{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.section__h::after{content:"";flex:1;height:1px;background:var(--line)}
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s-3)}
.pal{
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3);text-align:left;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.pal:hover{transform:translateY(var(--lift))}
.pal.is-on{border-color:var(--accent)}
.pal__sw{display:flex;height:34px;border-radius:var(--r-ctrl);overflow:hidden;margin-bottom:var(--s-2)}
.pal__sw i{flex:1}
.pal__sw i:first-child{flex:2}
.pal__n{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);text-transform:uppercase}
.cats{display:grid;gap:var(--s-2);max-width:880px}
.cat{
  display:flex;align-items:center;gap:var(--s-3);min-width:0;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-3) var(--s-4);background:var(--surface);
}
.cat>.btn,.cat>.iconbtn{flex:none}
.cat__grip{color:var(--dim);cursor:grab;touch-action:none;padding:var(--s-1)}
.cat[draggable="true"]{cursor:grab}
.cat.is-drag{opacity:.35}
.cat.is-over{border-color:var(--accent)}
.cat__i{font-size:var(--t-item)}
.cat__n{flex:1;min-width:0;font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-item)}
.cat__t{flex:none;white-space:nowrap;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--dim);border:1px solid var(--line);padding:var(--s-1) var(--s-2);border-radius:var(--r-pill)}
@media (max-width:520px){.cat__t{display:none}.cat__i{order:-2}.cat__n{order:-1;flex:1 1 60%}.cat .right{margin-left:auto}}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--line);max-width:880px}
/* a mesma linha, quando ela é a escolha em si (a folha da ordem da lista) */
.rowbtn{width:100%;text-align:left;padding:var(--s-4) var(--s-3);border-radius:var(--r-ctrl);transition:background .25s var(--ease)}
.rowbtn:hover{background:var(--surface)}
.rowbtn__m{
  flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--ink);
}
.rowbtn.is-on .rowbtn__m{background:var(--accent);border-color:var(--accent)}
.rowbtn.is-on .row__t{color:var(--accent-txt)}

/* categoria a categoria, no fechamento do mês */
.mesl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.mesl__r{display:flex;align-items:center;gap:var(--s-3);background:var(--bg);padding:var(--s-3) var(--s-4);min-height:44px}
.mesl__e{flex:none;font-size:var(--t-item)}
.mesl__n{flex:1;min-width:0;font-size:var(--t-corpo);letter-spacing:var(--tk-texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mesl__v{flex:none;font-size:var(--t-mini)}
.mesl__d{flex:none;min-width:4.5ch;text-align:right;color:var(--dim)}
.mesl__d.is-bom{color:var(--ok)}
.mesl__d.is-ruim{color:var(--dim)}

/* busca na lista de afazeres */
.busca{
  display:flex;align-items:center;gap:var(--s-3);margin:var(--s-3) 0;
  padding:0 var(--s-3);min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-ctrl);background:var(--bg);
  transition:border-color .25s var(--ease);
}
.busca:focus-within{border-color:var(--accent)}
.busca__l{display:grid;place-items:center;flex:none;color:var(--dim)}
.busca__i{
  flex:1;min-width:0;background:transparent;border:0;padding:var(--s-2) 0;
  font-size:var(--t-corpo);color:var(--fg);
}
.busca__i::-webkit-search-cancel-button{display:none}
.busca__i:focus{outline:none}
.busca__x{flex:none;min-height:44px;display:grid;place-items:center;color:var(--dim);white-space:nowrap}
.busca__x:hover{color:var(--fg)}

/* a ordem em vigor, acima da lista */
.ordemlinha{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-3) 0 var(--s-2)}
.ordembtn{
  display:inline-flex;align-items:center;gap:var(--s-2);min-height:38px;padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--dim);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.ordembtn:hover{border-color:var(--line-2);color:var(--fg)}
.ordembtn__i{display:grid;place-items:center;flex:none}
.ordemlinha__n{color:var(--dim);flex:1;min-width:0;text-align:right}
.row__l{min-width:0}
.row__t{font-size:var(--t-item);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto)}
.row__d{font-size:var(--t-mini);color:var(--dim);margin-top:var(--s-1)}
.switch{
  position:relative;width:46px;height:26px;border-radius:var(--r-pill);border:1px solid var(--line-2);flex:none;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* o interruptor tem 26px de altura por desenho; o alvo de toque tem 44 */
.switch::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--dim);transition:transform .35s var(--ease),background .3s var(--ease);
}
.switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--ink)}

/* os sete dias da semana como chaves — todos ligados é "todo dia" */
.diasem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-1);margin:var(--s-2) 0}
.diasem__d{
  min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-ctrl);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-mono);text-transform:uppercase;
  color:var(--dim);transition:all .25s var(--ease);
}
.diasem__d:hover{border-color:var(--fg);color:var(--fg)}
.diasem__d.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink)}

.lvledit{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-ctrl);overflow:hidden;max-height:290px;overflow-y:auto}
.lvledit__r{display:flex;align-items:center;gap:var(--s-3);background:var(--bg);padding:var(--s-2) var(--s-3)}
.lvledit__n{color:var(--accent-txt);font-size:var(--t-mini);min-width:1.8em}
.lvledit input{flex:1;min-width:0;padding:var(--s-2) 0;font-size:var(--t-corpo);border-bottom:1px solid transparent}
.lvledit input:focus{border-bottom-color:var(--accent)}

/* ── 15. Sheet ─────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;justify-items:center}
.sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}}
.sheet__panel{
  position:relative;width:min(560px,100%);max-height:88svh;overflow:auto;overscroll-behavior:contain;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-painel) var(--r-painel) 0 0;
  padding:var(--s-5) var(--pad) calc(var(--s-6) + var(--sab));
  animation:sheetUp .5s var(--ease);
}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet.is-closing .sheet__panel{animation:sheetDown .3s var(--ease-io) forwards}
.sheet.is-closing .sheet__scrim{animation:fade .3s var(--ease) reverse forwards}
@keyframes sheetDown{to{transform:translateY(100%)}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.sheet__title{font-size:var(--t-destaque);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo)}
.sheet__body{display:grid;gap:var(--s-4)}
.sheet__actions{display:flex;gap:var(--s-3);margin-top:var(--s-3)}
.sheet__actions .btn{flex:1}

/* ── 16. Toast ─────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--navbar) + var(--sab) + 1rem);z-index:70;
  transform:translate(-50%,140%);opacity:0;pointer-events:none;
  background:var(--fg);color:var(--bg);border-radius:var(--r-pill);padding:var(--s-3) var(--s-5);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);text-transform:uppercase;white-space:nowrap;
  transition:transform .5s var(--ease),opacity .3s var(--ease);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ── 17. Utilidades / vazios ───────────────────────────────── */
.empty{border:1px dashed var(--line);border-radius:var(--r-card);padding:var(--s-8) var(--s-6);text-align:center;color:var(--dim)}
.empty b{display:block;color:var(--fg);font-size:var(--t-item);margin-bottom:var(--s-2);letter-spacing:var(--tk-titulo)}
.empty p{font-size:var(--t-corpo)}
.stack{display:grid;gap:var(--s-3)}
.muted{color:var(--dim)}
.right{margin-left:auto}
.wrap{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* entrada na rolagem */
.rolar{opacity:0;transform:translateY(18px)}
.rolar.vis{animation:sobe .55s var(--ease) forwards}
@keyframes sobe{to{opacity:1;transform:none}}

/* reveal com stagger */
.rv{opacity:0;transform:translateY(14px);animation:rv .6s var(--ease) forwards;animation-delay:calc(var(--i,0)*var(--step,45ms))}
@keyframes rv{to{opacity:1;transform:none}}

/* ── 18. Desktop ───────────────────────────────────────────── */
@media (min-width:900px){
  :root{--rail:230px;--navbar:0px}
  .topbar{padding-left:var(--pad)}
  :root{--navbar:0px}
  .nav{
    top:0;bottom:0;right:auto;width:var(--rail);height:100svh;
    grid-auto-flow:row;grid-auto-columns:none;grid-auto-rows:min-content;
    align-content:start;gap:var(--s-1);padding:calc(var(--topbar) + var(--s-7)) var(--s-4) var(--s-4);
    border-top:0;border-right:1px solid var(--line);
  }
  .nav__item{
    grid-auto-flow:column;justify-content:start;justify-items:start;gap:var(--s-4);
    padding:var(--s-3) var(--s-4);border-radius:var(--r-card);width:100%;margin:0;min-height:0;
    grid-template-columns:22px 1fr;
  }
  .nav__item.is-active::after{
    top:50%;bottom:auto;left:0;width:2px;height:16px;transform:translateY(-50%);
    animation:navMarcaV .35s var(--ease);
  }
  @keyframes navMarcaV{from{height:0}}
  .nav__item:hover{color:var(--fg);background:var(--surface)}
  .nav__l{font-size:var(--t-corpo)}
  .toast{bottom:2rem;left:calc(50% + var(--rail)/2)}
  .entries{grid-template-columns:repeat(2,1fr);align-items:start}
  .entry--wide{grid-column:1/-1}
}


/* ── 20. Faixa de dias (voltar e preencher) ────────────────── */
.strip{
  display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;
  margin:calc(-1 * var(--s-2)) 0 var(--s-4);padding:var(--s-2) var(--s-1);scroll-snap-type:x proximity;
}
.strip::-webkit-scrollbar{display:none}
.strip__d{
  position:relative;flex:none;width:52px;padding:var(--s-2) 0 var(--s-2);border-radius:var(--r-card);
  border:1px solid var(--line-2);display:grid;justify-items:center;gap:var(--s-1);
  scroll-snap-align:center;transition:all .3s var(--ease);
}
.strip__d:hover{border-color:var(--fg)}
.strip__w{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--dim);text-transform:uppercase}
.strip__n{font-size:var(--t-item);font-weight:var(--peso-forte);line-height:1}
.strip__s{width:5px;height:5px;border-radius:50%;background:transparent;margin-top:var(--s-1)}
.strip__d.is-filled .strip__s{background:var(--dim)}
.strip__d.is-closed .strip__s{background:var(--accent)}
.strip__d.is-today{border-color:color-mix(in srgb,var(--fg) 45%,transparent)}
.strip__d.is-sel{background:var(--accent);border-color:var(--accent)}
.strip__d.is-sel .strip__w,.strip__d.is-sel .strip__n{color:var(--ink)}
.strip__d.is-sel .strip__s{background:var(--ink)}
.daypick{
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:var(--s-2) var(--s-3);
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--dim);
  background:transparent;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.daypick:hover{border-color:var(--fg);color:var(--fg)}
/* o ícone nativo do seletor é preto: inverte só nas paletas escuras */
.daypick::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
[data-palette="noir"] .daypick::-webkit-calendar-picker-indicator,
[data-palette="acido"] .daypick::-webkit-calendar-picker-indicator,
[data-palette="neon"] .daypick::-webkit-calendar-picker-indicator,
[data-palette="oceano"] .daypick::-webkit-calendar-picker-indicator,
[data-palette="mono"] .daypick::-webkit-calendar-picker-indicator{filter:invert(1)}

/* ── 21. Aviso / chamada ───────────────────────────────────── */
.alert{
  display:grid;gap:var(--s-2);width:100%;text-align:left;
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);
  background:var(--surface);font-size:var(--t-corpo);line-height:1.5;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
button.alert:hover{transform:translateX(3px);border-color:var(--accent)}
.alert b{color:var(--accent-txt);font-weight:var(--peso-forte)}
.alert--warn{border-left-color:var(--dim)}

/* ── 22. Segmentado (semana | mês) ─────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s-1);gap:var(--s-1)}
.seg__b{
  display:inline-flex;align-items:center;min-height:38px;
  padding:var(--s-2) var(--s-5);border-radius:var(--r-pill);font-family:var(--font-mono);
  font-size:var(--t-micro);letter-spacing:var(--tk-micro);text-transform:uppercase;color:var(--dim);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.seg__b:hover{color:var(--fg)}
.seg__b.is-on{background:var(--accent);color:var(--ink)}

/* ── 23. Grade da semana (preenchimento em lote) ───────────── */
/* Sete dias em colunas, categorias em linhas: a página rola só pra baixo.
   Nada de arrastar pro lado — trocar de semana é botão. */
.wgrid__head{
  position:sticky;top:var(--topbar);z-index:20;
  display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-1);
  padding:var(--s-2) calc(var(--s-3) + 1px);margin-bottom:var(--s-2);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wgrid__day{
  display:grid;justify-items:center;gap:var(--s-1);padding:var(--s-2) 0;border-radius:var(--r-ctrl);
  border:1px solid transparent;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.wgrid__day:hover{background:var(--surface-2)}
.wgrid__day.is-today{border-color:var(--accent)}
.wgrid__day.is-future{opacity:.4}
.wgrid__wd{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-mono);color:var(--dim);text-transform:uppercase}
.wgrid__n{font-size:var(--t-corpo);font-weight:var(--peso-forte);line-height:1}
.wgrid__dot{width:5px;height:5px;border-radius:50%;background:transparent}
.wgrid__dot.is-filled{background:var(--dim)}
.wgrid__dot.is-closed{background:var(--accent)}

.wgrid{display:grid;gap:var(--s-2)}
.wgrid__row{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3);background:var(--surface)}
.wgrid__row--close{background:transparent;border-style:dashed}
.wgrid__cat{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);min-width:0}
.wgrid__emoji{font-size:var(--t-item);flex:none}
.wgrid__label{flex:1;min-width:0;font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);font-size:var(--t-corpo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* dia que a categoria não cobra: fica no lugar, mas não acusa falta */
.batch__cell.is-fora{opacity:.3;border-style:dashed}
.batch__cell.is-fora.is-on{opacity:1;border-style:solid}
.wgrid__dias{color:var(--dim);opacity:.8}
.wgrid__goal{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-mono);color:var(--dim);flex:none}
.wgrid__cells{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-1)}

.batch__cell{
  background:var(--bg);height:44px;border-radius:var(--r-ctrl);border:1px solid var(--line-2);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--t-mini);color:var(--fg);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease);
}
.batch__cell:hover:not(:disabled){border-color:var(--fg)}
.batch__cell:active:not(:disabled){transform:scale(.94)}
.batch__cell:disabled{opacity:.25;cursor:not-allowed}
.batch__cell.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:var(--peso-forte)}
.batch__cell.is-on.is-reduce{background:color-mix(in srgb,var(--fg) 22%,transparent);border-color:transparent;color:var(--fg)}
.batch__cell.is-on.is-zero{background:transparent;border-color:var(--line);color:var(--dim);font-weight:var(--peso-normal)}
.batch__close{color:var(--dim);opacity:.5}
.batch__close:hover{opacity:1}
.batch__close.is-on{background:var(--accent);border-color:var(--accent);color:var(--ink);opacity:1}

/* ── 24. Sincronia ─────────────────────────────────────────── */
.syncchip{
  display:flex;align-items:center;gap:var(--s-2);height:38px;padding:0 var(--s-4);
  border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--dim);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.syncchip:hover{border-color:var(--fg);color:var(--fg)}
.syncchip__dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.syncchip[data-state="ok"] .syncchip__dot{background:var(--ok)}
.syncchip[data-state="pending"] .syncchip__dot{background:var(--accent)}
.syncchip[data-state="error"] .syncchip__dot{background:var(--erro)}
.syncchip[data-state="syncing"] .syncchip__dot{background:var(--accent);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.syncchip__t{color:inherit}
@media (max-width:560px){.syncchip__t{display:none}.syncchip{padding:0;width:38px;justify-content:center}}
.syncstat{display:flex;align-items:flex-start;gap:var(--s-3);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4) var(--s-5);background:var(--surface)}
.syncstat__dot{width:9px;height:9px;border-radius:50%;background:var(--dim);margin-top:var(--s-2);flex:none}
.syncstat__dot[data-state="ok"]{background:var(--ok)}
.syncstat__dot[data-state="pending"]{background:var(--accent)}
.syncstat__dot[data-state="error"]{background:var(--erro)}
.minisel{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:var(--s-2) var(--s-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);color:var(--fg);background:transparent}
.toast__act{
  margin-left:var(--s-3);padding-left:var(--s-3);border-left:1px solid color-mix(in srgb,var(--bg) 35%,transparent);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);text-transform:uppercase;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
}
.toast{display:flex;align-items:center}
.toast.has-act{pointer-events:auto}
/* com um modal aberto, o aviso sobe pro topo pra não cobrir os botões */
body.has-sheet .toast{bottom:auto;top:calc(var(--topbar) + 1rem);transform:translate(-50%,-140%)}
body.has-sheet .toast.is-on{transform:translate(-50%,0)}


/* ── 27. Retrospectiva ─────────────────────────────────────── */
body.modo-imersivo .topbar,body.modo-imersivo .nav{display:none}
body.modo-imersivo .main{padding:0;max-width:none}

.resumo{
  position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr;
  padding:calc(var(--sat) + var(--s-4)) 0 calc(var(--sab) + var(--s-4));
  outline:none;overflow:hidden;
}
.resumo__topo{display:grid;gap:var(--s-3);padding:0 var(--pad)}
.resumo__trilhas{display:flex;gap:var(--s-1)}
.resumo__trilha{flex:1;height:3px;border-radius:var(--r-fio);background:color-mix(in srgb,var(--fg) 22%,transparent);overflow:hidden}
.resumo__trilha.is-feita{background:var(--fg)}
.resumo__trilha.is-atual{background:color-mix(in srgb,var(--fg) 22%,transparent);position:relative}
.resumo__trilha.is-atual::after{
  content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;
  animation:trilha .5s var(--ease) forwards;
}
@keyframes trilha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.resumo__acoes{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.resumo__palco{
  position:relative;display:grid;align-items:center;padding:0 var(--pad);
  min-height:min(70svh,600px);cursor:pointer;user-select:none;
}
/* o cartão de gráfico ancora no topo: o desenho é o assunto, e centralizar
   empurrava metade dele pra baixo da dobra */
.resumo__palco{align-items:stretch}

/* A altura mora no palco, não no cartão: com `min-height` no cartão, um
   card de duas linhas abria 400px de vazio dentro dele e as nove telas
   ficavam com a mesma cadência. Agora o palco reserva a tela e cada cartão
   ocupa o que precisa — capa centrada, cartão de gráfico ancorado no topo,
   o de fechamento embaixo. */
.card{
  display:grid;gap:var(--s-4);justify-items:start;align-content:end;
  min-height:100%;max-width:820px;margin-inline:auto;width:100%;
  padding-bottom:var(--s-6);
  animation:cardEntra .5s var(--ease) both;
}
/* Cada família usa a tela de um jeito, senão as nove viram a mesma tela:
   a capa se centra, o cartão de gráfico espalha (número em cima, desenho no
   meio, frase embaixo) e os de texto encostam no rodapé, como story. */
.card--capa{align-content:center;padding-bottom:0}
/* Cartão de gráfico em duas famílias, não em cinco pedaços soltos: o texto
   se agrupa no alto e o desenho + a frase flutuam juntos no que sobra. Com
   `space-between` cada elemento ia parar num canto e o cartão desmanchava. */
.card:has(.card__g):not(.card--capa):not(.card--poster){
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s-3);padding:var(--s-5) 0 var(--s-6);
}
.card:has(.card__g):not(.card--capa):not(.card--poster) .card__t{margin-bottom:var(--s-2)}
.card:has(.card__g):not(.card--capa):not(.card--poster) .card__g{margin-top:auto}
.card:has(.card__g):not(.card--capa):not(.card--poster) .card__nota{margin-bottom:auto}
.card--fim{align-content:end}
@keyframes cardEntra{from{opacity:0;transform:scale(1.04)}}
.card__olho{color:var(--accent-txt);letter-spacing:var(--tk-largo)}
.card__t{font-size:var(--d-imersivo);line-height:.88}
.card:has(.card__g) .card__t{font-size:var(--d-lg)}
.card:has(.card__g) .card__num{font-size:var(--d-xl)}
.card:has(.card__g){gap:var(--s-3)}
.card__linha{display:block}
.card__p{
  display:inline-block;
  animation:palavra .62s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms + 120ms);
}
@keyframes palavra{
  from{opacity:0;transform:translateY(.42em) rotate(2deg);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(-20% -20% -20% -20%)}
}
.card__numlinha{display:flex;align-items:baseline;gap:var(--s-1);animation:palavra .7s var(--ease) both}
.card__num{
  font-size:var(--d-imersivo);line-height:.9;letter-spacing:var(--tk-display);color:var(--accent-txt);
  font-variant-numeric:tabular-nums;
}
.card__suf{font-family:var(--font-mono);font-size:var(--t-destaque);color:var(--dim)}
.card__nota{
  font-size:var(--t-item);color:var(--dim);max-width:34ch;line-height:1.5;
  animation:palavra .7s var(--ease) both;animation-delay:.5s;
}
/* o gráfico entra depois do texto, como quem completa a frase */
.card__g{width:100%;max-width:520px;animation:grafEntra .7s var(--ease) .55s both}
@keyframes grafEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card__g-linha{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.card__g .micro{color:var(--dim)}
.card__g .g-malha{grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:var(--s-1);margin-bottom:var(--s-3)}
.card__g .g-barra__l{font-size:var(--t-corpo)}

.card__escada{display:flex;align-items:flex-end;gap:var(--s-1)}
.card__degrau{width:22px;border-radius:var(--r-fio) var(--r-fio) 1px 1px;background:var(--line);
  animation:degrauSobe .5s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + .6s)}
.card__degrau.is-feito{background:var(--accent);opacity:.55}
.card__degrau.is-atual{background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}
@keyframes degrauSobe{from{opacity:0;transform:scaleY(.2);transform-origin:bottom}to{opacity:1;transform:none}}
.card__escada-pe{flex:1;min-width:min(200px,100%);display:grid;gap:var(--s-2)}

.card__placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--s-4);width:100%;max-width:520px}
.card__placar-i{display:grid;gap:var(--s-1);border-left:2px solid var(--accent);padding-left:var(--s-3);
  animation:palavra .6s var(--ease) both;animation-delay:calc(var(--i,0)*90ms + .7s)}
.card__placar-n{font-size:var(--t-num);font-weight:var(--peso-forte);letter-spacing:var(--tk-display);line-height:1}

/* Piscava pra sempre. Uma dica que nunca para de chamar deixa de ser dica e
   vira ruído — entra uma vez e fica quieta. */
.card__dica{margin-top:var(--s-5);color:var(--dim);animation:pisca-dica .9s var(--ease) 1.2s both}
@keyframes pisca-dica{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Precisa vencer `.card:has(.card__g) .card__t`, que tem três classes: a
   capa também carrega um gráfico, e por isso o título dela nunca chegava a
   usar o degrau imersivo que existia justamente pra ela. */
.card.card--capa .card__t{font-size:var(--d-imersivo)}

/* ── O pôster do período ──────────────────────────────────────
   Uma palavra segurando a composição e o mês escrito como texto corrido.
   Veio de calendário de pôster: sem grade, sem tabela — a hierarquia toda
   em cor, peso e um círculo. */
/* A palavra e o calendário são UM bloco, não topo e rodapé. A regra geral
   empurra o gráfico pro fim do cartão; aqui ela é desfeita de propósito —
   pôster é composição, e composição não tem buraco no meio. */
.card--poster{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:var(--s-5);padding:var(--s-5) 0 var(--s-6);
}
.card--poster .card__g{margin:0;width:100%}
.card--poster .card__nota{margin:0;color:var(--dim);font-size:var(--t-corpo)}
.card__palavra{
  font-size:clamp(44px,15vw,96px);line-height:.82;font-weight:var(--peso-display);
  letter-spacing:var(--tk-display);text-transform:uppercase;
  margin:0;text-wrap:balance;
}
.g-cal{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin:0;
  font-family:var(--font-mono);font-size:var(--t-item);font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--dim) 65%,transparent);
}
.g-cal__d{position:relative;display:inline-flex;align-items:flex-start;line-height:1}
.g-cal__d sup{font-size:.6em;margin-left:1px;opacity:.7}
.g-cal__d.is-dom{opacity:.55}
.g-cal__d.is-cheio{color:var(--fg)}
/* dia fechado ganha o círculo — é a única marca desenhada do pôster */
.g-cal__d.is-fechado::after{
  content:"";position:absolute;inset:-5px -7px -4px -6px;
  border:1px solid color-mix(in srgb,var(--fg) 45%,transparent);border-radius:var(--r-pill);
}
.g-cal__d.is-hoje{color:var(--accent-txt)}
.g-cal__d.is-hoje::after{border-color:var(--accent)}
@keyframes calEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card--fim{justify-items:start}

/* um tom diferente por cartão, sem sair da paleta */
.resumo__palco::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 20% 15%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
  animation:brilho .8s var(--ease) both;
}
.resumo__palco[data-cartao="nivel"]::before{background:radial-gradient(70% 60% at 80% 20%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%)}
.resumo__palco[data-cartao="fim"]::before{background:radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%)}
.resumo__palco[data-cartao="capa"]::before{background:radial-gradient(70% 55% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%)}
.resumo__palco[data-cartao="assinaturas"]::before{background:radial-gradient(60% 50% at 90% 60%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)}
.resumo__palco[data-cartao="compromissos"]::before{background:radial-gradient(60% 50% at 10% 70%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)}
.resumo__palco[data-cartao="limpos"]::before{background:radial-gradient(70% 60% at 50% 50%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
@keyframes brilho{from{opacity:0}to{opacity:1}}

/* ── 25. Nível e conquistas ────────────────────────────────── */
.level{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5) var(--s-5);background:var(--surface)}
.level__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.level__n{font-size:var(--t-num);margin:var(--s-2) 0 var(--s-2)}
.level__l{color:var(--dim);font-size:var(--t-corpo);max-width:44ch}
.level__xp{text-align:right}
.level__xp .stat__n{font-size:var(--t-num)}
.level__bar{height:6px;background:var(--line);border-radius:var(--r-fio);overflow:hidden;margin:var(--s-5) 0 var(--s-3)}
.level__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1s var(--ease)}

.levelline{
  display:flex;align-items:center;gap:var(--s-3);width:100%;margin-bottom:var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3) var(--s-4);background:var(--surface);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.levelline:hover{border-color:var(--accent);transform:translateY(var(--lift))}
.levelline__n{font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo);font-size:var(--t-corpo);white-space:nowrap}
.levelline__bar{flex:1;min-width:40px;height:4px;background:var(--line);border-radius:var(--r-fio);overflow:hidden}
.levelline__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1s var(--ease)}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s-3)}
.badge{
  position:relative;display:grid;gap:var(--s-1);justify-items:start;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4) var(--s-4);min-height:112px;
  background:var(--surface);opacity:.55;overflow:hidden;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.badge:hover{transform:translateY(var(--lift));border-color:var(--fg);opacity:.85}
.badge.is-got{opacity:1;border-color:var(--accent)}
.badge.is-got:hover{border-color:var(--accent)}
.badge__e{font-size:var(--t-num);line-height:1;filter:grayscale(1)}
.badge.is-got .badge__e{filter:none}
.badge__n{font-size:var(--t-corpo);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto);line-height:1.25}
.badge__h{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tk-micro);text-transform:uppercase;color:var(--dim);margin-top:auto}
.badge__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.badge__bar i{display:block;height:100%;background:var(--accent);opacity:.7}

.award{display:flex;gap:var(--s-4);align-items:center;border:1px solid var(--accent);border-radius:var(--r-card);padding:var(--s-5);background:var(--surface)}
.award--level{border-width:2px}
.award__e{font-size:2.6rem;line-height:1;animation:award .8s var(--ease)}
@keyframes award{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none;opacity:1}}
.award__n{font-size:var(--t-destaque);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo)}
.award__d{color:var(--dim);font-size:var(--t-corpo);margin-top:var(--s-1)}

/* ── 30. Fundo vivo ────────────────────────────────────────── */
/* Três manchas da paleta, presas à tela, que andam e trocam de dominância
   conforme a página rola: no topo manda a mancha de cima, embaixo manda a
   de baixo. É a única coisa do app que se move sozinha, então tem que ser
   barata: só `transform` e `opacity` sobre gradiente, sem blur e sem filtro
   — e o JS escreve uma variável só por quadro (js/ui.js → fundoVivo).

   As cores saem de --accent e --fg, então trocar de paleta troca o fundo
   junto, com transição. O teto de opacidade é medido em
   tools/test-contraste.mjs: o texto continua legível em cima da mancha
   mais forte, em todas as oito paletas. */
.fundo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.fundo__b{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--tom),transparent 68%);
  transition:background .8s var(--ease),opacity .8s var(--ease);
  will-change:transform,opacity;
}
.fundo__b--1{
  --tom:color-mix(in srgb,var(--accent) 9%,transparent);
  width:82vmax;height:82vmax;top:-34vmax;left:-22vmax;
  transform:translate3d(calc(var(--r,0) * 6vmax),calc(var(--r,0) * -190px),0);
  opacity:calc(1 - var(--r,0) * .72);
}
.fundo__b--2{
  --tom:color-mix(in srgb,var(--accent) 7%,transparent);
  width:92vmax;height:92vmax;bottom:-46vmax;right:-26vmax;
  transform:translate3d(calc(var(--r,0) * -5vmax),calc(var(--r,0) * -300px),0);
  opacity:calc(.18 + var(--r,0) * .82);
}
.fundo__b--3{
  --tom:color-mix(in srgb,var(--fg) 3%,transparent);
  width:64vmax;height:64vmax;top:26%;left:24%;
  transform:translate3d(0,calc(var(--r,0) * -120px),0) scale(calc(1 + var(--r,0) * .18));
  opacity:.7;
}
/* movimento desligado (ou reduzido no sistema): o fundo fica, parado */
[data-motion="off"] .fundo__b{transform:none!important;opacity:.5!important}
@media (prefers-reduced-motion:reduce){
  .fundo__b{transform:none!important;opacity:.5!important}
}
/* o conteúdo vive acima do fundo. Só o main precisa: topbar, nav e toast já
   são posicionados e já têm z-index próprio — declarar position de novo aqui
   derrubou a barra de baixo pro meio da página. */
.main{position:relative;z-index:1}
/* na retrospectiva o fundo dela já manda; este some pra não somar dois brilhos */
body.modo-imersivo .fundo{opacity:0;transition:opacity .4s var(--ease)}

/* ── 28. Gráficos (js/graficos.js) ─────────────────────────── */
.g-anel__caixa{position:relative;display:grid;place-items:center;flex:none}
.g-anel{position:absolute;inset:0}
.g-anel__meio{position:relative;display:grid;place-items:center;gap:var(--s-1);text-align:center}
.g-anel__n{font-size:var(--t-num);font-weight:var(--peso-forte);letter-spacing:var(--tk-titulo)}
.g-anel__suf{font-size:var(--t-micro)}

.g-barras{display:grid;gap:var(--s-2);width:100%}
.g-barra{display:grid;grid-template-columns:minmax(0,1fr) 2.2fr auto;align-items:center;gap:var(--s-3)}
.g-barra__l{font-size:var(--t-corpo);letter-spacing:var(--tk-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-barra__trilho{height:10px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.g-barra__fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);opacity:.55}
.g-barra__fill.is-top{opacity:1}
.g-barra__v{font-size:var(--t-mini);color:var(--dim);min-width:3.5ch;text-align:right}

.g-colunas{display:flex;align-items:flex-end;gap:var(--s-2);width:100%}
.g-coluna{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-1);height:100%;justify-content:flex-end}
.g-coluna__b{width:100%;border-radius:var(--r-fio) var(--r-fio) var(--r-fio) var(--r-fio);background:var(--accent);opacity:.42;min-height:3px}
.g-coluna__b.is-top{opacity:1}
.g-coluna__l,.g-coluna__v{font-size:var(--t-micro);letter-spacing:var(--tk-mono)}
.g-coluna__v{color:var(--dim)}

.g-malha{display:grid;grid-template-columns:repeat(auto-fill,minmax(9px,1fr));gap:var(--s-1);width:100%}
.g-quadro{aspect-ratio:1;border-radius:var(--r-fio);background:var(--line);opacity:.5}
.g-quadro.is-on{background:var(--accent);opacity:1}
@keyframes quadroEntra{from{opacity:0;transform:scale(.4)}to{opacity:inherit;transform:none}}

.g-trilha{display:flex;flex-wrap:wrap;gap:var(--s-1);align-items:center}
/* A sequência é a coisa acesa da retrospectiva — uma por tela, e é esta:
   é o número que o cartão foi feito pra mostrar. */
.g-elo{width:18px;height:34px;border-radius:var(--r-fio);background:var(--accent);box-shadow:var(--luz)}
@keyframes eloAcende{from{opacity:0;transform:translateY(8px) scaleY(.5)}to{opacity:1;transform:none}}
.g-elo__mais{color:var(--dim);margin-left:var(--s-1)}

.g-prog{display:block;height:8px;border-radius:var(--r-pill);background:var(--line);width:100%}
.g-prog__fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.g-linha{width:100%;height:auto;display:block;overflow:visible}
.g-linha.acesa .g-linha__traco{filter:var(--luz-svg)}
.g-prog__fill.acesa{box-shadow:var(--luz)}

/* ── 29. Agenda do mês e organização pessoal ───────────────── */
.abas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-2);margin-bottom:var(--s-6)}
.aba{
  display:grid;gap:var(--s-1);justify-items:start;text-align:left;
  padding:var(--s-3) var(--s-3);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.aba.is-on{border-color:var(--accent);background:var(--surface)}
.aba__t{font-size:var(--t-corpo);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto)}
.aba__n{font-size:var(--t-micro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.aba.is-on .aba__n{color:var(--accent-txt)}
.aba.is-on .aba__n.is-vazio{color:var(--dim)}   /* nada pra celebrar */

.mescabeca{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap;
  border:1px solid var(--line-2);border-radius:var(--r-painel);padding:var(--s-5);background:var(--surface);margin-bottom:var(--s-6)}
.mescabeca__l{flex:1;min-width:min(240px,100%);display:grid;gap:var(--s-2)}

.dinheiro{display:grid;gap:var(--s-2);margin-top:var(--s-1)}
.dinheiro__l{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-3)}
.dinheiro__r,.dinheiro__f{display:flex;align-items:baseline;gap:var(--s-2);color:var(--dim);white-space:nowrap}
.dinheiro__r .num,.dinheiro__f .num,.dinheiro__l>.num{font-size:var(--t-mini);color:var(--fg);letter-spacing:var(--tk-texto)}

/* Nota de rodapé: frase é frase. Mono em caixa alta com tracking aberto é
   rótulo curto — em duas linhas de texto corrido ela vira ruído, e número com
   tracking de rótulo deixa de ler como quantidade. */
.nota-pe{
  font-family:var(--font-display);font-size:var(--t-mini);line-height:1.6;
  color:var(--dim);margin-top:var(--s-3);max-width:60ch;
}
.dinheiro__saldo{color:var(--accent-txt);letter-spacing:var(--tk-micro)}
.dinheiro__saldo.is-neg,.micro.is-neg{color:var(--erro)}

.agenda{display:grid;gap:var(--s-2)}
.agdia{display:flex;align-items:baseline;gap:var(--s-2);margin:var(--s-4) 0 var(--s-1)}
.agdia__n{font-size:var(--t-num);font-weight:var(--peso-forte);letter-spacing:var(--tk-display);line-height:1}
.agdia.is-passado{opacity:.55}
.agdia.is-hoje .agdia__n{color:var(--accent-txt)}
.agdia__hoje{color:var(--accent-txt);border:1px solid var(--accent);border-radius:var(--r-pill);padding:var(--s-1) var(--s-2)}

.agitem{
  display:flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-3) var(--s-4);background:var(--surface);
  transition:border-color .3s var(--ease),opacity .3s var(--ease);
}
.agitem--curto{padding:var(--s-3) var(--s-3)}
.agitem.is-atrasado{border-color:var(--accent)}
.agitem.is-feito{opacity:.55}
.agitem.is-feito .agitem__t{text-decoration:line-through;text-decoration-thickness:1px}
.agitem__check{
  position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;font-size:14px;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
/* o alvo de toque passa dos 30px visíveis: dedo não acerta moeda de 30px.
   Só cresce na vertical dentro da própria linha, então não rouba o toque
   de ninguém — o vizinho de cima e o de baixo têm 12px de folga. */
.agitem__check::after{content:"";position:absolute;left:-7px;right:-7px;top:-7px;bottom:-7px}
.agitem__check[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.agitem__check:active{transform:scale(.88)}
.agitem__l{flex:1;min-width:0;display:grid;gap:var(--s-1);text-align:left}
.agitem__t{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-corpo);letter-spacing:var(--tk-texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.agitem__e{font-size:var(--t-item)}
.agitem__d{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agitem__v{flex:none;font-size:var(--t-mini);color:var(--dim)}
.agitem__v.is-entra{color:var(--accent-txt)}

/* a porta pra lista completa, ao pé das contas do mês */
/* assinatura: a linha É a barra. Duas leituras (quanto e qual fatia) num
   objeto só — antes eram um gráfico e uma lista dizendo a mesma coisa. */
.assins{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.assin{display:flex;align-items:center;gap:var(--s-3);background:var(--bg);padding:var(--s-3) var(--s-4);transition:background .25s var(--ease)}
.assin:hover{background:var(--surface)}
.assin.is-feito{opacity:.6}
/* debitou sozinha: o visto é do relógio, não seu — fica em contorno, não
   preenchido, pra não parecer que você marcou. */
.assin.is-sozinha{opacity:.8}
.assin.is-sozinha .assin__check{background:transparent;border-color:var(--line-2);color:var(--dim)}
.assin__l{
  flex:1;min-width:0;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--s-2) var(--s-3);
}
.assin__t{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-corpo);letter-spacing:var(--tk-texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assin__meta{grid-column:1/3;display:flex;align-items:center;gap:var(--s-3)}
.assin__bar{flex:1;min-width:0;display:block;height:3px;border-radius:var(--r-fio);background:var(--surface-2);overflow:hidden}
.assin__bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-fio);
  transition:width .9s var(--ease)}
.assin__d{flex:none;color:var(--dim)}
.assin__v{font-size:var(--t-mini);color:var(--fg);white-space:nowrap}
.assin__check{flex:none;width:22px;height:22px}
.assin__corte{margin:var(--s-4) 0}
.assin__corte b{color:var(--fg)}

.linhatudo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4);text-align:left;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  font-size:var(--t-corpo);transition:border-color .25s var(--ease)}
.linhatudo:hover{border-color:var(--fg)}
.linhatudo__s{flex:none}

.tudolista{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.tudoitem{display:flex;align-items:center;gap:var(--s-3);background:var(--bg);padding:var(--s-3) var(--s-4)}
.tudoitem.is-pausado{opacity:.55}
.tudoitem__l{flex:1;min-width:0;text-align:left;display:grid;gap:var(--s-1)}
.tudoitem__t{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-item);font-weight:var(--peso-forte);letter-spacing:var(--tk-texto)}
.tudoitem__t>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.totalzao{border:1px solid var(--line-2);border-radius:var(--r-painel);padding:var(--s-5);background:var(--surface);
  display:grid;gap:var(--s-2);margin-bottom:var(--s-5)}
.totalzao__n{font-size:var(--d-lg);font-weight:var(--peso-display);letter-spacing:var(--tk-display);line-height:1}
.confronto{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4);margin:var(--s-4) 0}
.carteirabloco{margin:var(--s-7) 0 var(--s-3);display:grid;gap:var(--s-2)}
.mesnav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-5)}
.totalzao__n.is-neg{color:var(--erro)}
/* o símbolo cede a vez pro valor: quem lê já sabe que é dinheiro */
.cifra{font-size:.46em;color:var(--dim);margin-right:.22em;vertical-align:.34em;letter-spacing:var(--tk-mono)}

.hojeagenda{border:1px solid var(--line-2);border-radius:var(--r-card);padding:var(--s-4);margin-bottom:var(--s-6);display:grid;gap:var(--s-2)}
.hojeagenda>*{min-width:0}   /* item de grade não encolhe sozinho */
.hojeagenda__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-1)}

.section.is-alvo{outline:2px solid var(--accent);outline-offset:10px;border-radius:var(--r-fio);transition:outline-color .6s var(--ease)}
.wrap--nowrap{flex-wrap:nowrap}
/* emoji + nome na mesma linha. Em grade, não em flex: `.field input{width:100%}`
   tem especificidade maior que qualquer largura que eu desse ao emoji, e ele
   engolia a linha inteira deixando o nome com 0px — dava pra abrir o formulário
   e não dava pra escrever nele. */
.idrow{display:grid;grid-template-columns:66px minmax(0,1fr);gap:var(--s-3);align-items:end}
.idrow input{width:100%;min-width:0}
.idrow input.emojin{text-align:center;font-size:var(--t-item)}

/* ── 26. Movimento reduzido ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;
}