/* ============================================================
   Canvas de Projeto
   Estilos: moldura do canvas (escala de cinza, fiel ao PDF)
   e cards (post-its) coloridos no estilo Trello.
   ============================================================ */

:root{
  --ink:#2a2620;     /* quase-preto quente (era #1a1a1a) — alinhado à identidade */
  --frame:#2a2620;   /* moldura em tinta quente (era #000); imprime praticamente preta */
  --hint:#6c6357;    /* secundário quente */
  --bg:#eee6d4;      /* papel quente — alinhado à identidade do site */
  --paper:#fffdf7;   /* superfície do canvas levemente quente (forçada a branco na impressão) */
  --clay:#c0512c;    /* acento terracota do site */
  --radius:7px;
  /* Fontes da identidade — com fallback de sistema para file:// offline. */
  --ui:'Hanken Grotesk','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --label:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--ui);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* Remove o flash de "toque" nativo (herdado por todo o app): evita que o
     card fique piscando enquanto a pessoa mantém o dedo pressionado no
     pressionar-e-segurar. Sem efeito no desktop. */
  -webkit-tap-highlight-color:transparent;
  height:100vh;
  height:100dvh; /* navegadores sem suporte ignoram e mantêm 100vh */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- Barra de ferramentas ---------- */
.toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 14px 4px;
  background:transparent;
  color:#2a2620;
  flex:none;z-index:50;
}
.toolbar h1{
  display:flex;align-items:center;gap:9px;
  font-size:15px;margin:0;font-weight:700;letter-spacing:.2px;
}
/* Marca clicável: leva à página inicial (única navegação para fora do canvas). */
.brand-link{
  display:inline-flex;align-items:center;gap:9px;
  color:inherit;text-decoration:none;cursor:pointer;
}
.brand-link:hover .brand-ico{transform:rotate(0deg);}
.brand-link:hover span:not(.brand-ico){text-decoration:underline;text-underline-offset:3px;}
/* Marca em "selo" amarelo, igual ao cabeçalho do site */
.brand-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  background:#fce39a;
  border:2px solid #2a2620;
  border-radius:7px;
  transform:rotate(-4deg);
  color:#2a2620;
  transition:transform .15s;
}
.brand-ico svg{width:17px;height:17px;}
.brand-tag{
  font-size:11px;font-weight:700;
  background:#2a2620;color:#fff;
  padding:2px 8px;border-radius:999px;
}
.toolbar .spacer{flex:1;}
/* Início de um grupo funcional: respiro extra à esquerda (desktop). */
.tb-group{margin-left:8px;}
/* Quebra de linha usada só no mobile; no desktop não existe (sem impacto). */
.tb-break{display:none;}

/* Botões no mesmo padrão do site: borda 2px tinta, cantos 10px, sombra
   impressa (offset duro) e peso 600. Sombra 3px (vs. 4px do site) por serem
   botões menores na toolbar — proporcional. */
.btn{
  font-family:var(--ui);font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  background:#fffdf6;color:#2a2620;
  border:2px solid #2a2620;
  padding:6px 14px;border-radius:10px;
  box-shadow:3px 3px 0 #2a2620;
  transition:background .12s,box-shadow .12s,transform .12s;
}
.btn:hover{
  background:#f3eddf;
  box-shadow:1px 1px 0 #2a2620;transform:translate(2px,2px);
}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #2a2620;}
.btn .ico{display:inline-flex;}
.btn .ico svg{width:15px;height:15px;}
/* "Limpar" — mesmo formato; sinaliza perigo só pela cor (texto/ícone vermelho),
   invertendo para fundo vermelho no hover. */
