/* base.css (páginas por aba, etapa 1): o que toda página do Brain usa. Duas partes, cada uma na ordem em que
   estava no <style> do arquivão: (1) o começo dele, contínuo: tokens de cor, reset, a casca (.app, menu, .content,
   título da página), controles (.seg, .sel, .pill, busca) e avatares, menos .tab e a primeira pintura por data-tab,
   que eram só do arquivão e saíram com ele; (2) no fim, os componentes comuns que
   moravam mais abaixo: chips, .card, dropdown próprio, savebar e modal, toast. Trazer (2) para cima não mudou
   nenhum estilo calculado (conferido por CDP, elemento a elemento, em todas as abas, antes e depois). Toda página
   do Brain entra pela casca e carrega este arquivo, a do deal e a LP do app inclusive. */
:root{
  --page:#FAFBFD; --nav:#F4F7FD; --surface:#FFFFFF; --raised:#EFF3FA;
  --hairline:#EAEEF6; --hairline-2:#DDE4F0;
  --brand:#0082FF; --brand-ink:#FFFFFF; --brand-tint:rgba(0,130,255,.07);
  --heading:#0D2162; --body:#4A5060; --muted:#5A6478; --dim:#9098A8;
  --danger:#C43B52; --danger-tint:rgba(214,69,93,.09);
  --ok:#0B8A3E; --ok-tint:rgba(11,138,62,.10);
  --warn:#A66A12; --warn-tint:rgba(183,121,31,.10);
  --rel-alta:#D6455D; --rel-media:#E3A92A; --rel-baixa:#2BA85C;   /* relevância (14/10/2026): semáforo, eixo separado do prazo */
  --rel-alta-t:rgba(214,69,93,.12); --rel-media-t:rgba(227,169,42,.16); --rel-baixa-t:rgba(43,168,92,.12);
  --shadow:0 1px 2px rgba(13,33,98,.05),0 4px 14px rgba(13,33,98,.06);
  --shadow-up:0 4px 10px rgba(13,33,98,.09),0 10px 30px rgba(13,33,98,.10);
  --mark:rgba(0,130,255,.16); --scrim:rgba(13,33,98,.35);
  --sat:62%; --lig:42%;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--body);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:14px;line-height:1.55;min-height:100vh}
