/* Aliases semânticos 100% sobre @peers/tokens (tokens.css) — zero cor hardcoded. */
:root {
  --blue: var(--color-brand-blue);
  --lime: var(--color-brand-lime);
  --serene: var(--color-brand-serene);
  --white: var(--color-brand-white);
  --grey1: var(--color-brand-scale-blue-02);
  --grey3: var(--color-brand-scale-blue-04);
  --ser2: var(--color-brand-scale-serene-02);
  --ser3: var(--color-brand-scale-serene-03);
  --fh: var(--typography-font-family-secondary);
  --fn: var(--typography-font-family-primary);
  --ok: var(--color-semantic-success-main);
  --warn: var(--color-semantic-warning-main);
  --err: var(--color-semantic-error-main);
  --bg: var(--color-brand-white);
  --bg2: var(--color-brand-scale-serene-03);
  --ink: var(--color-brand-blue);
  --muted: var(--color-brand-scale-blue-02);
  --line: var(--color-brand-scale-blue-04);
  --radius: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
}
/* Tema escuro. Vale por preferência do sistema OU por escolha explícita (data-theme no
   <html>, gravado no localStorage). O :not([data-theme="light"]) é o que permite escolher
   claro numa máquina configurada em escuro — sem ele, o sistema venceria sempre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--color-neutral-900);
    --bg2: var(--color-neutral-800);
    --ink: var(--color-brand-white);
    --muted: var(--color-neutral-500);
    --line: var(--color-neutral-700);
  }
}
:root[data-theme="dark"] {
  --bg: var(--color-neutral-900);
  --bg2: var(--color-neutral-800);
  --ink: var(--color-brand-white);
  --muted: var(--color-neutral-500);
  --line: var(--color-neutral-700);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* `hidden` é o jeito do HTML de esconder algo, mas ele só vale enquanto ninguém declarar um
   `display` — e `.fld { display: block }` anulava o atributo, deixando à mostra os campos
   que o formulário de compartilhamento escondia (senha em link interno, lista de artefatos
   em escopo de seção). Uma regra, e o atributo volta a significar o que promete. */
[hidden] { display: none !important; }
body { font-family: var(--fn); background: var(--bg); color: var(--ink); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* Header */
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; }
.brand { font-family: var(--fh); font-weight: 800; letter-spacing: 0.02em; }
.brand span { color: var(--muted); font-weight: 600; }
.crumbs { flex: 1; font-size: 0.9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.user { font-size: 0.85rem; color: var(--muted); }
/* Quadrado: o ícone muda de largura (◐ ☾ ☀) e sem tamanho fixo o botão pularia a cada clique. */
.theme-btn { width: 34px; height: 32px; padding: 0; display: grid; place-items: center; font-size: 0.95rem; line-height: 1; }
.btn { font-family: var(--fn); font-weight: 700; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--lime); color: var(--blue); border-color: var(--lime); }
.btn:hover { border-color: var(--ink); }
.agent-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.vscode-btn { font-size: 0.78rem; padding-inline: 0.6rem; width: auto; }
.agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: 0.45; flex: none; transition: background 0.2s, box-shadow 0.2s, opacity 0.2s; }
.agent-dot.ok { background: #06A56F; opacity: 1; box-shadow: 0 0 0 3px rgba(6, 165, 111, 0.18); }
.agent-chip.connected { border-color: rgba(6, 165, 111, 0.5); color: #06A56F; }

/* Main */
.wrap { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem; }
.page-title { font-family: var(--fh); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.page-sub { color: var(--muted); margin-bottom: 2rem; }

/* Grid de cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card { display: block; padding: 1.25rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; transition: transform 0.15s, border-color 0.15s; }
.card:hover { transform: translateY(-2px); border-color: var(--lime); }
.card h3 { font-family: var(--fh); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; }
.card .meta { font-size: 0.82rem; color: var(--muted); }
.card-owner { font-size: 0.8rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.card-dates { font-size: 0.75rem; margin-top: 0.2rem; }

/* Pill — badge de papel no painel de acesso */
.pill { font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; }

/* Login — card de marca (cara de DS), discreto: só a marca + entrar */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-3); background: var(--color-brand-blue); }
.login-card { width: 100%; max-width: 400px; padding: var(--spacing-5) var(--spacing-4); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); background: color-mix(in srgb, var(--color-brand-blue) 88%, black); border: 1px solid color-mix(in srgb, var(--color-brand-white) 10%, transparent); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); }
.login-logo { width: 150px; height: auto; opacity: 0.95; margin-bottom: var(--spacing-1); }
.btn-ms { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1rem; border: 0; border-radius: var(--border-radius-md); background: var(--color-brand-lime); color: var(--color-brand-blue); font-family: var(--fn); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.btn-ms:hover { background: color-mix(in srgb, var(--color-brand-lime) 85%, black); }
.login-foot { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-brand-white) 45%, transparent); }
.notice { padding: 0.9rem 1rem; border-radius: var(--border-radius-md); font-size: 0.9rem; width: 100%; }
.notice.err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--color-semantic-error-light); border: 1px solid color-mix(in srgb, var(--err) 35%, transparent); }

