/* Protótipo aprovado (OY-02) · base A, Quadro, com a folha do A3 em duas colunas (peça da B, Papel). A ideia do
   Quadro aprovado do Encontro levada para o Obeya inteiro: um quadro de oficina de fundo pontilhado, post-its
   levemente tortos, fichas presas com fita e carimbos. A parede é o quadro; o A3 é uma folha presa nele, com o menu
   das seções em post-its à esquerda e o conteúdo na direita.
   Cores: as da identidade v3 (navy, laranja, tons da barra `--seg-*`); fonte: Fraunces nos títulos. */

:root{
  --o-fundo:var(--surface-warm);--o-papel:#fff;--o-papel2:#F6F3EC;--o-vinco:#E7E3D8;--o-linha:#D9D5CC;
  --o-borda-ui:#8F8A7E; /* borda de campo e botão: 3:1 sobre o papel; `--o-linha` fica só para divisória */
  --o-raio:4px;--o-raio-peq:4px;
  --o-sombra:0 1px 1px rgba(15,27,45,.08),0 10px 18px -8px rgba(15,27,45,.24);
  --q-saida:var(--o-saida);--q-mola:var(--o-mola);
  --q-amarelo:var(--seg-3);--q-azul:var(--seg-2);--q-rosa:var(--seg-4);--q-laranja:color-mix(in srgb,var(--tangerine) 38%,#fff);
}
.oy ::selection{background:var(--seg-3);color:var(--ink)}
/* o fundo pontilhado do quadro é o da área da tela (`.oy`), e não o do corpo da página: o menu do app não muda */
.oy{background:radial-gradient(circle,#D2CDC2 1.4px,transparent 1.6px) 0 0/26px 26px,var(--surface-warm)}

/* ---------- app: topo como uma fita de papel ---------- */
.oy-topo{background:#fff;border-bottom:0;box-shadow:0 8px 14px -10px rgba(15,27,45,.3);position:relative}
.oy-topo::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:repeating-linear-gradient(90deg,var(--q-amarelo) 0 28px,var(--q-rosa) 28px 56px,var(--q-azul) 56px 84px);opacity:.85}
.oy-abas button{border-radius:4px 4px 0 0;transition:background .2s,transform .25s var(--q-mola)}
.oy-abas button[aria-current="page"]{background:var(--q-amarelo);color:var(--ink);transform:rotate(-1.2deg)}
.oy-logo{transform:rotate(-6deg);border-radius:4px;box-shadow:0 4px 8px -2px rgba(15,27,45,.3)}
.oy-sec-n{border-radius:4px;transform:rotate(-5deg);background:var(--q-amarelo);color:var(--ink)}
.oy-cabeca h1{position:relative;display:inline-block}
.oy-cabeca h1::after{content:"";position:absolute;left:-6px;right:-6px;bottom:2px;height:14px;z-index:-1;background:var(--q-amarelo);opacity:.7;transform:rotate(-.8deg)}
.oy-st{border-radius:3px;font-weight:800}

/* ---------- parede: post-its presos com fita ---------- */
.oy-cartoes{gap:34px 26px;padding-top:12px}
.oy-cartao{--nota:var(--q-amarelo);background:var(--nota);transform:rotate(var(--g,0deg));padding:30px 20px 18px;box-shadow:0 1px 1px rgba(15,27,45,.08),0 14px 22px -10px rgba(15,27,45,.32);border-radius:3px}
.oy-cartao.st-mentor{--nota:var(--q-rosa)}
.oy-cartao.st-fechado{--nota:var(--q-azul)}
.oy-cartao.st-cancelado{--nota:#E3DED2}
a.oy-cartao{text-decoration:none;color:inherit}
.oy-cartao:hover{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 1px 1px rgba(15,27,45,.08),0 24px 30px -12px rgba(15,27,45,.4)}
.oy-cartao:active{transform:rotate(0deg) scale(.97)}
.oy-fita{display:block;position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;transform:rotate(-3deg);background:rgba(232,220,190,.8);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.oy-cartao .oy-st{background:rgba(255,255,255,.7);color:var(--ink)}
.oy-cartao .oy-grupo{color:rgba(10,10,10,.8)}
.oy-cartao-titulo{font-size:22px}
.oy-gap-txt{color:var(--ink)}
.oy-gap.ok .oy-gap-txt{color:var(--success-ink)}
.oy-barra-gap{background:rgba(255,255,255,.65)}
.oy-barra-gap i{background:var(--navy)}
.oy-cartao-rodape{border-top:1.5px dashed rgba(10,10,10,.25)}
.oy-cartao .oy-quando{color:rgba(10,10,10,.8)}
.oy-cartao.st-fechado,.oy-cartao.st-cancelado{opacity:1}
.oy-btn,.oy-campo,.oy-filtros button{border-color:var(--o-borda-ui)}
.oy-sem-restaurar{max-width:130px;font-size:12px;line-height:1.3;text-align:right;color:var(--o-mudo)}
.oy-cartao.parado .oy-quando{color:var(--danger-ink)}
.oy-conta{border-radius:3px;transform:rotate(calc(var(--n,0) * .4deg - .6deg))}
.anima .oy-li{animation:q-cola .6s var(--q-saida) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes q-cola{from{opacity:0;transform:translateY(-34px) rotate(-6deg) scale(1.08)}}
.oy-filtros button{border-radius:3px;background:#fff}
.oy-filtros button[aria-pressed="true"]{background:var(--q-amarelo);border-color:var(--ink);color:var(--ink);transform:rotate(-1deg)}
.oy-filtros button[aria-pressed="true"] i{background:rgba(255,255,255,.7);color:var(--ink)}

/* ---------- folha do A3: o menu em post-its à esquerda, a folha presa no quadro à direita ---------- */
.oy-a3-cab{position:relative;border-radius:3px;padding-top:30px}
.oy-a3-cab::before,.oy-dossie-corpo::before{content:"";position:absolute;left:50%;top:-14px;width:150px;height:30px;margin-left:-75px;transform:rotate(-2deg);background:rgba(232,220,190,.82);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.oy-dossie{grid-template-columns:236px minmax(0,1fr);gap:40px;padding-top:6px}
.oy-dossie-corpo{position:relative;padding:38px clamp(18px,3vw,38px) 14px;border-radius:3px;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.08),0 24px 40px -16px rgba(15,27,45,.35)}
.oy-dossie-corpo .oy-sec{background:transparent;box-shadow:none;border-radius:0;padding:22px 0;margin:0;border-bottom:1.5px dashed var(--o-linha)}
.lado-problema{--lado:var(--q-azul)}
.lado-solucao{--lado:var(--q-rosa)}
.oy-dossie-corpo .oy-sec-n{background:var(--lado,var(--q-amarelo))}
.oy-dossie-corpo .oy-id{border-radius:3px;background:var(--lado,var(--q-azul));color:var(--ink)}
.oy-dossie-corpo .oy-item,.oy-dossie-corpo .oy-linha{background:var(--surface-warm)}
.oy-dossie-corpo .oy-ferr-b{background:transparent;border-color:var(--o-borda-ui)}
.oy-dossie-corpo .oy-ferr-b[aria-pressed="true"]{background:var(--q-amarelo);color:var(--ink);border-color:var(--ink)}
.oy-dossie-corpo .oy-hist{margin:0;padding:26px 0 8px;border-radius:0;background:transparent;box-shadow:none}
/* o menu: cada seção é um post-it; o da seção que está na tela fica amarelo, avança um passo e se endireita */
.oy-toc{top:22px;gap:18px}
.oy-toc ol{gap:10px}
.oy-toc li{--g:-.9deg}
.oy-toc li:nth-child(even){--g:.8deg}
.oy-toc button{gap:12px;min-height:46px;padding:10px 14px;border:0;border-radius:3px;background:var(--lado,#fff);color:var(--ink);font-size:15px;font-weight:700;line-height:1.2;box-shadow:0 1px 1px rgba(15,27,45,.08),0 8px 14px -8px rgba(15,27,45,.35);transform:rotate(var(--g));transition:transform .25s var(--q-mola),background .2s,box-shadow .25s}
.oy-toc li.problema{--lado:var(--q-azul)}
.oy-toc li.solucao{--lado:var(--q-rosa)}
.oy-toc li.registro{--lado:#fff}
.oy-toc button em{font-style:normal}
.oy-toc button .num{display:inline-grid;place-items:center;flex:none;min-width:22px;height:22px;border-radius:3px;background:rgba(255,255,255,.7);font-size:12px;font-weight:700;opacity:1}
.oy-toc button:hover{color:var(--ink);background:var(--lado,#fff);transform:rotate(0deg) translateX(5px)}
.oy-toc button[aria-current="true"]{background:var(--q-amarelo);color:var(--ink);transform:rotate(-1.2deg) translateX(12px);box-shadow:0 1px 1px rgba(15,27,45,.1),0 14px 20px -10px rgba(15,27,45,.45)}
.oy-toc-prog{height:6px;border-radius:0;background:repeating-linear-gradient(90deg,var(--o-linha) 0 8px,transparent 8px 14px)}
.oy-toc-prog i{background:var(--navy)}
.oy-toc li.legenda{margin:6px 0 -2px 2px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(10,10,10,.72)}
.oy-toc li.legenda:first-child{margin-top:0}
/* tela estreita: o menu vira uma fileira de post-its que rola de lado e fica presa no topo enquanto a folha rola */
@media (max-width:860px){
  .oy-dossie{grid-template-columns:1fr;gap:20px}
  .oy-toc{position:sticky;top:0;z-index:20;margin:0 calc(-1 * clamp(16px,4vw,48px));padding:10px clamp(16px,4vw,48px) 12px;background:color-mix(in srgb,var(--surface-warm) 94%,transparent);box-shadow:0 10px 12px -10px rgba(15,27,45,.35);gap:8px}
  .oy-toc{grid-template-columns:minmax(0,1fr)}
  .oy-toc ol{min-width:0;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;padding:6px 2px 8px;scrollbar-width:thin}
  .oy-toc li{flex:none}
  .oy-toc li.legenda{margin:0 2px 0 6px;white-space:nowrap}
  .oy-toc li.legenda:first-child{margin-left:0}
  /* a seção escolhida no menu para ABAIXO dele (menu preso no topo: ~100 px) */
  .oy-dossie-corpo .oy-sec,.oy-dossie-corpo .oy-hist{scroll-margin-top:112px}
  .oy-toc button{border:0;width:auto;min-height:44px;white-space:nowrap}
  .oy-toc button[aria-current="true"]{transform:rotate(-1.2deg) translateY(-3px)}
  .oy-toc-prog{height:4px}
}
.oy-carimbo{border-radius:4px;background:rgba(255,255,255,.85)}
.oy-dica ul{background:var(--q-amarelo);color:var(--ink);border-radius:3px;transform:rotate(-.4deg)}
.oy-colar,.oy-pedido,.oy-coment{border-radius:3px}
.anima .oy-dossie-corpo{animation:q-folha .7s var(--q-saida) both}
@keyframes q-folha{from{opacity:0;transform:translateY(18px)}}
.anima .oy-toc li{animation:q-cola .55s var(--q-saida) both;animation-delay:calc(var(--i,0) * 70ms)}
.anima .oy-sec{animation:none}
.anima .oy-sec.piscou{animation:oy-pisca 1.4s ease-out}

/* ---------- alvos de toque: no dedo, 44 px; o "×" que tira um editor ganha área extra e se afasta do nome ---------- */
.oy-icone.mini{position:relative;margin-left:6px}
.oy-icone.mini::after{content:"";position:absolute;inset:-11px}
@media (pointer:coarse){
  .oy-btn.leve,.oy-filtros.peq button,.oy-icone,.oy-candidatos button{min-height:44px}
  .oy-icone{min-width:44px}
  .oy-icone.mini{min-width:22px;min-height:22px}
  .oy-elo{padding:8px 12px}
  .oy-elos{gap:8px}
}

/* ---------- pessoas, conexões, consentimento ---------- */
.oy-area{transform:rotate(calc(var(--i,0) * .5deg - .8deg));border-radius:3px}
.oy-area:nth-child(3n+1){background:var(--q-amarelo)}.oy-area:nth-child(3n+2){background:var(--q-azul)}.oy-area:nth-child(3n){background:var(--q-rosa)}
.oy-area.nova{background:rgba(255,255,255,.6)!important;transform:none}
.oy-area-barra{background:rgba(255,255,255,.6)}.oy-area-barra i{background:var(--navy)}
.oy-tab-linha{border-radius:3px}
.oy-conexao{border-radius:3px;position:relative}
.oy-conexao::before{content:"";position:absolute;left:30px;top:-12px;width:80px;height:24px;transform:rotate(-3deg);background:rgba(232,220,190,.8)}
.oy-conexao-ic{border-radius:4px;transform:rotate(-4deg);background:var(--q-amarelo);color:var(--ink)}
.oy-consent-cartao{position:relative;border-radius:3px;transform:rotate(-.3deg)}
.oy-consent-cartao::before{content:"";position:absolute;left:50%;top:-14px;width:150px;height:30px;margin-left:-75px;transform:rotate(2deg);background:rgba(232,220,190,.82)}
.oy-consent-treino{background:var(--q-amarelo);border-left-color:var(--ink);border-radius:3px}

/* ---------- telão: o Quadro aprovado, com as peças do Obeya ---------- */
.s-marca,.s-etiqueta{border-radius:6px}
.s-bloco{--nota:var(--q-amarelo);background:var(--nota);transform:rotate(var(--g,-.6deg));border-radius:3px;box-shadow:0 1px 1px rgba(15,27,45,.08),0 16px 26px -10px rgba(15,27,45,.3);animation:q-cola .6s var(--q-saida) both}
.s-bloco.meta{--nota:var(--q-azul);--g:.5deg;animation-delay:.14s}
.s-bloco.tentaram{--nota:var(--q-rosa);--g:-.3deg;animation-delay:.28s}
.s-bloco h2,.s-bloco .s-valor span,.s-bloco.tentaram li span,.s-bloco .s-nota{color:rgba(10,10,10,.72)}
.s-bloco.hoje .s-valor b,.s-falta{color:var(--ink)}
.s-bloco.tentaram li{border-bottom-color:rgba(10,10,10,.28)}
.s-entrar{border-radius:6px;transform:rotate(.2deg)}
.s-pal{animation:q-cola .5s var(--q-saida) both;animation-delay:calc(var(--i) * 90ms)}
.s-chegaram li{border-radius:6px;animation:q-cola .5s var(--q-saida) both;animation-delay:calc(1.1s + var(--i) * 110ms)}
.s-grupo{border-radius:6px;border-top-width:12px}
.s-carta{background:#fff;border-top:6px solid var(--gc);border-radius:8px;box-shadow:0 1px 2px rgba(15,27,45,.1),0 6px 12px -6px rgba(15,27,45,.25);transform:rotate(var(--r,0deg))}
.s-grupo li:nth-child(odd){--r:-.7deg}.s-grupo li:nth-child(even){--r:.6deg}
.s-origem i{position:absolute;inset:0;border-radius:14px;border:8px solid #fff;background:repeating-linear-gradient(45deg,var(--navy) 0 14px,var(--navy-soft) 14px 28px);box-shadow:0 10px 24px -8px rgba(15,27,45,.45);transform:translate(calc(var(--i) * -2px),calc(var(--i) * -3px)) rotate(calc((var(--i) - 3) * 1.4deg))}
.s-fase{border-radius:4px;transform:rotate(calc(var(--min) * .06deg - .5deg))}
.s-fase.agora{transform:rotate(0) translateX(14px)}
.s-relogio{background:var(--q-amarelo);box-shadow:0 20px 36px -14px rgba(15,27,45,.4);border-radius:50%}
.s-relogio.acabando{background:var(--tangerine)}
.s-relogio.acabando .s-tempo,.s-relogio.acabando .s-fase-nome{color:var(--navy)}
.s-anel .trilho{stroke:rgba(255,255,255,.6)}.s-anel .v{stroke:var(--navy)}
.s-pitch{border-radius:3px;border-top:0;padding-top:46px;animation:q-cola .6s var(--q-saida) both;animation-delay:calc(var(--i) * 120ms);transform:rotate(calc(var(--i) * .6deg - .8deg))}
.s-fita{display:block;position:absolute;left:50%;top:-16px;width:140px;height:34px;margin-left:-70px;transform:rotate(-3deg);background:rgba(232,220,190,.82);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.s-pitch h2 .s-bolinha{width:24px;height:24px}
.s-eva-linha{border-radius:3px;animation:q-cola .5s var(--q-saida) both;animation-delay:calc(var(--i) * 100ms)}
.s-med-barra i{background:var(--navy)}
.s-pontos i.on{background:var(--tangerine);animation:q-gota .4s var(--q-mola) both}
.s-matriz{background:radial-gradient(circle,#D2CDC2 1.4px,transparent 1.6px) 0 0/28px 28px}
.s-q{border-radius:3px;background:rgba(255,255,255,.82)}
.s-q.q-implementar{background:color-mix(in srgb,var(--success) 18%,#fff)}
.s-bola{border-radius:3px;transform:translate(-50%,-50%) rotate(calc(var(--k) * 4deg - 6deg));background:var(--gc);box-shadow:0 1px 1px rgba(15,27,45,.1),0 12px 18px -8px rgba(15,27,45,.45)}
.s-bola.mini{transform:none;border-radius:3px}
.s-pick-lista li,.s-op,.s-levar{border-radius:3px}
.s-levar{background:var(--q-amarelo);transform:rotate(.5deg)}
.s-levar li{background:rgba(255,255,255,.75)}
.s-carimbo{border-radius:6px;animation:none}
@keyframes q-gota{from{transform:scale(0)}}

/* ---------- celular ---------- */
.c-nome-b,.c-membros li,.c-pitch-card,.c-resumo li,.c-teclado button{border-radius:3px}
.c-nome-b:nth-child(odd){transform:rotate(-.4deg)}
.c-membros li{animation:q-distribui .45s var(--q-saida) both;animation-delay:calc(var(--k) * 90ms)}
@keyframes q-distribui{from{opacity:0;transform:translate(-36px,-28px) rotate(-8deg)}}
.c-pitch-card{transform:rotate(-.3deg)}
.c-seg button[aria-checked="true"]{background:var(--q-amarelo);color:var(--ink);border-color:var(--ink);animation:q-gota .35s var(--q-mola) both}
.c-ok-marca{background:var(--q-amarelo);color:var(--ink);border-color:var(--ink);border-radius:4px}

/* ---------- troca de tela: o quadro corre para o lado ---------- */
/* No app de verdade a parede, a folha e as abas são UMA página (telas/obeya.js): a troca entre elas é a de
   `document.startViewTransition` (telas/obeya-ui.js), do mesmo jeito do protótipo. */
::view-transition-old(root){animation:q-vt-sai .35s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:q-vt-entra .55s var(--q-saida) both}
[data-sentido="tras"]::view-transition-old(root){animation-name:q-vt-sai-tras}
[data-sentido="tras"]::view-transition-new(root){animation-name:q-vt-entra-tras}
@keyframes q-vt-sai{to{transform:translateX(-12%);opacity:0}}
@keyframes q-vt-entra{from{transform:translateX(12%);opacity:0}}
@keyframes q-vt-sai-tras{to{transform:translateX(12%);opacity:0}}
@keyframes q-vt-entra-tras{from{transform:translateX(-12%);opacity:0}}