button{font-family:inherit;cursor:pointer}
select{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.mono{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--muted)}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
/* shell */
/* menu do app (B1 · Fontes + trilho com alça, 09/09/2026): fonte única, de toda página da casca */
.app{display:flex;min-height:100vh}
.sidebar{flex:0 0 240px;width:240px;background:var(--nav);border-right:1px solid var(--hairline);position:sticky;top:0;height:100vh;z-index:15;transition:width .32s cubic-bezier(.4,0,.2,1),flex-basis .32s cubic-bezier(.4,0,.2,1)}
.sb-in{display:flex;flex-direction:column;height:100%;width:216px;padding:20px 0 12px;margin:0 12px;overflow-y:auto;overflow-x:hidden;flex:none}
.sidebar .logo{width:216px;padding:4px 0 18px;display:flex;justify-content:center;transition:width .32s cubic-bezier(.4,0,.2,1),padding .32s}
.sidebar .lb,.snav .n,.me .t,.me .who svg.ic{transition:opacity .18s}
.sidebar .logo img{width:156px;display:block;transition:width .32s cubic-bezier(.4,0,.2,1)}
.sidebar svg.ic{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sidebar h4{margin:12px 0 4px;padding:0 12px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-family:'Chakra Petch',sans-serif;white-space:nowrap;overflow:hidden;flex:none;max-height:20px;transition:max-height .32s,margin .32s,opacity .18s}
.sidebar h4:first-of-type{margin-top:0}
.snav{display:flex;flex-direction:column;gap:2px}
.snav .snav-it{display:flex;align-items:center;gap:10px;width:216px;border:0;background:transparent;color:var(--body);text-decoration:none;line-height:normal;cursor:pointer;border-radius:9px;padding:7px 12px;font-size:13.5px;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden;transition:background .12s,color .12s,width .32s cubic-bezier(.4,0,.2,1)}
/* item de admin (Auditoria, Pessoas, WhatsApp) vem com `hidden` e o base.js o mostra ao admin: sem esta regra o
   display:flex acima vence o [hidden] do navegador e o membro vê o item que leva a um 404 */
.snav .snav-it[hidden]{display:none}
.snav .snav-it:hover{background:var(--surface);color:var(--heading)}
.snav .snav-it.on{background:var(--surface);color:var(--brand);font-weight:600;box-shadow:0 1px 2px rgba(13,33,98,.06)}
.snav .snav-it .n{margin-left:auto;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.snav .snav-it.on .n{color:var(--brand);opacity:.8}
.sfoot{margin-top:auto;padding-top:12px}
.me{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;width:216px;transition:width .32s cubic-bezier(.4,0,.2,1)}
.me .who{display:flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;color:inherit;transition:background .12s,padding .32s}
.me .who .av{transition:none}
.me .who:hover{background:var(--brand-tint)}
.me .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;color:#fff;background:linear-gradient(135deg,#0D2162,#0082FF)}
.me .t{min-width:0;flex:1}
.me .t b{display:block;color:var(--heading);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .t small{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .who svg.ic{color:var(--dim);width:15px;height:15px}
.me .acts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hairline);max-height:40px;overflow:hidden;transition:max-height .32s,opacity .18s}
.me .acts a{padding:8px 0;text-align:center;font-size:12px;font-weight:600;color:var(--body);text-decoration:none;white-space:nowrap}
.me .acts a+a{border-left:1px solid var(--hairline)}
.me .acts a:hover{color:var(--brand);background:var(--brand-tint)}
.me .acts a.out:hover{color:var(--danger);background:var(--danger-tint)}
/* modo senha: o "Sair" é um formulário (POST /logout); o botão tem a cara dos links ao lado */
.me .acts[hidden]{display:none}
.me .acts form{display:contents}
.me .acts button{padding:8px 0;font-size:12px;font-weight:600;color:var(--body);background:none;border:0;border-left:1px solid var(--hairline);white-space:nowrap}
.me .acts button.out:hover{color:var(--danger);background:var(--danger-tint)}
/* alça: um botão só, na borda, na linha da logo; tecla [ */
.sb-btn{position:absolute;right:-11px;top:61px;transform:translateY(-50%);width:22px;height:44px;border-radius:11px;background:var(--surface);border:1px solid var(--hairline-2);box-shadow:0 2px 8px rgba(13,33,98,.12);display:flex;align-items:center;justify-content:center;color:var(--muted);padding:0;z-index:6;transition:top .32s,color .12s,border-color .12s}
.sb-btn:hover{color:var(--brand);border-color:var(--brand)}
.sb-btn svg{transition:transform .32s}
/* trilho: recolhido vira 72px com ícones e avatar */
.app.nosb .sidebar{flex-basis:72px;width:72px} .app.nosb .sb-in{width:48px} /* o miolo acompanha o trilho; com 216px ele cobria a barra do deal e engolia o clique no '‹ deals' */
.app.nosb .sb-btn{top:44px} .app.nosb .sb-btn svg{transform:rotate(180deg)}
.app.nosb .sidebar .logo{width:48px;padding:6px 0 14px} .app.nosb .sidebar .logo img{width:44px}
.app.nosb .sidebar .lb,.app.nosb .snav .n,.app.nosb .me .t,.app.nosb .me .who svg.ic{opacity:0;pointer-events:none}
.app.nosb .sidebar h4{max-height:0;margin:0;opacity:0}
.app.nosb .snav .snav-it{width:48px;padding-left:15px;padding-right:15px}
.app.nosb .me{width:48px}
.app.nosb .me .who{padding:6px}
.app.nosb .me .acts{max-height:0;opacity:0}
body.vt-full .sidebar{display:none}
@media(max-width:840px){
  .app{flex-direction:column}
  .sidebar,.app.nosb .sidebar{position:static;height:auto;flex:none;width:auto;border-right:none;border-bottom:1px solid var(--hairline)}
  .sb-in{flex-direction:row;align-items:center;gap:8px;padding:10px 14px;margin:0;width:auto;overflow-x:auto}
  .snav .snav-it,.me{width:auto}
  .sidebar .logo,.app.nosb .sidebar .logo{width:auto;padding:0 6px 0 0} .sidebar .logo img,.app.nosb .sidebar .logo img{width:72px}
  .sidebar h4,.sb-btn{display:none!important}
  .snav{flex-direction:row;gap:4px} .snav .snav-it{padding:6px 12px;width:auto} .snav .n{display:none}
  .sfoot{margin:0 0 0 auto;padding:0} .me{border:0;background:transparent} .me .who{padding:4px} .me .t,.me .who svg.ic,.me .acts{display:none}
}/*@logo-texto:ini*/
/* nome da instância em texto no lugar da logo (tarefa 1.16). Este bloco só fica na página quando o
   vault não tem o arquivo da logo: com a imagem, o servidor o corta inteiro, marcadores inclusive,
   e a página sai byte a byte como era. Tipografia e cor do próprio menu (Chakra Petch, --heading);
   recolhido, a forma curta; a alça desce para a altura do texto, que é mais baixo que a imagem */
.sidebar .logo .marca{display:block;max-width:100%;font-family:'Chakra Petch',sans-serif;font-weight:700;line-height:28px;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.sidebar .logo .marca-l{font-size:20px;letter-spacing:.01em}
.sidebar .logo .marca-c{display:none;font-size:15px;letter-spacing:.03em}
.app.nosb .sidebar .logo .marca-l{display:none} .app.nosb .sidebar .logo .marca-c{display:inline}
/* no base.css o bloco fica mesmo com a logo em imagem (o arquivo é um só para toda instância): por isso a alça só
   desce quando o nome em texto está no menu, e as regras acima só valem para .marca */
.sidebar:has(.logo .marca) .sb-btn{top:38px} .app.nosb .sidebar:has(.logo .marca) .sb-btn{top:40px}
@media(max-width:840px){
  .sidebar .logo .marca-l,.app.nosb .sidebar .logo .marca-l{display:inline;font-size:16px}
  .sidebar .logo .marca-c,.app.nosb .sidebar .logo .marca-c{display:none}
}
/*@logo-texto:fim*/
.content{flex:1;min-width:0;padding:26px 40px 120px}
.content>section,.content>p.foot{max-width:none;margin-left:auto;margin-right:auto}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
/* alternador de vista no cabeçalho (Lista/Kanban dos Deals, Usuários/Frentes das Pessoas) */
.pagehead .vsw{margin-left:2px}
h1{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--heading)}
.meta{font-size:12.5px;color:var(--muted)}
/* controles */
.seg{display:inline-flex;border:1px solid var(--hairline-2);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--muted);padding:5px 14px;font-size:12.5px;font-weight:600;transition:all .12s}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
.controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px;position:sticky;top:0;background:var(--page);padding:10px 0;z-index:5}
.sel{appearance:none;-webkit-appearance:none;border:1px solid var(--hairline-2);background:var(--surface);color:var(--body);border-radius:999px;padding:5px 26px 5px 13px;font-size:12.5px;font-weight:600;outline:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.sel:hover{border-color:var(--brand)}
.pill{border:1px solid var(--hairline-2);background:var(--surface);color:var(--body);border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;font-family:inherit;white-space:nowrap;transition:all .12s}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .pill.primary:hover{background:#0070DD;color:var(--brand-ink)}
.search{flex:1;min-width:170px}
.search input{width:100%;background:var(--surface);border:1px solid var(--hairline-2);border-radius:999px;color:var(--heading);padding:6px 14px;font-size:13px;font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
/* avatares e cores de entidade */
.av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;flex:none}
.dot-e{display:inline-block;width:9px;height:9px;border-radius:3px;flex:none}
/* componentes comuns que vieram de mais abaixo no arquivão: chips, card, dropdown próprio, savebar e modal, toast */
/* chips */
.chip{display:inline-block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.04em;border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:1px}
.chip.due{color:var(--muted);border:1px solid var(--hairline-2)}
.chip.due.u1{color:var(--warn);border-color:currentColor}
.chip.due.u0{color:var(--danger);background:var(--danger-tint);border-color:transparent}
.chip.crit{color:var(--danger);border:1px solid currentColor}
.chip.pf{color:var(--ok);background:var(--ok-tint);border:1px solid transparent;cursor:help}
.chip.pa{color:var(--b3);background:var(--b1);border:1px solid transparent;cursor:help}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:11px;padding:10px 12px;margin-bottom:8px;font-size:13px;box-shadow:var(--shadow);transition:box-shadow .13s,opacity .13s;cursor:grab}
.card:hover{box-shadow:var(--shadow-up)}
.card:active{cursor:grabbing}
.card.dragging{opacity:.4}
/* dropdown próprio (16/09/2026): o <select> nativo fica escondido e continua sendo a fonte da verdade (value, change);
   o botão mostra a opção escolhida e o menu abre ancorado abaixo, com busca quando a lista é longa */
.dd{position:relative;display:inline-flex;max-width:100%;vertical-align:middle}
.dd select.dd-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0;margin:0;padding:0;border:0}
.dd-b{appearance:none;border:1px solid var(--hairline-2);background:var(--surface);color:var(--heading);border-radius:999px;padding:5px 10px 5px 13px;font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;max-width:100%;line-height:1.3;transition:border-color .12s,box-shadow .12s;text-align:left}
.dd-b:hover{border-color:var(--brand)} .dd.on .dd-b{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.dd-b .dd-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .dd-b .dd-l .av{width:20px;height:20px;font-size:8.5px;margin-right:6px;vertical-align:middle}
.dd-b svg{width:12px;height:12px;flex:none;color:var(--dim);transition:transform .15s} .dd.on .dd-b svg{transform:rotate(180deg)}
.dd-b:disabled{opacity:.5;cursor:default}
.modal .dd{width:100%} .modal .dd-b{width:100%;justify-content:space-between;border-radius:10px;padding:8px 12px}
.dd-add .dd-b{border-style:dashed;color:var(--brand);background:var(--raised)}
.dd-mini .dd-b{width:26px;height:26px;padding:0;justify-content:center;border-radius:50%;border:1px dashed var(--brand);color:var(--brand);background:var(--surface);font-size:15px;font-weight:500;line-height:1} .dd-mini .dd-b svg{display:none} .dd-mini .dd-b:hover{background:var(--brand-tint)}
.dd-m{position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--hairline-2);border-radius:12px;box-shadow:0 14px 36px rgba(13,33,98,.16);padding:6px;min-width:210px;max-width:360px;display:flex;flex-direction:column;animation:ddin .12s ease-out;box-sizing:border-box}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-m .dd-s{margin:2px 2px 6px;padding:7px 10px;border:1px solid var(--hairline-2);border-radius:8px;font:inherit;font-size:12.5px;outline:none;background:var(--raised);color:var(--heading)} .dd-m .dd-s:focus{border-color:var(--brand);background:var(--surface)}
.dd-m .dd-ls{overflow-y:auto;max-height:290px;scrollbar-width:thin}
.dd-m .dd-i{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dd-m .dd-i:hover,.dd-m .dd-i.k{background:var(--raised);color:var(--heading)}
.dd-m .dd-i.on{color:var(--brand);font-weight:600} .dd-m .dd-i .ck{margin-left:auto;font-size:11px;color:var(--brand);opacity:0;padding-left:10px} .dd-m .dd-i.on .ck{opacity:1}
.dd-m .dd-i .av{width:22px;height:22px;font-size:9px;flex:none} .dd-m .dd-i .dd-t{overflow:hidden;text-overflow:ellipsis}
.dd-m .dd-e{padding:8px 10px;font-size:12px;color:var(--dim);font-style:italic}
.dd-b .dd-n{color:var(--dim);font-weight:500}
.dd-m .dd-i .dd-c{margin-left:auto;padding-left:14px;font-size:11px;font-weight:400;color:var(--dim)} .dd-m .dd-i .dd-c+.ck{margin-left:0}
.dd-multi .dd-i .ck{opacity:1;width:16px;height:16px;border:1.5px solid var(--hairline-2);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:transparent;padding:0;box-sizing:border-box}
.dd-multi .dd-i.on .ck{background:var(--brand);border-color:var(--brand);color:#fff}
.dd-multi .dd-i:not(.on){color:var(--dim)}
.dd-multi .dd-i.dd-sep{border-bottom:1px solid var(--hairline);border-radius:8px 8px 0 0;margin-bottom:3px}
.dd-multi .dd-i.dd-grp{font-weight:600}
/* savebar / modal */
.savebar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;display:none;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hairline-2);border-radius:999px;padding:8px 10px 8px 18px;box-shadow:var(--shadow-up);z-index:20;animation:enter .2s ease}
.savebar .msg{font-size:13px}
.savebar .msg b{color:var(--heading)}
.saveb{border:0;background:var(--brand);color:var(--brand-ink);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700;transition:filter .12s}
.saveb:hover{filter:brightness(1.07)}
.ghostb{border:0;background:transparent;color:var(--muted);font-size:12px;padding:5px 7px}
.ghostb:hover{color:var(--danger)}
.modal-scrim{position:fixed;inset:0;background:var(--scrim);display:none;align-items:center;justify-content:center;z-index:30;padding:20px}
.modal{background:var(--surface);border:1px solid var(--hairline-2);border-radius:16px;max-width:620px;width:100%;padding:22px;box-shadow:var(--shadow-up);animation:enter .2s ease}
.modal h4{font-family:'Chakra Petch',sans-serif;color:var(--heading);font-size:16px;margin-bottom:4px}
.modal p{font-size:13px;color:var(--muted);margin-bottom:12px}
.modal textarea{width:100%;height:190px;background:var(--raised);border:1px solid var(--hairline-2);border-radius:11px;color:var(--body);font-family:'Space Mono',monospace;font-size:11.5px;padding:11px;resize:vertical;outline:none}
.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
/* campos das fichas (rótulo, texto, select, duas colunas, opcional, ação à esquerda, dica): do arquivão e da ficha
   do app (Apps); vieram do CSS do arquivão na etapa 2 */