/* Painel de acesso (membros) */
.access-panel { margin-top: 2.5rem; padding: 1.5rem; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.access-h { font-family: var(--fh); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.member-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.member-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.member-email { flex: 1; font-size: 0.9rem; }
.pill.role { background: var(--ser2); color: var(--blue); border-color: var(--serene); }
.add-member { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.add-member input, .add-member select { font-family: var(--fn); font-size: 0.9rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.add-member input { flex: 1; min-width: 220px; }

.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn.danger:hover { border-color: var(--err); }
.btn.xs { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

/* Painel admin — cabeçalho de lista: título à esquerda, busca e filtros à direita. */
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.adm-head .access-h { margin-bottom: 0; }
.adm-count { font-weight: 400; font-size: 0.85rem; }
.adm-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.adm-search { font-family: var(--fn); font-size: 0.85rem; padding: 0.4rem 0.7rem; min-width: 260px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.adm-search:focus { outline: none; border-color: var(--ink); }
.adm-chk { font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
/* Paginador: vazio quando cabe numa página só — por isso não tem margem fixa. */
.adm-pager { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; font-size: 0.8rem; }
.adm-pager:not(:empty) { margin-top: 0.9rem; }
.adm-pager .btn.xs:disabled { opacity: 0.4; cursor: default; }
.adm-pager .btn.xs:disabled:hover { border-color: var(--line); }

/* Cabeçalho de página (título + ação) */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.page-head .page-sub { margin-bottom: 0; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-brand-blue) 55%, transparent); display: grid; place-items: center; padding: 1.5rem; z-index: 100; }
.modal { width: 100%; max-width: 440px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-xl); max-height: 90vh; overflow-y: auto; }
/* Modais DS (dsPrompt/dsConfirm/dsAlert): mesmo visual do .modal-overlay, mas com z-index
   próprio (definido inline no JS, empilhando acima de tudo) — herdam o resto do estilo daqui. */
.modal-overlay.ds-modal { background: color-mix(in srgb, var(--color-brand-blue) 65%, transparent); }
.modal-h { font-family: var(--fh); font-weight: 800; font-size: 1.2rem; margin-bottom: 1.25rem; }
.fld { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.9rem; }
.fld input { display: block; width: 100%; margin-top: 0.3rem; font-family: var(--fn); font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }
.modal .member-list { margin-bottom: 1rem; }
/* No modal (440px) o input, o select e o botão não cabem na mesma linha: com min-width: 0 o
   input cedia todo o espaço e sobrava campo para ~3 letras. Linha própria para o e-mail. */
.modal .add-member input { flex: 1 1 100%; min-width: 0; }
.modal-p { font-size: 0.92rem; color: var(--ink); margin-bottom: 1.25rem; }
.steps { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }
.step { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.4; }
.step-n { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--blue); font-weight: 800; font-size: 0.78rem; margin-top: 1px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.86em; background: var(--bg2); padding: 0.1rem 0.35rem; border-radius: 4px; }
.code-block { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.85rem; margin-top: 0.5rem; overflow-x: auto; white-space: pre; line-height: 1.45; }
.cmd-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.5rem; }
.cmd-row .code-block { flex: 1; margin-top: 0; white-space: pre-wrap; word-break: break-all; }
.cmd-row .btn { flex-shrink: 0; align-self: flex-start; }
.cmd-os { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 0.7rem; }
.conn-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.conn-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; padding: 0.2rem 0; }
.conn-k { color: var(--muted); }
.conn-v { font-weight: 600; }
.modal-note { font-size: 0.8rem; }
/* Tutorial de primeiro acesso: contador + pontos de progresso, e a lista do passo. A altura
   mínima segura o modal no lugar entre passos de 3 e de 4 linhas — sem ela os botões pulam. */
.tut-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.tut-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tut-dots { display: inline-flex; gap: 5px; }
.tut-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tut-dots i.on { background: var(--lime); }
#tut-body .modal-h { margin-bottom: 0.9rem; }
.tut-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; min-height: 11.5rem; font-size: 0.92rem; line-height: 1.45; }
.tut-list li { padding-left: 0.9rem; border-left: 2px solid var(--line); }
.tut-skip { margin-right: auto; border-color: transparent; color: var(--muted); }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* Autoria no browser: editor simples + selo avançado do agente */
.tag-adv { font-family: var(--fn); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); border-radius: 20px; padding: 0.12rem 0.5rem; margin-left: 0.4rem; }
.modal.wide { max-width: 560px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.seg-btn { font-family: var(--fn); font-weight: 700; font-size: 0.82rem; padding: 0.4rem 0.95rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg-btn.active { background: var(--lime); color: var(--blue); }
.editor-toolbar { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.editor-toolbar .ed { font-family: var(--fn); font-size: 0.8rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; }
.editor-toolbar .ed:hover { border-color: var(--ink); }
.editor-area { min-height: 180px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.85rem; font-size: 0.95rem; background: var(--bg); color: var(--ink); }
.editor-area:focus { outline: 2px solid color-mix(in srgb, var(--lime) 55%, transparent); outline-offset: 1px; }
.editor-area:empty:before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.6rem; border: 1px dashed var(--line); border-radius: var(--radius); cursor: pointer; text-align: center; color: var(--muted); }
.drop:hover { border-color: var(--lime); color: var(--ink); }
.drop-ico { font-size: 1.4rem; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.tag { font-family: var(--fn); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: 20px; background: var(--ser2); color: var(--blue); border: 1px solid var(--serene); white-space: nowrap; }
.tag-toggle { cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.tag-toggle.on { background: var(--lime); color: var(--blue); border-color: var(--lime); }
.fld-hint { font-weight: 400; color: var(--muted); font-size: 0.72rem; }

/* Modo apresentação — janela flutuante sobre o portal esmaecido; fullscreen é opcional */
.present-scrim { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: color-mix(in srgb, var(--color-brand-blue) 35%, rgba(0, 0, 0, 0.62)); }
.present-window { --pbar-h: 50px; position: relative; width: 90vw; height: 90vh; min-width: 320px; min-height: 240px; display: flex; flex-direction: column; background: var(--color-brand-blue); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
/* Em fullscreen nativo a janela vira a tela inteira — o browser troca o layout via este seletor. */
.present-window:fullscreen, .present-window.fs { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.present-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; background: color-mix(in srgb, var(--color-brand-blue) 82%, black); color: var(--color-brand-white); transition: opacity 0.25s, transform 0.25s; }
/* Em janela a barra é fixa — nada de aparecer/sumir com o mouse.
   Projetando (fullscreen, classe .fs vinda do JS — :fullscreen não cobre o Safari com prefixo)
   ela sai de cena e só volta com .peek, quando o cursor encosta na borda de cima. */
.present-window.fs .present-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.present-window.fs.peek .present-bar { opacity: 1; transform: none; pointer-events: auto; }
.present-window.fs .present-frame { margin-top: 0; }
/* Espelho pelo pseudo-seletor nativo, caso o evento de fullscreen não chegue ao JS. */
.present-window:fullscreen .present-bar { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.present-window:fullscreen.peek .present-bar { opacity: 1; transform: none; pointer-events: auto; }
.present-window:fullscreen .present-frame { margin-top: 0; }
/* Saída discreta, sempre clicável — em fullscreen a barra pode estar recolhida. */
.present-escape { position: absolute; top: 10px; right: 12px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-brand-blue) 70%, black); color: var(--color-brand-white); font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0.25; transition: opacity 0.2s; }
.present-escape:hover, .present-escape:focus-visible { opacity: 1; }
.present-window:not(.fs) .present-escape, .present-window.fs.peek .present-escape { opacity: 0; pointer-events: none; } /* a barra visível já tem o ✕ dela */
.present-window:fullscreen:not(.peek) .present-escape { opacity: 0.25; pointer-events: auto; }
.present-title { flex: 1; font-family: var(--fh); font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.present-nav { display: flex; align-items: center; gap: 0.4rem; }
.present-pos { font-size: 0.8rem; color: color-mix(in srgb, var(--color-brand-white) 65%, transparent); margin-right: 0.5rem; font-variant-numeric: tabular-nums; }
.present-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-brand-white) 25%, transparent); border-radius: 8px; background: transparent; color: var(--color-brand-white); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.present-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-brand-white) 12%, transparent); }
.present-btn:disabled { opacity: 0.35; cursor: default; }
/* Menu do botão de download (HTML ou PDF) — ancorado no botão, dentro da barra. */
.present-dl { position: relative; display: inline-flex; }
.present-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 4; display: flex; flex-direction: column; min-width: 220px; padding: 0.25rem; border-radius: 10px; background: color-mix(in srgb, var(--color-brand-blue) 92%, black); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.present-menu button { border: 0; background: transparent; color: var(--color-brand-white); font: inherit; font-size: 0.85rem; text-align: left; padding: 0.5rem 0.7rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.present-menu button:hover, .present-menu button:focus-visible { background: color-mix(in srgb, var(--color-brand-white) 14%, transparent); }
/* Com a barra visível o conteúdo desce a altura dela; em fullscreen o slide é full-bleed
   e a barra, quando espiada, passa por cima sem empurrar nada. */
.present-frame { flex: 1; width: 100%; border: 0; background: var(--color-brand-white); margin-top: var(--pbar-h); transition: margin-top 0.25s; }

/* Projeto: header + timeline em uma página só */
.proj { display: flex; flex-direction: column; height: calc(100vh - 58px); }
.proj-head { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.proj-title { font-family: var(--fh); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.proj-client { font-size: 0.85rem; }
.proj-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.proj-eyebrow { font-family: var(--fh); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
.btn.icon-btn { letter-spacing: 2px; padding: 0.45rem 0.7rem; line-height: 1; }
#proj-sync { letter-spacing: 0; font-size: 1rem; }
/* Gira só o glifo, não o botão — o quadrado girando inteiro parecia defeito. */
#proj-sync .sync-ico { display: inline-block; }
#proj-sync.spinning .sync-ico { animation: spin 0.8s linear infinite; }
#proj-sync.spinning { opacity: 0.7; }
/* Sincronizando: o conteúdo atual esmaece e trava cliques até a versão nova assumir. */
body.sync-veil main, body.sync-veil .tl-wrap { opacity: 0.55; pointer-events: none; transition: opacity 0.2s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.sync-note { font-size: 0.75rem; }

/* Menu popover (••• e ações do card) */
.menu-pop { position: fixed; z-index: 150; min-width: 190px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 0.35rem; }
.menu-sec { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.35rem 0.6rem 0.25rem; }
.menu-item { display: block; width: 100%; text-align: left; font-family: var(--fn); font-size: 0.85rem; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 7px; padding: 0.45rem 0.6rem; cursor: pointer; }
.menu-item:hover { background: var(--bg2); }
.menu-item.on { color: var(--blue); background: color-mix(in srgb, var(--lime) 18%, transparent); }
.menu-item.danger { color: var(--err); }
.menu-div { height: 1px; background: var(--line); margin: 0.35rem 0.3rem; }

/* Explorer (esquerda) + canvas do projeto + painel lateral (direita) */
.proj-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr 300px; }
.proj-body.side-off { grid-template-columns: 260px 1fr 0; }
.proj-body.nav-off { grid-template-columns: 0 1fr 300px; }
.proj-body.nav-off.side-off { grid-template-columns: 0 1fr 0; }
.proj-body.side-off .side { display: none; }
.proj-body.nav-off .nav { display: none; }
.tlm-wrap { min-height: 0; overflow-y: auto; }
.tlm { max-width: 1200px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3%, 2rem) 4rem; }
.tlm-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* Seção no canvas */
.dk-sec { margin-bottom: 2.25rem; }
.dk-sec.sec-dragging { opacity: 0.4; }
.dk-sec-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.dk-sec-h[draggable="true"] { cursor: grab; }
.dk-sec-grip { color: var(--muted); line-height: 1; font-size: 0.9rem; }
.dk-sec-name { flex: 0 1 auto; min-width: 0; font-family: var(--fh); font-weight: 800; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 0.1rem 0; }
.dk-sec-name:focus { outline: none; border-bottom-color: var(--lime); }
.dk-sec-name.static { font-family: var(--fh); font-weight: 800; font-size: 1.05rem; }
/* Ações da seção: discretas até o cabeçalho receber o mouse, mas sempre focáveis por teclado. */
.dk-sec-menu { font-size: 0.8rem; line-height: 1; color: var(--muted); background: transparent; border: 0; border-radius: 6px; padding: 0.25rem 0.4rem; cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.dk-sec-menu.far { margin-left: auto; }
.dk-sec-h:hover .dk-sec-menu, .dk-sec-menu:focus-visible { opacity: 1; }
.dk-sec-menu:hover { color: var(--blue); background: var(--lime); }
@media (hover: none) { .dk-sec-menu { opacity: 1; } }
.dk-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 12px; padding: 1.5rem; text-align: center; font-size: 0.82rem; }
.dk-newsec { display: block; width: 100%; max-width: 260px; font-family: var(--fn); font-weight: 700; font-size: 0.82rem; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: 10px; padding: 0.7rem; cursor: pointer; }
.dk-newsec:hover { color: var(--blue); border-color: var(--lime); }

/* Painel lateral */
.side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); }
.sd-ctl { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-bottom: 1px solid var(--line); }
.sd-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.sd-h { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.75rem 0.4rem; }
.sd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0.5rem 0.6rem; }
.sd-search { margin: 0 0.75rem 0.5rem; font-family: var(--fn); font-size: 0.8rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--ink); }
.sd-search:focus { outline: none; border-color: var(--lime); }
.sd-row { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; font-family: var(--fn); font-size: 0.8rem; color: var(--ink); background: transparent; border: 0; border-radius: 7px; padding: 0.35rem 0.5rem; cursor: pointer; }
.sd-row:hover { background: var(--bg2); }
.sd-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.sd-dot.link { background: var(--muted); }
.sd-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linha do índice que trouxe trecho de conteúdo cresce para duas linhas — sem isso o trecho
   ficaria cortado pelo ellipsis do título. */