.btn.danger{color:#b23b3b;}
.btn.danger:hover{background:#b23b3b;color:#fff;}
/* "Salvar projeto" — variante âncora (tinta cheia), mesmo formato. */
.btn.primary{background:#2a2620;color:#fff;}
.btn.primary:hover{background:#3a342b;color:#fff;}

/* ---------- Seletor de idioma (estrutura estilo shadcn Select) ---------- */
.lang-select{position:relative;display:inline-flex;}
.lang-native{display:none;}

/* Gatilho: mesmo padrão dos botões (borda tinta, cantos 10px, sombra impressa). */
.lang-trigger{
  font-family:var(--ui);font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  background:#fffdf6;color:#2a2620;
  border:2px solid #2a2620;border-radius:10px;
  padding:6px 12px;
  box-shadow:3px 3px 0 #2a2620;
  transition:background .12s,box-shadow .12s,transform .12s;
}
.lang-trigger:hover{background:#f3eddf;box-shadow:1px 1px 0 #2a2620;transform:translate(2px,2px);}
.lang-trigger:active{transform:translate(3px,3px);box-shadow:0 0 0 #2a2620;}
.lang-trigger .ico{display:inline-flex;}
.lang-trigger .ico svg{width:15px;height:15px;}
/* Só o ícone no gatilho: o nome dos idiomas aparece no próprio menu. */
.lang-trigger-label{display:none;}
.lang-chevron{display:inline-flex;color:#6c6357;transition:transform .15s;}
.lang-chevron svg{width:14px;height:14px;}
.lang-trigger[aria-expanded="true"] .lang-chevron{transform:rotate(180deg);}

/* Conteúdo (popover/listbox): cartão arredondado com borda tinta e sombra impressa. */
.lang-content{
  position:absolute;top:calc(100% + 7px);left:0;z-index:60;
  min-width:170px;
  background:#fffdf7;
  border:2px solid #2a2620;border-radius:10px;
  box-shadow:4px 4px 0 #2a2620;
  padding:5px;
}
.lang-content[hidden]{display:none;}

/* Item: linha arredondada, check à direita no selecionado (anatomia do shadcn). */
.lang-item{
  position:relative;
  display:flex;align-items:center;
  font-family:var(--ui);font-size:13px;font-weight:500;color:#2a2620;
  padding:7px 32px 7px 11px;border-radius:7px;
  cursor:pointer;white-space:nowrap;outline:none;
  transition:background .1s;
}
.lang-item:hover,.lang-item:focus{background:#efe7d6;}
.lang-item.selected{font-weight:700;}
.lang-item-check{
  position:absolute;right:9px;display:none;
  align-items:center;color:#2a2620;
}
.lang-item-check svg{width:15px;height:15px;}
.lang-item.selected .lang-item-check{display:inline-flex;}

/* ---------- "Exportar projeto" (menu estilo shadcn) ---------- */
.export-select{position:relative;display:inline-flex;}
.export-trigger{padding-right:10px;}
.export-chevron{display:inline-flex;color:#6c6357;transition:transform .15s;}
.export-chevron svg{width:14px;height:14px;}
.export-trigger[aria-expanded="true"] .export-chevron{transform:rotate(180deg);}

/* Conteúdo: mesmo popover do seletor de idioma; alinhado à direita do gatilho. */
.export-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:60;
  min-width:200px;
  background:#fffdf7;color:#2a2620;
  border:2px solid #2a2620;border-radius:10px;
  box-shadow:4px 4px 0 #2a2620;
  padding:5px;
}
.export-menu[hidden]{display:none;}
.export-item{
  display:flex;align-items:center;gap:9px;width:100%;
  font-family:var(--ui);font-size:13px;font-weight:500;color:#2a2620;
  background:transparent;border:none;cursor:pointer;text-align:left;
  padding:8px 11px;border-radius:7px;outline:none;
  transition:background .1s;
}
.export-item:hover:not(:disabled),.export-item:focus:not(:disabled){background:#efe7d6;}
.export-item .ico{display:inline-flex;color:#6c6357;}
.export-item .ico svg{width:16px;height:16px;}
.export-item-label{font-weight:700;}
.export-item-hint{margin-left:auto;font-family:var(--label);font-size:11px;color:#8a8073;}
.export-item:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Moldura do canvas ---------- */
.canvas-scroll{flex:1;overflow:auto;padding:6px 14px 14px;
  display:flex;flex-direction:column;}
.canvas{
  background:var(--paper);
  /* flex:1 + min-height:0 dá ao canvas uma altura DEFINIDA (= área de
     rolagem). Sem isso a grade cresceria com o conteúdo e o
     minmax(0,1fr) das linhas não limitaria os blocos. */
  width:100%;flex:1;min-height:0;margin:0 auto;
  padding:14px 16px 8px;
  border:1px solid #cfcfcf;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
}

/* ---------- Cabeçalho ---------- */
.canvas-header{
  display:grid;
  grid-template-columns:2.8fr 3fr;   /* alinha com col1+col2 e col3+col4+col5 */
  gap:24px;
  margin-bottom:12px;
}
.hdr{display:flex;align-items:baseline;gap:10px;}
.hdr-label{
  font-family:var(--label);
  font-weight:700;font-size:12px;letter-spacing:.04em;white-space:nowrap;
  text-transform:uppercase;
}
.hdr-label em{font-family:var(--ui);font-weight:500;font-style:normal;font-size:12px;letter-spacing:0;color:var(--hint);text-transform:none;}
.hdr-field{
  flex:1;min-width:0;border-bottom:2px solid var(--frame);
  padding:2px 4px;min-height:24px;font-size:14px;font-weight:600;outline:none;
}
.hdr-field:focus{background:#fdf3d4;}
.hdr-field:empty::before{content:attr(data-ph);color:#bdbdbd;font-weight:400;}

/* ---------- Corpo: 2 metades empilhadas (top/bottom) ----------
   A grade visual fiel ao PDF é construída em 2 níveis:
     canvas-body  -> flex coluna com 2 metades de altura igual
     .half        -> grade 2 colunas (1.25fr esquerda | 4.55fr direita)
   Os grupos da direita (g3/g4) são grades de 4 colunas internas
   (1.55fr 1fr 1fr 1fr) — mesmas proporções da grade original. */
.canvas-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.half{
  flex:1 1 0;
  min-height:0;
  display:grid;
  grid-template-columns:1.25fr 4.55fr;
  /* minmax(0,1fr): a linha não cresce com o conteúdo, mantendo a
     altura limitada à metade do canvas e permitindo rolagem interna. */
  grid-template-rows:minmax(0,1fr);
  gap:9px;
}
.group{min-height:0;}
.group-1, .group-2{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.group-3, .group-4{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr 1fr;
  grid-template-rows:minmax(0,1fr);
  gap:9px;
}
.escopo-stack{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-height:0;
}

/* ---------- Bloco ---------- */
.block{
  display:flex;flex-direction:column;
  border:2px solid var(--frame);
  border-radius:var(--radius);
  background:#fff;
  min-height:0;
  /* overflow visível para a tooltip de ajuda não ser recortada */
  overflow:visible;
}
.block-head{
  display:flex;align-items:flex-start;gap:7px;
  padding:7px 8px 5px;
}
.block-icon{flex:none;display:flex;line-height:0;}
.block-icon svg{width:19px;height:19px;}
.block-title{
  font-weight:700;font-size:12.5px;line-height:1.15;flex:1;
  text-transform:uppercase;
}
/* Tooltip de ajuda (mostrada ao clicar no botão "?"). */
.help-wrap{position:relative;display:inline-flex;align-self:center;}
.block-hint{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:-2px;
  z-index:40;
  width:230px;max-width:68vw;
  font-weight:400;text-transform:none;
  font-size:11px;line-height:1.45;
  color:#fff;background:#2a2620;
  padding:8px 11px;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(42,38,32,.3);
}
.block-hint::before{
  content:"";
  position:absolute;
  top:-5px;right:7px;
  border:5px solid transparent;
  border-top:0;
  border-bottom-color:#2a2620;
}
.block.show-hint .block-hint{display:block;}
/* Contador: pílula em papel quente com número em mono (rótulo do site). */
.block-count{
  flex:none;font-family:var(--label);font-size:10px;color:#6c6357;font-weight:700;
  background:#efe7d6;border:1px solid #e0d6c0;border-radius:999px;
  padding:1px 7px;align-self:center;
}
/* "?" ajuda: contorno tinta em papel, inverte para tinta cheia no hover/ativo. */
.help-btn{
  flex:none;cursor:pointer;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid #cabfa8;background:#fffdf6;color:#6c6357;
  transition:background .12s,color .12s,border-color .12s;
}
/* SVG maior que o "+" porque o "?" sem círculo ocupa só o centro do viewBox. */
.help-btn svg{width:19px;height:19px;}
.help-btn:hover,
.help-btn.active{background:#2a2620;color:#fff;border-color:#2a2620;}

/* "+" adicionar: botão-contorno do projeto (borda tinta, cantos arredondados),
   invertendo para tinta cheia no hover. */
.add-btn{
  flex:none;cursor:pointer;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1.5px solid #2a2620;background:#fffdf6;color:#2a2620;
  width:22px;height:22px;border-radius:6px;
  transition:background .12s,color .12s;
}
.add-btn svg{width:14px;height:14px;}
.add-btn:hover{background:#2a2620;color:#fff;border-color:#2a2620;}
.block-body{
  flex:1 1 auto;
  padding:5px 7px 8px;
  display:flex;flex-direction:column;gap:6px;
  min-height:46px;
  overflow-y:auto;
  /* Barra de rolagem fina (Firefox) */
  scrollbar-width:thin;
  scrollbar-color:#b6b6b6 transparent;
}
/* Barra de rolagem fina (Chrome, Edge, Safari) */
.block-body::-webkit-scrollbar{width:6px;}
.block-body::-webkit-scrollbar-track{background:transparent;}
.block-body::-webkit-scrollbar-thumb{
  background:#c2c2c2;
  border-radius:3px;
}
.block-body::-webkit-scrollbar-thumb:hover{background:#9a9a9a;}
.block-body.drop-hover{
  background:#fbf3d8;
  outline:2px dashed var(--frame);outline-offset:-4px;
}

/* ---------- Card (post-it) ---------- */
.card{
  position:relative;
  border-radius:4px;
  padding:7px 9px;
  font-size:12px;font-weight:600;line-height:1.35;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  cursor:grab;
  word-break:break-word;
  white-space:pre-wrap;
}
.card:active{cursor:grabbing;}
.card.dragging{opacity:.4;}
.card.editing{cursor:text;box-shadow:0 0 0 2px var(--frame);}
.card-text{outline:none;min-height:16px;}
.card-text:empty::before{content:var(--card-ph,'Escreva aqui…');color:#9a9a86;}

.card-tools{
  position:absolute;top:-10px;right:6px;
  display:flex;gap:3px;align-items:center;
  background:#fff;border:1px solid #ddd;border-radius:12px;
  padding:2px 5px;box-shadow:0 1px 3px rgba(0,0,0,.22);
  opacity:0;transition:opacity .12s;
}
.card:hover .card-tools{opacity:1;}
.card.editing .card-tools{opacity:0;pointer-events:none;}
.dot{
  width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(0,0,0,.25);cursor:pointer;padding:0;
}
.dot:hover{transform:scale(1.25);}
.card-del{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:13px;          /* mesma altura dos dots -> alinha na linha */
  border:none;background:none;cursor:pointer;font-size:16px;
  line-height:1;color:#b23b3b;padding:0;margin-left:4px;
}
.card-del:hover{color:#7a1f1f;}
/* O pill de ferramentas flutua acima do card (top:-10px); o 1º card precisa
   de uma folga para o menu não invadir o cabeçalho do bloco no hover. */
.block-body > .card:first-child{margin-top:12px;}

/* ---------- Toque (sem hover): ferramentas sempre visíveis ---------- */
/* Em dispositivos de toque não há :hover, então as ferramentas do card
   (dots de cor + excluir) precisam ficar sempre à mostra. Tiramos o pill
   flutuante do fluxo absoluto e o colocamos como uma linha normal no fim
   do card — assim não recorta a borda nem sobrepõe cards vizinhos — e
   ampliamos os alvos para ~32–40px. */
@media (hover:none){
  /* Evita seleção de texto / menu nativo / arrasto nativo ao pressionar e
     segurar o card (o arrasto nativo causava o card piscar no toque). */
  .card{
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-drag:none;
  }
  .card.editing{-webkit-user-select:text;user-select:text;}
  /* Ferramentas ocultas por padrão; o "pressionar e segurar" (classe
     .tools-open via JS) as revela abaixo do texto: paleta de cores e,
     na linha seguinte, o botão excluir. Assim o card concluído fica enxuto. */
  .card-tools{
    position:static;
    opacity:1;
    transition:none;
    margin-top:8px;
    padding:0;
    background:transparent;border:none;box-shadow:none;
    flex-wrap:nowrap;gap:5px;align-items:center;
    display:none;
  }
  .card.tools-open .card-tools{display:flex;}
  .card.editing .card-tools{display:none;}
  .dot{width:30px;height:30px;flex:none;}
  .dot:hover{transform:none;}
  /* Excluir na MESMA linha dos dots, com tamanho compatível e empurrado
     para a direita (margin-left:auto). */
  .card-del{
    width:34px;height:34px;font-size:26px;flex:none;
    margin-left:auto;align-self:center;
    display:flex;align-items:center;justify-content:center;
  }
  /* Cabeçalho do bloco no toque: reduz "?"/"+" (eram 36px, grandes demais
     ao lado do título) e aumenta o contador, antes minúsculo, para equilibrar. */
  .add-btn{width:30px;height:30px;}
  .add-btn svg{width:18px;height:18px;}
  .help-btn{width:30px;height:30px;}
  .help-btn svg{width:24px;height:24px;}
  .block-count{font-size:13px;padding:3px 9px;}
}

/* ---------- Rodapé ---------- */
.canvas-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:10px;color:#8a8073;margin-top:10px;padding-top:6px;
  border-top:1px solid #e6ddca;
}
.cc-badge{font-weight:700;}

/* ---------- Impressão ---------- */
@media print{
  @page{size:landscape;margin:8mm;}
  body{background:#fff;height:auto;display:block;overflow:visible;}
  .toolbar{display:none!important;}
  .share-overlay,.share-toast{display:none!important;}
  /* display:block: na impressão o canvas deixa de ser item flex,
     então o height:100vh volta a ser respeitado (senão ele colapsa). */
  .canvas-scroll{overflow:visible;padding:0;flex:none;display:block;}
  /* display:block + height:auto: containers flex não quebram entre
     páginas no Chrome. Em fluxo de bloco, o canvas cresce e empurra
     as metades para páginas seguintes quando o conteúdo transborda. */
  .canvas{box-shadow:none;border:none;width:100%;max-width:100%;
          display:block;flex:none;height:auto;padding:0;overflow:visible;
          background:#fff;}
  .canvas-body{display:block;flex:none;min-height:0;}
  /* Cada metade é uma grade de bloco com break-inside:avoid: tenta
     ficar inteira em uma página. min-height ~44vh deixa as duas
     metades + cabeçalho caberem confortavelmente em uma única
     página quando nada transborda. */
  .half{
    display:grid;
    flex:none;
    grid-template-columns:1.25fr 4.55fr;
    grid-template-rows:auto;
    gap:6px;
    min-height:44vh;
    break-inside:avoid;
    page-break-inside:avoid;   /* legado para WebKit/print antigos */
    margin-bottom:6px;
  }
  .half:last-child{margin-bottom:0;}
  /* Modo "2 páginas": só é ativado pelo JS (beforeprint) quando
     algum block-body tem conteúdo além do limite (scrollHeight >
     clientHeight). Cada metade ocupa uma página inteira; a metade
     superior força quebra de página depois de si. */
  body.print-overflow .half{min-height:92vh;}
  body.print-overflow .half-top{
    break-after:page;
    page-break-after:always;
  }
  .group-1, .group-2, .escopo-stack{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .group-3, .group-4{
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr 1fr;
    grid-template-rows:auto;
    gap:6px;
  }
  .block{display:flex;flex-direction:column;}
  .block-body{display:flex;flex-direction:column;gap:3px;
              padding:3px 5px 5px;overflow:visible;}
  .add-btn,.help-btn,.card-tools,.block-count,
  .canvas-footer{display:none!important;}
  /* Subtítulos de ajuda nunca saem na impressão, mesmo se abertos na tela. */
  .block-hint{display:none!important;}
  .card{
    box-shadow:none;
    border:1px solid #bbb;
    font-size:10px;
    padding:3px 6px;
    /* Evita que um card seja partido ao meio na quebra de página. */
    break-inside:avoid;
  }
}

/* ---------- Responsivo (telas pequenas) ----------
   Restrito a 'screen': na impressão a grade original é mantida,
   independentemente da largura da página. */
@media screen and (max-width:900px){
  .canvas-scroll{padding:10px;}
  .toolbar{padding-left:10px;padding-right:10px;gap:4px;}
  /* Em telas pequenas a grade vira coluna única: o canvas volta a
     crescer com o conteúdo e a página rola normalmente. */
  .canvas{width:100%;flex:none;min-height:100%;}
  /* Mais respiro no mobile: entre Nome e Propósito (gap) e antes do 1º bloco
     (margin-bottom). O label segue colado ao seu campo (.hdr gap menor). */
  .canvas-header{grid-template-columns:1fr;gap:20px;margin-bottom:22px;}
  /* Cabeçalho do canvas: label em cima, campo full-width na linha de baixo
     (no desktop ficam lado a lado via flex em linha). */
  .hdr{flex-direction:column;align-items:stretch;gap:3px;}
  /* Rodapé empilhado e centralizado no mobile (em vez de lado a lado com
     space-between, que apertava e quebrava as duas badges): versão em cima,
     referência embaixo, centralizadas. */
  .canvas-footer{flex-direction:column;align-items:center;gap:4px;text-align:center;}
  /* Autores em linha própria no mobile (some o separador "|" da linha). */
  .cc-sep{display:none;}
  .cc-authors{display:block;}
  /* Metades e grupos colapsam para uma única coluna empilhada.
     flex:none é essencial: no desktop o .half tem flex:1 1 0, que prende
     cada metade a ~50% da viewport; no mobile isso fazia os blocos
     transbordarem e se sobreporem (overflow visível). Aqui cada metade/
     grupo passa a crescer com o conteúdo — o canvas cresce sem limite e a
     rolagem é da página, não interna às metades. */
  .half, .group-3, .group-4{
    display:flex;
    flex-direction:column;
    flex:none;
    min-height:0;
    gap:9px;
  }
  /* Os blocos com `grow` recebem `flex:<grow> 1 0` inline (js/app.js), o que
     no empilhamento mobile colapsava a altura (flex-basis:0) e fazia blocos
     se sobreporem. Neutralizamos o flex inline: cada bloco dimensiona pelo
     conteúdo e a rolagem passa a ser da página, não interna ao bloco. */
  .block{flex:0 0 auto!important;}
  /* Bloco cresce com os cards (sem rolagem interna presa); min-height
     preservado mantém a cara de caixa do bloco vazio. */
  .block-body{overflow:visible;}
  /* No toque o pill é estático (não flutua), então a folga do 1º card
     desktop não é necessária. */
  .block-body > .card:first-child{margin-top:0;}
  /* Cabeçalho: título longo quebra linha em vez de empurrar contador/?/+
     para fora da largura — evita rolagem horizontal. */
  .block-title{min-width:0;overflow-wrap:break-word;}

  /* ---- Toolbar no mobile ----
     Reordenação por `order` (flex):
       linha 1 — [marca] ......... [presença + Compartilhar]
       linha 2 — [idioma] [Exportar] [Importar] [limpar (só ícone)]
     A colaboração sobe para o topo, junto da identidade; os utilitários
     de arquivo dividem a linha de baixo. */
  .tb-break{display:block;flex-basis:100%;height:0;margin:0;order:3;}
  .toolbar h1{order:0;min-width:0;}
  .toolbar h1 span:not(.brand-ico){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .toolbar .spacer{order:1;}
  .share-wrap{order:2;margin-left:0;}
  .lang-select{order:4;}
  .export-select{order:5;flex:1.4 1 0;min-width:0;}
  .export-trigger{width:100%;justify-content:center;}
  #btnImport{order:6;justify-content:center;}
  #btnClear{order:7;}
  /* "Imprimir" não faz sentido no celular: sai da tela. */
  #btnPrint{display:none;}
  /* Importar e Limpar viram só ícone (o rótulo continua no title);
     "Exportar projeto" fica como âncora nomeada da linha, sem quebrar. */
  #btnImport .btn-label, #btnClear .btn-label{display:none;}
  .export-trigger .btn-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Dentro da sala, o rótulo "Compartilhar" cede lugar aos avatares
     (o botão fica bolinha-de-status + ícone). */
  .share-wrap.in-room .share-btn-label{display:none;}
  /* Avatares não empurram a marca: encolhem antes do título. O padding
     dá espaço para a sombra dura (2px) do avatar, que o overflow:hidden
     cortava — o clip acontece na borda do padding, não do conteúdo. */
  .presence{flex-shrink:1;min-width:0;overflow:hidden;padding:0 3px 3px 0;}
}

/* ---------- Compartilhar (sala colaborativa em tempo real) ---------- */
.share-wrap{display:inline-flex;align-items:center;gap:8px;}
.share-wrap[hidden]{display:none;}

/* Indicador de estado da sala dentro do botão:
   cinza = fora de sala · âmbar = aguardando · verde = conectado · vermelho = erro. */
.share-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#b9b0a2;
}
.btn.primary .share-dot{background:#8d8577;}
.share-dot.wait, .btn.primary .share-dot.wait{background:#e0a72f;box-shadow:0 0 0 3px rgba(224,167,47,.25);}
.share-dot.on, .btn.primary .share-dot.on{background:#33a05a;box-shadow:0 0 0 3px rgba(51,160,90,.25);}
.share-dot.err, .btn.primary .share-dot.err{background:#b23b3b;box-shadow:0 0 0 3px rgba(178,59,59,.25);}

/* Avatares de presença (iniciais coloridas) ao lado do botão. */
.presence{display:inline-flex;align-items:center;}
.presence-avatar{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:11px;font-weight:700;color:#fff;
  border:2px solid #2a2620;
  margin-left:-7px;
}
.presence-avatar:first-child{margin-left:0;}
.presence-avatar.me{box-shadow:2px 2px 0 #2a2620;}
.presence-avatar.more{background:#6c6357;font-size:10px;letter-spacing:-.02em;}

/* Diálogo no mesmo vocabulário visual dos popovers (borda tinta, sombra dura). */
.share-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(42,38,32,.45);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.share-overlay[hidden]{display:none;}
.share-modal{
  width:100%;max-width:440px;
  background:#fffdf7;color:#2a2620;
  border:2px solid #2a2620;border-radius:12px;
  box-shadow:6px 6px 0 #2a2620;
  padding:18px 20px 14px;
}
.share-modal-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--label);font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:12px;
}
.share-modal-head .ico{display:inline-flex;}
.share-modal-head .ico svg{width:17px;height:17px;}
.share-close{
  margin-left:auto;border:none;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:#6c6357;padding:2px 6px;border-radius:7px;
}
.share-close:hover{background:#efe7d6;color:#2a2620;}

.share-desc{font-size:13.5px;line-height:1.5;margin:0 0 12px;}
.share-label{
  display:block;font-family:var(--label);font-size:10.5px;font-weight:700;
  color:#6c6357;text-transform:uppercase;letter-spacing:.05em;
  margin:10px 0 5px;
}
.share-input{
  width:100%;box-sizing:border-box;
  font-family:var(--ui);font-size:13px;color:#2a2620;
  background:#fffdf6;border:2px solid #2a2620;border-radius:8px;
  padding:7px 10px;
}
.share-input:focus{outline:2px solid #c0512c;outline-offset:1px;}
.share-link-row{display:flex;gap:8px;align-items:stretch;}
.share-link-row .share-input{flex:1;min-width:0;font-size:12px;}
.share-link-row .btn{padding:6px 11px;}
.share-cta{margin-top:14px;width:100%;justify-content:center;}
.share-peers{
  list-style:none;margin:0;padding:0;
  font-size:13px;line-height:1.7;
}
.share-peers li::before{content:'●';font-size:9px;margin-right:7px;color:#33a05a;vertical-align:1px;}
.share-status-line{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;margin:0 0 4px;
}
.share-privacy{
  font-size:11.5px;line-height:1.45;color:#6c6357;
  border-top:1px dashed #cfc5b2;margin:14px 0 0;padding-top:10px;
}

/* Aviso flutuante (link copiado, fulano entrou/saiu). */
.share-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
  z-index:110;pointer-events:none;opacity:0;
  background:#2a2620;color:#fffdf7;
  font-family:var(--ui);font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:9px;
  box-shadow:3px 3px 0 rgba(42,38,32,.35);
  transition:opacity .2s,transform .2s;
}
.share-toast.show{opacity:1;transform:translate(-50%,0);}