.modal label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--dim);margin:12px 0 5px}
.modal input[type=text]{width:100%;background:var(--raised);border:1px solid var(--hairline-2);border-radius:10px;color:var(--heading);font-family:inherit;font-size:13.5px;padding:9px 12px;outline:none}
.modal input[type=text]:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.modal .sel{width:100%}
.modal label .opt{letter-spacing:0;text-transform:none;font-family:inherit;font-size:11px;color:var(--dim)}
.modal .row .left{margin-right:auto}
.modal .hint{font-size:11.5px;color:var(--dim);margin-top:6px}
.modal .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.empty{color:var(--dim);text-align:center;padding:44px 0;font-size:13.5px;display:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;display:none;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hairline-2);border-radius:999px;padding:8px 18px;box-shadow:var(--shadow-up);z-index:20;font-size:13px;color:var(--body);animation:enter .2s ease}
.toast.err{border-color:var(--danger);color:var(--danger)}
.toast.ok{border-color:var(--ok)}
/* cartão branco de lista (.dcard): de várias abas (Passadas, Pendências, Auditoria, Pessoas, Deals); veio do CSS do arquivão na etapa 2 */
.dcard{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
/* meta à direita no cabeçalho e pill desabilitada: de várias abas; vieram do CSS do arquivão na etapa 2 */
.pagehead .meta{margin-left:auto}
.pill:disabled{opacity:.55;pointer-events:none}
/* botão de texto (.mvb) e a variante verde: do kanban e das Pendências; vieram do CSS do arquivão na etapa 2 */
.mvb{border:0;background:transparent;color:var(--dim);padding:2px 5px;font-size:12px;border-radius:6px}
.mvb:hover{color:var(--brand);background:var(--brand-tint)}
.mvb.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
/* aviso "servidor fora do ar" (o poll do base.js liga e desliga): a casca o põe no topo do <main> de toda página */
.offline{display:none;background:var(--warn-tint);color:var(--warn);border:1px solid currentColor;border-radius:10px;padding:8px 14px;font-size:12.5px;margin-bottom:14px}
/* a entrada suave de linha, card e quadro (o arquivão e os Deals) */
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* botão da demo: anda o acervo para a semana corrente (só admin, só com [pagina] simulacao) */
/* botão verde (.pill.ok): da ficha das Tarefas; veio do CSS do arquivão na etapa 4 */
.pill.ok{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .pill.ok:hover{background:#0070DD;color:var(--brand-ink)}
/* chip de temperatura: da tabela dos Deals e das propriedades de uma nota do Vault; veio do deals.css na etapa 4 */
.chip.temp-quente{color:var(--danger);background:var(--danger-tint)}
.chip.temp-morno{color:var(--warn);background:var(--warn-tint)}
.chip.temp-frio{color:var(--dim);background:var(--raised)}
/* botão de texto azul (.xbtn): do modal de tarefa nova das Tarefas e do aviso de exportação do Vault; veio do CSS do arquivão
   na etapa 4 */
.xbtn{border:0;background:transparent;color:var(--brand);padding:2px 4px;font-size:12px;font-weight:600}
.xbtn:hover{text-decoration:underline;text-underline-offset:3px}
/* o miolo e a barra de salvar no celular: de toda página (eram do arquivão, que todas as abas usavam); vieram do
   CSS do arquivão na etapa 4 */
@media(max-width:840px){
  .content{padding:18px 16px 120px}
  .savebar{width:calc(100% - 32px)}
}