.sd-row.has-trecho { align-items: flex-start; }
.sd-row.has-trecho .sd-row-t { white-space: normal; }
.sd-row .scard-trecho { padding: 0.1rem 0 0; }
.sd-row-d { flex-shrink: 0; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.sd-empty { font-size: 0.78rem; padding: 0.6rem 0.5rem; }

@media (max-width: 1000px) {
  .proj-body, .proj-body.side-off, .proj-body.nav-off, .proj-body.nav-off.side-off { grid-template-columns: 1fr; }
  .nav { position: fixed; top: 58px; left: 0; bottom: 0; width: min(300px, 85vw); z-index: 60; box-shadow: var(--shadow-xl); }
  .side { position: fixed; top: 58px; right: 0; bottom: 0; width: min(320px, 88vw); z-index: 60; box-shadow: var(--shadow-xl); }
}
.seg.small { margin-bottom: 0; }
.seg.small .seg-btn { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.tlm-controls .tlm-filter { margin-left: auto; } /* empurra o filtro de tags pra direita */

/* Mini timeline — régua sticky de navegação */
.mtl { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-end; gap: 0.9rem; overflow-x: auto; padding: 0.5rem 0 0.6rem; margin-bottom: 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.mtl-sec { display: flex; flex-direction: column; gap: 0.25rem; flex-shrink: 0; }
.mtl-sec + .mtl-sec { border-left: 1px solid var(--line); padding-left: 0.9rem; }
.mtl-sec-name { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtl-ticks { display: flex; gap: 3px; }
.mtl-tick { width: 7px; height: 14px; padding: 0; border: 0; border-radius: 2px; background: var(--lime); opacity: 0.5; cursor: pointer; transition: opacity 0.12s, transform 0.12s; }
.mtl-tick.link { background: var(--muted); }
.mtl-tick:hover { opacity: 1; transform: scaleY(1.25); }
.mtl-tick.on { opacity: 1; transform: scaleY(1.4); }
.mtl-tick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tlm-entry.flash .tlm-card, .scard.flash, .dk-attach.flash { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 35%, transparent); }
.tlm-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tlm-group { margin-bottom: 1.75rem; }
.tlm-group-h { display: flex; align-items: center; gap: 0.5rem; font-family: var(--fh); font-weight: 800; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.75rem; }
.tlm-group-n { font-family: var(--fn); font-weight: 700; font-size: 0.7rem; color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); border-radius: 20px; padding: 0.05rem 0.5rem; }
.tlm-group-imp { color: var(--muted); font-size: 0.8rem; cursor: help; }
.tlm-group-deck { margin-left: auto; font-size: 0.9rem; color: var(--muted); text-decoration: none; padding: 0.1rem 0.4rem; border-radius: 6px; }
.tlm-group-deck:hover { color: var(--blue); background: var(--lime); }

/* Gestor: modal de compartilhamento */
/* Painel de compartilhar: três blocos, um por pergunta (o quê, para quem, por quanto tempo).
   As opções são botões-cartão em vez de <select>: a escolha e a consequência de cada uma
   ficam visíveis ao mesmo tempo, que é o que o select escondia. */
.shm2 { display: flex; flex-direction: column; gap: 1.1rem; margin: 0.9rem 0 1.1rem; }
.shm-bloco { display: flex; flex-direction: column; gap: 0.5rem; }
.shm-lab { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.shm-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.shm-opts.dois { grid-template-columns: repeat(2, 1fr); }
.shm-opt { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; text-align: left; cursor: pointer;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--ink); }
.shm-opt strong { font-size: 0.85rem; }
.shm-opt span { font-size: 0.72rem; color: var(--muted); line-height: 1.3; }
.shm-opt:hover { border-color: var(--muted); }
.shm-opt.on { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 10%, var(--bg2)); }
.shm-opt.on strong { color: var(--ink); }
.shm-pick-k { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.shm-pick-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) { .shm-opts, .shm-opts.dois { grid-template-columns: 1fr; } }
.shm-picks { display: flex; flex-direction: column; gap: 0.3rem; max-height: 220px; overflow-y: auto; margin-top: 0.4rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; }
.shm-pick { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.shm-list { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.shm-list-h, .shm-ready-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.shm-ready { background: color-mix(in srgb, var(--lime) 12%, transparent); border: 1px solid var(--lime); border-radius: 10px; padding: 0.75rem; margin-bottom: 1rem; }
.shm-ready-h { color: var(--blue); }
.shm-url { flex: 1; font-size: 0.72rem; overflow-x: auto; white-space: nowrap; }
.shm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--line); }
.shm-row-main { flex: 1; min-width: 0; }
.shm-row-sub { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.72rem; margin-top: 0.15rem; }
/* Chip da audiência: a diferença entre um link que pede SSO e um que qualquer um abre é a
   informação mais importante desta lista — merece cor, não só texto. */
.shm-aud { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.62rem; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid var(--warn); color: var(--warn); }
.shm-aud.int { border-color: var(--ok); color: var(--ok); }
.shm-restrito { font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.shm-people { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.shm-people:empty { display: none; }
.shm-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; padding: 0.1rem 0.2rem 0.1rem 0.55rem; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.shm-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 0.3rem; }
.shm-chip button:hover { color: var(--ink); }
.shm-busca { position: relative; }
.shm-busca input { width: 100%; }
.shm-sugs { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); max-height: 240px; overflow-y: auto; }
.shm-sug { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0.45rem 0.7rem; cursor: pointer; }
.shm-sug:last-child { border-bottom: 0; }
.shm-sug:hover, .shm-sug:focus-visible { background: var(--bg2); }
.shm-sug strong { font-size: 0.82rem; }
.shm-sug span { font-size: 0.72rem; color: var(--muted); }
.shm-sug-vazio { font-size: 0.78rem; padding: 0.5rem 0.7rem; }
.shm-preview { font-size: 0.8rem; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; margin: -0.3rem 0 0.9rem; }
.shm-preview strong { color: var(--ink); }
.shm-prev-vivo, .shm-prev-fixo { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid currentColor; }
.shm-prev-vivo { color: var(--ok); }
.shm-prev-fixo { color: var(--muted); }
.shm-prev-vazio { color: var(--err); }
.shm-ready-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.shm-row.dead { opacity: 0.5; }
.shm-row-t { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shm-row-e { flex-shrink: 0; font-size: 0.76rem; }

/* View pública de compartilhamento (/share/{token}) */
.sh-load { padding: 4rem; }
.sh-top { display: flex; align-items: center; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; }
.sh-wrap { max-width: 1200px; margin: 0 auto; padding: 1.75rem clamp(1rem, 4%, 2.5rem) 4rem; }
.sh-head { margin-bottom: 1.5rem; }
.sh-eyebrow { font-family: var(--fh); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sh-title { font-family: var(--fh); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.sh-msg { color: var(--muted); padding: 2rem 0; }
.sh-gate { max-width: 360px; margin: 3rem auto; display: flex; flex-direction: column; gap: 0.75rem; text-align: center; }
.sh-gate-h { font-family: var(--fh); font-weight: 800; font-size: 1.2rem; }
.sh-gate input { font-family: var(--fn); font-size: 0.95rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--ink); text-align: center; }
.sh-gate input:focus { outline: none; border-color: var(--lime); }
.shcard { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.shcard:hover { border-color: var(--lime); transform: translateY(-2px); }
.shcard-thumb { position: relative; height: 150px; overflow: hidden; background: var(--white); border-bottom: 1px solid var(--line); }
.shcard-foot { padding: 0.6rem 0.75rem; }
.shcard-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-weight: 700; font-size: 0.85rem; line-height: 1.3; overflow-wrap: anywhere; overflow: hidden; }

/* Canvas do deck — slide sorter de uma seção */
.deck-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem clamp(1rem, 4%, 2.5rem) 3rem; }
.deck-hint { font-size: 0.8rem; margin-bottom: 1rem; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.scard { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.scard:hover { border-color: var(--lime); transform: translateY(-2px); }
.scard.draggable { cursor: grab; }
.scard.dragging { opacity: 0.4; }
.scard-thumb { position: relative; height: 150px; overflow: hidden; background: var(--white); border-bottom: 1px solid var(--line); }
.scard-prev { position: absolute; top: 0; left: 0; width: 1000px; height: 760px; border: 0; background: #fff; transform-origin: top left; pointer-events: none; }
.scard-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 1.7rem; color: color-mix(in srgb, var(--blue) 30%, transparent); }
.scard:hover .scard-play { color: var(--blue); }
.scard-foot { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 0.75rem; }
.scard-foot .scard-n, .scard-foot .scard-menu { margin-top: 0.1rem; }
.scard-n { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); border-radius: 20px; padding: 0.05rem 0.45rem; font-variant-numeric: tabular-nums; }
.scard-title { flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.scard-menu { flex-shrink: 0; width: 28px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.68rem; letter-spacing: 1px; cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.scard:hover .scard-menu { opacity: 1; }
.scard-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.72rem; padding: 0 0.75rem 0.7rem; }
.scard-meta .tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }

/* Trecho do conteúdo que casou com a busca — duas linhas no máximo: é uma pista de "por que
   este card apareceu", não um resumo do documento. */
.scard-trecho { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.72rem; line-height: 1.35; padding: 0 0.75rem 0.7rem; }

/* Miniatura na fila de montagem (teto de iframes vivos): mostra o título sobre o fundo neutro
   em vez de um retângulo branco vazio, e não custa CPU nenhuma. */
.scard-thumb.thumb-wait { background: var(--bg2); }
.scard-thumb.thumb-wait .scard-play { display: none; } /* o ▷ voltaria sobre o título do placeholder */
.scard-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.9rem; text-align: center; font-size: 0.8rem; font-weight: 700; line-height: 1.3; color: color-mix(in srgb, var(--ink) 45%, transparent); overflow: hidden; }

/* Anexos da seção — não são slides, então não entram na grade */
/* Card de anexo: mesma casca do slide, com a capa do formato no lugar da miniatura.
   A cor vem da suíte de origem (--ac, em formato-arquivo.mjs) e é a única cor fora dos
   tokens no portal — é ela que faz reconhecer a planilha antes de ler o nome. */
.acard { display: block; color: inherit; }
.acard-cover { position: relative; height: 150px; display: grid; place-items: center; gap: 0.2rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 88%, black), var(--ac)); color: #fff; }
.acard-ico { font-size: 2.4rem; line-height: 1; opacity: 0.85; }
.acard-selo { font-family: var(--fh, inherit); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.14em; }
.acard-acao { position: absolute; bottom: 0.5rem; right: 0.6rem; font-size: 0.68rem; font-weight: 700; opacity: 0; transition: opacity 0.12s;
  background: rgba(0, 0, 0, 0.28); border-radius: 20px; padding: 0.1rem 0.5rem; }
.acard:hover .acard-acao { opacity: 1; }
/* Com miniatura, a capa vira a própria primeira página; o selo do formato recua para o canto. */
.acard-cover.comthumb { background: var(--white); padding: 0; }
.acard-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.acard-selo.canto { position: absolute; top: 0.45rem; left: 0.5rem; background: var(--ac); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.6rem; }
/* Selo do formato no card da capa do projeto: só a sigla, na cor da suíte. */
.cp-selo { display: inline-block; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.1em; color: #fff; background: var(--ac); border-radius: 4px; padding: 0.05rem 0.3rem; margin-right: 0.2rem; }
/* No /share o card de anexo usa a casca do shcard; a capa entra no lugar da miniatura. */
.shcard.acard { display: block; color: inherit; text-decoration: none; }
/* Ficha do anexo (modal): capa do formato + os dados que decidem se vale baixar. */
.fa-topo { display: flex; gap: 1rem; align-items: flex-start; margin: 0.8rem 0; }
.fa-capa { flex: none; width: 92px; height: 92px; border-radius: 10px; display: grid; place-items: center; gap: 0.1rem; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 88%, black), var(--ac)); }
.fa-ico { font-size: 1.9rem; line-height: 1; opacity: 0.9; }
.fa-selo { font-weight: 800; font-size: 0.7rem; letter-spacing: 0.12em; }
.fa-dados { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.fa-l { display: flex; gap: 0.5rem; }
.fa-k { flex: none; width: 108px; color: var(--muted); }
/* Prévia do anexo: o modal cede quase toda a tela — ler uma planilha num quadrado de 400px
   não responde a pergunta que levou a pessoa a clicar. */
/* O modal que contém prévia cresce: a largura de 440px é boa para um formulário, não para
   uma planilha. :has() é suportado em todos os browsers que o portal atende. */
/* Prévia ocupa quase a tela toda: ler planilha em janela pequena é rolar em dois eixos ao
   mesmo tempo, que é o que fazia a prévia do Excel parecer inútil. */
.modal:has(.pv-box) { max-width: 96vw; width: 96vw; max-height: 96vh; padding: 1rem 1.1rem; }
.pv-box { display: flex; flex-direction: column; height: calc(96vh - 9rem); margin: 0.7rem 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.pv-box .pv-frame { flex: 1; min-height: 0; }
/* Abas da planilha, no rodapé como no Excel. */
.pv-abas { display: flex; gap: 0.25rem; padding: 0.35rem 0.4rem; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.pv-aba { flex: none; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; }
.pv-aba:hover { background: var(--bg); }
.pv-aba.on { background: var(--bg); border-color: var(--line); }
.pv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-load { display: grid; place-items: center; height: 100%; padding: 1.5rem; text-align: center; }
.tag.mais { opacity: 0.7; cursor: default; }
/* Busca global no Início: cada acerto mostra o caminho e o trecho — é o trecho que faz
   reconhecer o documento certo sem abrir os cinco candidatos. */
.hits { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.hit { display: block; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.hit:hover { border-color: var(--lime); }
.hit-t { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.hit-p { font-size: 0.75rem; margin-top: 0.1rem; }
.hit-x { font-size: 0.78rem; margin-top: 0.3rem; line-height: 1.4; color: var(--muted); }
.sd-search.topo { width: 100%; margin-bottom: 0.5rem; }
.dk-attaches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.dk-attach { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; border: 1px solid var(--line); border-radius: 20px; padding: 0.35rem 0.8rem; }
.dk-attach:hover { border-color: var(--lime); }
.dk-attach .scard-menu { position: static; width: 24px; height: 20px; margin-left: 0.2rem; }
.tlm-rail { position: relative; margin-left: 5px; padding-left: 1.4rem; border-left: 2px solid var(--line); }
.tlm-entry { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.tlm-entry.draggable { cursor: grab; }
.tlm-entry.dragging { opacity: 0.4; }
.tlm-grip { flex-shrink: 0; align-self: center; color: var(--muted); font-size: 0.9rem; line-height: 1; cursor: grab; }
.tlm-dot { position: absolute; left: calc(-1.4rem - 6px); top: 0.95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); border: 2px solid var(--bg); }
.tlm-dot.link { background: var(--muted); }
.tlm-card { flex: 1; min-width: 0; position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.tlm-card:hover { border-color: var(--lime); transform: translateX(2px); }
.tlm-title { font-weight: 700; font-size: 0.92rem; padding-right: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlm-sub { font-size: 0.76rem; margin-top: 0.15rem; }
.tlm-menu { position: absolute; top: 8px; right: 8px; width: 28px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.68rem; letter-spacing: 1px; cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.tlm-entry:hover .tlm-menu { opacity: 1; }

/* ---- home: busca, ordenação, descoberta, pedidos ---- */
.home-tools { display: flex; gap: 0.75rem; align-items: center; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.home-search { flex: 1; min-width: 240px; padding: 0.55rem 0.8rem; border-radius: var(--radius, 8px); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
/* Versões: linha por publicação, ações à direita; preview e diff em overlay próprio. */
.ver-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 60vh; overflow-y: auto; }
.ver-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.ver-id { font-family: var(--fh); font-weight: 800; min-width: 3.2rem; }
.ver-info { flex: 1; min-width: 0; font-size: 0.85rem; }
.ver-meta { font-size: 0.75rem; overflow-wrap: anywhere; }
.ver-acts { display: flex; gap: 0.35rem; flex: none; }
.ver-preview { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: var(--bg); }
.ver-preview-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); }
.ver-preview-bar strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-preview-frame { flex: 1; border: 0; width: 100%; background: #fff; }
.ver-diff { flex: 1; overflow: auto; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.45; padding: 0.75rem 0; }
.dline { padding: 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dline.dadd { background: color-mix(in srgb, var(--ok) 14%, transparent); }
.dline.ddel { background: color-mix(in srgb, var(--err) 12%, transparent); }
.dline.dhunk { color: var(--muted); background: var(--bg2); margin-top: 0.4rem; }

/* Auditoria admin: linha expansível (detalhe sob demanda) e evento importante destacado. */
.act-line { display: flex; gap: 0.5rem; align-items: baseline; }
.act-proj { flex: none; font-size: 0.78rem; }
.act-det { flex: 1; min-width: 0; }
.act-det summary { cursor: pointer; list-style: none; }
.act-det summary::-webkit-details-marker { display: none; }
.act-det summary:hover { color: var(--ink); }
.act-detail { margin: 0.4rem 0 0.5rem 0.25rem; padding: 0.5rem 0.75rem; border-left: 2px solid var(--line); font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.15rem; }
.act-k { display: inline-block; min-width: 7.5rem; color: var(--muted); }
.act-hot { border-left: 3px solid var(--lime); padding-left: 0.5rem; border-radius: 2px; }
.act-marco { display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); background: var(--lime); padding: 0.08rem 0.4rem; border-radius: 3px; margin-right: 0.45rem; vertical-align: 1px; }

/* Selo de origem na auditoria: MCP é o que precisa saltar (ação sem mão humana no clique). */
.via { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.45rem; margin-right: 0.5rem; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.via-mcp { background: var(--lime); border-color: var(--lime); color: var(--blue); }
.disc-h { font-weight: 700; margin: 1.25rem 0 0.6rem; }
/* Abas da home (meus / compartilhados / ocultos) — sublinhado, não botão: são recortes da
   mesma lista, e o segmentado ao lado da busca já é o controle de ordenação. */
.home-tabs { display: flex; gap: 0.25rem; margin: 1.25rem 0 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.home-tab { font-family: var(--fn); font-weight: 700; font-size: 0.88rem; padding: 0.55rem 0.9rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.home-tab:hover { color: var(--ink); }
.home-tab.active { color: var(--ink); border-bottom-color: var(--lime); }
.home-tab-n { display: inline-block; min-width: 1.2rem; padding: 0 0.35rem; margin-left: 0.15rem; border-radius: 20px; background: var(--bg2); color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.home-tab.active .home-tab-n { background: var(--lime); color: var(--blue); }
.results-panel { border: 1px solid var(--line); border-radius: var(--radius-lg, 10px); padding: 0.75rem 1rem 1rem; margin-bottom: 1.25rem; }
.results-panel .disc-h { margin-top: 0.25rem; }
.results-sub { font-weight: 600; font-size: 0.85rem; margin: 0.9rem 0 0.5rem; }
.mv-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 0.5rem 0; }
.mv-row { text-align: left; }
.pill.lock { background: var(--color-semantic-warning-main, #b26a00); color: #fff; }
.pill.hide { background: var(--color-neutral-500, #6b7280); color: #fff; }
.disc-desc { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0; }
.req-panel { border: 1px solid var(--line); border-radius: var(--radius-lg, 10px); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.req-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.35rem 0; flex-wrap: wrap; }
.req-actions { display: flex; gap: 0.4rem; }

/* ---------- Capa do projeto (a página que o cliente vê) ----------
   Fundo e tinta fixos, não os tokens de tema: a capa é material de entrega da marca e
   precisa sair igual no claro, no escuro e no PDF de quem imprime a página. */
.capa { background: var(--color-brand-white); color: var(--color-neutral-800); min-height: 100vh; padding-bottom: 4rem; }
/* --grad-brand: sólido azul na Peers, gradiente roxo institucional na ACTAR (tokens.css). */
.cp-hero { background: var(--grad-brand, var(--color-brand-blue)); color: var(--color-brand-white); padding: var(--spacing-8) var(--spacing-3) var(--spacing-6); }
.cp-hero-in { max-width: 1040px; margin: 0 auto; }
.cp-logo { display: block; height: 20px; width: auto; margin-bottom: var(--spacing-4); }
.cp-eyebrow { display: inline-block; font-weight: 700; font-size: var(--typography-font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-lime); background: color-mix(in srgb, var(--color-brand-lime) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand-lime) 30%, transparent); padding: 4px 12px; border-radius: var(--border-radius-full); margin-bottom: var(--spacing-2); }
.cp-hero h1 { font-family: var(--fh); font-weight: 800; font-size: var(--typography-font-size-4xl); line-height: 1.15; margin: 0 0 var(--spacing-2); max-width: 720px; }
.cp-hero p { font-size: var(--typography-font-size-lg); color: var(--color-brand-serene); max-width: 640px; margin: 0; }
.cp-acoes { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-3); }
/* Hero é azul-escuro: o .btn herda tinta de texto do tema claro e sumiria no fundo. */
.cp-present { color: var(--color-brand-white); border-color: color-mix(in srgb, var(--color-brand-white) 35%, transparent); background: transparent; text-decoration: none; }
.cp-present:hover { border-color: var(--color-brand-lime); color: var(--color-brand-lime); }
.cp-voltar { font-weight: 600; opacity: 0.75; }
.cp-voltar:hover { opacity: 1; }
.cp-main { max-width: 1040px; margin: 0 auto; padding: var(--spacing-6) var(--spacing-3) var(--spacing-8); }
.cp-sec + .cp-sec { margin-top: var(--spacing-6); }
.cp-sec h2 { font-family: var(--fh); font-weight: 800; font-size: var(--typography-font-size-2xl); color: var(--color-brand-blue); margin: 0 0 var(--spacing-3); }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-3); }
.cp-card { display: flex; flex-direction: column; gap: var(--spacing-1); padding: var(--spacing-3); background: var(--color-brand-white); border: 1px solid var(--color-neutral-300); border-radius: var(--border-radius-lg); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.cp-card:hover { transform: translateY(-2px); border-color: var(--color-brand-blue); box-shadow: 0 8px 20px 0 color-mix(in srgb, var(--color-brand-blue) 12%, transparent); }
.cp-card.externo { background: var(--color-brand-scale-serene-03); }
.cp-tag { align-self: flex-start; font-family: var(--fh); font-weight: 800; font-size: var(--typography-font-size-xs); letter-spacing: 0.06em; color: var(--color-brand-blue); background: var(--color-brand-lime); padding: 2px 10px; border-radius: var(--border-radius-sm); }
.cp-card h3 { font-family: var(--fh); font-weight: 700; font-size: var(--typography-font-size-lg); color: var(--color-brand-blue); margin: 0; }
/* Nome de arquivo (Controle_Cases__OPIN.xlsx) é uma "palavra" só e vazava do card. */
.cp-card { min-width: 0; }
.cp-card h3, .cp-card p, .cp-card-foot { min-width: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.cp-card p { font-size: var(--typography-font-size-sm); color: var(--color-neutral-600); margin: 0; }
.cp-card-foot { font-size: var(--typography-font-size-xs); color: var(--color-neutral-500); margin-top: auto; padding-top: var(--spacing-1); }
.cp-foot { max-width: 1040px; margin: 0 auto; padding: var(--spacing-3); border-top: 1px solid var(--color-neutral-300); font-size: var(--typography-font-size-xs); color: var(--color-neutral-500); }
/* Barra de contexto: some na impressão — não faz parte do entregável. */
.cp-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--spacing-2); padding: 0.6rem var(--spacing-3); background: var(--color-neutral-900); color: var(--color-brand-white); font-size: var(--typography-font-size-sm); }
.cp-bar .btn { color: var(--color-brand-white); border-color: color-mix(in srgb, var(--color-brand-white) 25%, transparent); }
@media print { .cp-bar { display: none; } }
/* Em tela cheia a capa é a superfície do cliente — a barra de trabalho some. */
:root:fullscreen .cp-bar, :root:-webkit-full-screen .cp-bar { display: none; }
@media (max-width: 640px) { .cp-hero h1 { font-size: var(--typography-font-size-3xl); } }

/* Dois campos lado a lado no modal (código + data). */
.fld-row { display: flex; gap: var(--spacing-2); }
.fld-row .fld { flex: 1; }

/* Convidados do cliente — dentro do modal de acesso, separado dos membros da Peers. */
.cli-box { margin-top: var(--spacing-3); padding-top: var(--spacing-2); border-top: 1px solid var(--line); }
.cli-h { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: baseline; }
.cli-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.cli-x { margin-left: 0.35rem; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; }

/* ---------- árvore do projeto (painel lateral) ---------- */
.tr { font-size: 0.85rem; }
.tr-raiz { font-weight: 700; padding: 0.2rem 0 0.4rem; }
.tr-raiz a:hover { text-decoration: underline; }
.tr-sec { margin-left: 0; }
.tr-h { display: flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0; }
.tr-caret { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.7rem; line-height: 1; padding: 0; }
.tr-caret.vazio { cursor: default; opacity: 0.4; }
.tr-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tr-nome:hover { text-decoration: underline; }
.tr-n { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
/* Cada nível recua junto com o traço-guia: a linha vertical é o que faz a árvore ser lida como árvore. */
.tr-filhos { margin-left: 0.5rem; padding-left: 0.55rem; border-left: 1px solid var(--line); }
.tr-item { display: flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0.2rem 0.25rem; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tr-item:hover { background: var(--bg2); }
.tr-item.on { background: var(--bg2); box-shadow: inset 2px 0 0 var(--lime); }
.tr-ico { flex: none; font-size: 0.7rem; color: var(--muted); }
.tr-cod { flex: none; font-family: var(--fh); font-weight: 800; font-size: 0.65rem; letter-spacing: 0.04em; padding: 0 4px; border-radius: 3px; background: var(--lime); color: var(--blue); }
.tr-t { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Subseção na timeline: recuo proporcional à profundidade (--dk-d). */
.dk-sec { margin-left: calc(var(--dk-d, 0) * 1.25rem); }
.dk-sec[data-depth]:not([data-depth="0"]) .dk-sec-name { font-size: 0.95em; }

/* Capa: subseção vira subtítulo recuado (--cp-d). */
.cp-sec { margin-left: calc(var(--cp-d, 0) * 1.5rem); }
.cp-sec h3 { font-family: var(--fh); font-weight: 700; font-size: var(--typography-font-size-xl); color: var(--color-brand-blue); margin: 0 0 var(--spacing-2); }
.cp-sec h2 a:hover, .cp-sec h3 a:hover { text-decoration: underline; }
.cp-trilha { font-size: var(--typography-font-size-sm); color: var(--color-brand-serene); margin-bottom: var(--spacing-2); }
.cp-trilha a:hover { text-decoration: underline; }
.cp-trilha strong { color: var(--color-brand-white); }

/* Trilha na barra do viewer. */
.present-crumbs { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; flex: none; max-width: 40%; overflow: hidden; white-space: nowrap; }
.present-crumbs a:hover { text-decoration: underline; color: var(--ink); }
.present-sep { opacity: 0.5; }
@media (max-width: 720px) { .present-crumbs { display: none; } }

/* ---------- Explorer: a árvore do projeto como gerenciador de arquivos ---------- */
.nav { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.nav-h { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.75rem 0.4rem; }
.nav-add { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.nav-add:hover { color: var(--blue); background: var(--lime); border-color: var(--lime); }
.nav-body { flex: 1; min-height: 0; overflow: auto; padding: 0 0.5rem 0.6rem; }
.nav-dica { flex-shrink: 0; font-size: 0.68rem; line-height: 1.35; padding: 0.5rem 0.75rem; border-top: 1px solid var(--line); }
.tr-pasta { flex: none; font-size: 0.85rem; color: var(--muted); }
.tr-raiz { display: flex; align-items: center; gap: 0.35rem; }
/* Alvo de drop (pasta recebendo arquivo ou artefato). */
.drop-alvo { outline: 2px dashed var(--lime); outline-offset: 2px; border-radius: 6px; }
.tr-item[draggable="true"] { cursor: grab; }
.tr-item:active { cursor: grabbing; }

/* Botão voltar da apresentação (pilha de links entre artefatos). */
#pv-back { color: var(--lime); }

/* Toasts: feedback de operações (salvar, excluir, exportar…) — empilha no canto inferior
   direito e some sozinho. Fica acima de tudo, inclusive dos modais empilhados (dsConfirm etc.),
   porque uma operação pode terminar (e precisar avisar) enquanto um modal ainda está aberto. */
.toast-box { position: fixed; right: 1rem; bottom: 1rem; z-index: 500; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(360px, calc(100vw - 2rem)); }
.toast { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius); padding: 0.6rem 0.9rem; font-size: 0.85rem; box-shadow: var(--shadow-md); animation: toast-in 0.15s ease-out; }
.toast-ok { border-left-color: var(--ok); }
.toast-erro { border-left-color: var(--err); }
.toast-progresso { border-left-color: var(--lime); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- mapa de versões (painel lateral): o "git log --graph" do projeto ----------
   O eixo é o histórico do Peers Deck: cada documento é uma lane (coluna) e cada versão
   publicada é um nó. A anotação do commit git local viaja no nó, como chip. */
.gv { position: relative; padding: 0.25rem 0.75rem 0.75rem; }
.gv-svg { position: absolute; left: 0.75rem; top: 0.25rem; overflow: visible; pointer-events: none; }
.gv-rows { position: relative; display: flex; flex-direction: column; }
/* Uma cor por lane, todas de tokens do DS — a coluna é a identidade visual do documento. */
.gv { --gv-c0: var(--color-semantic-info-main); --gv-c1: var(--color-semantic-success-main); --gv-c2: var(--color-semantic-warning-main); --gv-c3: var(--color-semantic-error-main); --gv-c4: var(--color-actar-purple-03, var(--color-semantic-info-dark)); --gv-c5: var(--color-brand-scale-blue-02); }
/* A altura da row é FIXA (LINHA, em grafo.mjs) porque é ela que o SVG usa para posicionar
   bolinha e aresta. Então nada aqui pode crescer: sem wrap e com overflow escondido, senão
   a linha invade a de baixo e o desenho descola do texto. O que não couber vive no title. */
.gv-row { display: flex; flex-direction: column; gap: 0.1rem; justify-content: center; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; cursor: pointer; color: var(--ink); font-family: var(--fn); padding: 0.3rem 0.45rem; overflow: hidden; }
.gv-row:hover { background: var(--bg2); }
.gv-row.sel { background: var(--bg2); outline: 1px solid var(--line); }
.gv-l1 { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.78rem; min-width: 0; flex: none; overflow: hidden; }
.gv-seq { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.gv-tit { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gv-l2 { display: flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 0.7rem; color: var(--muted); flex: none; }
.gv-diff { font-variant-numeric: tabular-nums; flex: none; }
.gv-l2 > .via { flex: none; }
.gv-add { color: var(--ok); }
.gv-del { color: var(--err); }
/* Chip do commit local: monoespaçado porque sha é para conferir caractere a caractere. */
.gv-git { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.66rem; padding: 0.05rem 0.3rem; border: 1px solid var(--line); border-radius: 999px; }
.gv-git .gv-branch { font-weight: 700; }
.gv-git.dirty { border-style: dashed; }
.gv-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-tag { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.3rem; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); }
.gv-tag.ramo { color: var(--warn); border-color: var(--warn); }
.gv-tag.atual { color: var(--blue); background: var(--lime); border-color: var(--lime); }
.gv-tag.anexo { color: var(--color-semantic-info-main); border-color: var(--color-semantic-info-main); }
.gv-antigos { margin-top: 0.35rem; line-height: 1.35; }
.gv-foot { padding: 0.5rem 0.75rem; font-size: 0.7rem; color: var(--muted); border-top: 1px solid var(--line); }
.gv-legend { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0 0.75rem 0.5rem; font-size: 0.68rem; color: var(--muted); }
.gv-key { display: inline-flex; align-items: center; gap: 0.25rem; }
.gv-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.adm-hint { font-size: 0.78rem; margin: 0 0 0.6rem; }

/* Anexo binário (type: file) — arquivo guardado no projeto, baixado por URL assinada. */
.tr-ico.anexo, .sd-dot.anexo { color: var(--color-semantic-info-dark); }
.sd-dot.anexo { background: var(--color-semantic-info-main); }
.cp-card.anexo .cp-card-foot { color: var(--color-semantic-info-dark); font-weight: 700; }
.cp-card.anexo:hover { border-color: var(--color-semantic-info-main); }
.dk-attach.arquivo { border-color: color-mix(in srgb, var(--color-semantic-info-main) 45%, var(--line)); }
.dk-attach.arquivo:hover { border-color: var(--color-semantic-info-main); }
.shm-fix { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.3rem; border-radius: 999px; color: var(--warn); border: 1px solid var(--warn); }

/* Confidencialidade do artefato. O select herda o desenho do input do formulário. */
.fld select { display: block; width: 100%; margin-top: 0.3rem; font-family: var(--fn); font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
/* Selo: só aparece no que foge do padrão "interno". Texto na tinta do tema e cor só na
   borda — warning e error do DS como cor de TEXTO ficam ilegíveis no tema claro. */
.selo-conf { flex: none; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.selo-conf.confidencial { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.selo-conf.publico { border-color: var(--ok); }
/* Aviso de risco no painel de compartilhamento: barra lateral dá a gravidade, o texto fica
   na tinta normal. */
.shm-risco { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; line-height: 1.4; color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 8px; padding: 0.55rem 0.75rem; margin-top: 0.6rem; }
.shm-risco.alerta { border-left-color: var(--err); }
.adm-risco { border-left: 4px solid var(--err); padding-left: 0.6rem; }

/* Presença: quem está no projeto agora. Iniciais em círculo; borda de aviso para quem edita.
   Tinta do tema no texto — a cor fica na borda. */
.pres { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-height: 1.5rem; margin-top: 0.35rem; }
.pres:empty { display: none; }
.pres-chip { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; background: var(--bg2); color: var(--ink); border: 1.5px solid var(--line); cursor: default; }
.pres-chip.ed { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.pres-chip.mais { font-weight: 700; }
.pres-txt { font-size: 0.78rem; margin-left: 0.25rem; }
/* Marca na árvore: quantas pessoas estão neste artefato. */
.tr-pres { flex: none; margin-left: auto; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; display: inline-grid; place-items: center; border-radius: 999px; font-size: 0.6rem; font-weight: 800; background: var(--bg2); color: var(--ink); border: 1.5px solid var(--ok); }
.tr-pres.ed { border-color: var(--warn); }
/* Atividade do artefato. */
.ia-h { font-family: var(--fh); font-weight: 800; font-size: 0.9rem; margin: 1rem 0 0.45rem; }
.ia-h:first-child { margin-top: 0; }
.ia-pessoa { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.ia-det { margin-top: 0.9rem; }
.ia-det > summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-bottom: 0.4rem; }
#act-abas { margin-bottom: 0.9rem; }
/* Selo de confidencialidade na barra do visor (fundo sempre escuro) e no card. */
.present-conf { flex: none; display: inline-flex; }
.present-bar .selo-conf { color: var(--color-brand-white); border-color: color-mix(in srgb, var(--color-brand-white) 45%, transparent); font-size: 0.62rem; padding: 0.1rem 0.5rem; }
.present-bar .selo-conf.confidencial { border-color: var(--err); }
.present-bar .selo-conf.publico { border-color: var(--ok); }
.scard-meta .selo-conf, .shcard-foot .selo-conf { margin-right: 0.35rem; vertical-align: 0.08em; }

/* Catálogo de designs (/designs) e escolha de padrão. */
.page-acoes { display: flex; gap: 0.6rem; align-items: center; }
.dsg-grupo { margin: 1.4rem 0 0.7rem; }
.dsg-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.dsg-oficial { font-size: 0.6rem; }
.dsg-acoes { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.dsg-code { display: block; width: 100%; min-height: 9rem; margin-top: 0.3rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; line-height: 1.45; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); resize: vertical; tab-size: 2; }
.dsg-chk { display: flex; align-items: center; gap: 0.5rem; }
.dsg-chk input { width: auto; margin: 0; }
.dsg-previa-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dsg-previa { position: absolute; top: 0; left: 0; width: 1000px; height: 562px; border: 0; transform-origin: 0 0; }
.dsg-fundos { margin-bottom: 0.7rem; }
.dsg-paleta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.7rem 0 0.2rem; font-size: 0.72rem; }
.dsg-cor { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); }
.dsg-cor i { width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }
.dsg-cor code { font-size: 0.68rem; }
.dsg-guia { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; line-height: 1.5; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; max-height: 60vh; overflow: auto; }
.dsg-escolha { max-height: 60vh; overflow: auto; }
.modal:has(.dsg-code) { max-width: 760px; }
/* Escolha de padrão visual: grade de miniaturas, busca e uma ação. */
.modal.dsg-modal { max-width: 860px; }
.dsg-busca { display: block; width: 100%; font-family: var(--fn); font-size: 0.95rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); margin-bottom: 0.9rem; }
.dsg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.8rem; max-height: 56vh; overflow: auto; padding: 2px; }
.dsg-opt { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; padding: 0.5rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--ink); font: inherit; cursor: pointer; }
.dsg-opt:hover { border-color: var(--ink); }
.dsg-opt.on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.dsg-opt-t { font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.dsg-opt-d { font-size: 0.72rem; line-height: 1.3; }
.dsg-herdar { justify-content: center; min-height: 100%; }
.dsg-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--color-neutral-200); }
.dsg-thumb iframe { position: absolute; top: 0; left: 0; width: 1000px; height: 562px; border: 0; transform-origin: 0 0; pointer-events: none; }
.dsg-acoes-modal { align-items: center; }
.dsg-espaco { flex: 1; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); border-color: var(--line); }
.dsg-card { cursor: pointer; }
.dsg-card:hover { border-color: var(--ink); }
.dsg-card .dsg-thumb { margin-bottom: 0.7rem; }

/* Dicas: aviso transitório no canto (uma dica, some em 15 s) e a lista completa na aba Dicas. */
.dica { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 10px; padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dica-flash { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 450; width: min(360px, calc(100vw - 2.5rem)); background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--lime); border-radius: 10px; padding: 0.65rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; box-shadow: var(--shadow-xl); animation: dica-in 0.25s ease; }
@keyframes dica-in { from { opacity: 0; transform: translateY(8px); } }
.dica-t { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.dica-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0 0.2rem; }
.dica-x:hover { color: var(--ink); }
.dica-txt { font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.dica-acoes { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.15rem; }
.dica-desde { font-size: 0.7rem; margin-left: auto; }
.sd-dica { margin-bottom: 0.6rem; }
.sd-n { font-size: 0.65rem; font-weight: 800; background: var(--lime); color: var(--blue); border-radius: 999px; padding: 0 0.35rem; margin-left: 0.2rem; }
.sd-h-ctx { margin-top: 1rem; }
.sd-ctx { font-size: 0.8rem; line-height: 1.4; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.sd-ctx-prox { margin: 0.3rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.dsg-pager { margin-top: 0.7rem; justify-content: center; }