/* DossierComponent — dossiê genérico (Produto | Parte) em página inteira: split leitura | escrita.
   Porta o protótipo aprovado (prototype/project-detail-split.html) para BEM + tokens da casa.
   Header full-bleed (régua/borda de borda a borda; conteúdo recuado 28px); rolagem por coluna. */

.c-dossier{
  /* height:100% — a viewport é do frame (c-ui-frame, doc 51) */
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  /* largura da coluna de contexto (a mesma fixada e no peek). vw (não %) p/ resolver contra a
     viewport, não contra a trilha `auto` do grid (% ali daria dependência circular e colapsaria). */
  --ctx-w: min(38vw, 420px);
  /* largura da coluna de Partes (campo pane: :aside na Concepção). clamp: nunca aperta os cards nem
     estica além do necessário; puxa a coluna p/ a esquerda comendo o espaço morto da prosa (doc 21). */
  --aside-w: clamp(400px, 44vw, 660px);
  /* teto de largura em telas muito largas: acima de --dossier-max o gutter cresce dos 40px padrão e
     centra head + split juntos (ficam alinhados). Sem isto as colunas do split absorvem toda a sobra
     e a proporção distorce em widescreen. 100vw é seguro: o body não rola (sem scrollbar vertical). */
  --dossier-max: 1720px;
  /* desconta o rail (doc 51): a coluna útil é 100vw - rail; sem isto o centering fica 26px torto */
  --dossier-gutter: max(40px, calc((100vw - var(--rail-w) - var(--dossier-max)) / 2));
}


/* O topbar do dossiê é FULL-BLEED (gutter de 40px, como board e editor), não mais preso ao gutter
   do split. Em ultrawide o split centrado empurrava a trilha para o meio da tela, longe da margem
   onde o olho a procura — e a trilha é navegação de chrome, não conteúdo do dossiê: pertence à
   borda da janela, não à coluna de leitura. Revoga o alinhamento head↔split do doc 51.

   Três zonas em grid (1fr auto 1fr) em vez do flex do componente: só o grid centra o título contra
   a PÁGINA. No flex, "centrado" seria centrado na sobra entre trilha e ações — dois vizinhos de
   larguras diferentes o deixariam torto. As colunas laterais iguais é que fixam o meio. */
.c-dossier > .c-ui-topbar{
  padding-inline: 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.c-dossier > .c-ui-topbar > .c-ui-breadcrumb{ justify-self: start; min-width: 0; }
/* min-width:0 nas três zonas: sem isso o título longo estoura a grade em vez de reticenciar */
.c-dossier > .c-ui-topbar > .c-ui-topbar__title{ justify-self: center; min-width: 0; }
.c-dossier > .c-ui-topbar > .c-ui-topbar__actions{ justify-self: end; }

/* Excluir como lixeira, colada ao título (doc 52): quieta em repouso (ink-3), danger no hover —
   a cor de perigo só quando a intenção aparece. Gabarito compacto: é vizinha de texto, não botão
   de barra. O button_to embrulha num form inline. */
.c-dossier__destroy_form{ display: inline-flex; margin: 0 0 0 10px; }
.c-dossier__destroy{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer;
  transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.c-dossier__destroy:hover{ color: var(--danger); border-color: var(--danger); }
.c-dossier__destroy:focus-visible{ outline: 2px solid var(--danger); outline-offset: 2px; }

/* ── split: painel de duas colunas, com o gutter padrão (flutua sobre o papel) ── */
.c-dossier__split{
  flex: 1 1 auto; min-height: 0;
  margin: 14px var(--dossier-gutter) 16px; border: 1px solid var(--line);
  /* sem overflow:hidden no split: a zona de hover do trilho (::before) se estende p/ o gutter
     esquerdo, fora do split. O slide horizontal das fases é clipado pelo overflow-x dos __body. */
  /* coluna de contexto = largura do próprio painel (auto) → animar a largura dele empurra a escrita,
     sem overlay (a escrita reflui, nunca fica sobreposta). A escrita ocupa o resto (1fr). */
  display: grid; grid-template-columns: auto 1fr;
  animation: c-pd-rise 380ms var(--ease) both;
}
/* transição da largura só DEPOIS do 1º frame (is-ready): o estado inicial assenta instantâneo
   (sem flash), e só os toggles do usuário animam. Ver dossier_controller#connect. */
.c-dossier.is-ready .c-dossier__pane--read{ transition: width var(--t2) var(--ease); }

/* primeira fase (sem fase anterior): a coluna de contexto some por completo e a escrita ocupa tudo.
   display:none vence as regras de trilho (is-context-collapsed), então as duas classes coexistem. */
.c-dossier.is-context-empty .c-dossier__split{ grid-template-columns: 1fr; }
.c-dossier.is-context-empty .c-dossier__pane--read{ display: none; }

.c-dossier__pane{ display: flex; flex-direction: column; min-height: 0; }
.c-dossier__bar{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 28px; border-bottom: 1px solid var(--line);
}
.c-dossier__role{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.c-dossier__phase{
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font: 700 var(--fs-lead)/1 var(--font-ui); letter-spacing: -.02em;
}
.c-dossier__sq{ width: 11px; height: 11px; flex: 0 0 auto; }
.c-dossier__body{ flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* overflow-x: clipa o slide horizontal */
/* na ESCRITA o scroll mora na COLUNA de prosa (.c-phase-fields__main), não no __body: a barra assenta
   entre prosa e Partes — onde de fato há rolagem — e nunca depois da aside, que é fixa (doc 21). */
.c-dossier__pane--write > .c-dossier__body{ overflow: hidden; }

/* esquerda — leitura (painel mais quieto) */
.c-dossier__pane--read{ background: #f7f7f5; border-right: 1px solid var(--line); }
.c-dossier__pane--read .c-dossier__bar{ background: #f1f1ee; }
.c-dossier__empty{
  padding: 22px 28px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-3); font-style: italic;
}

/* botão de fixar/colapsar a coluna de contexto (na barra da leitura). aria-pressed reflete o estado:
   fixado (true) = preenchido grafite; colapsável (false) = contorno. */
.c-dossier__pin{
  flex: 0 0 auto; width: var(--control-h); height: var(--control-h); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.c-dossier__pin:hover{ border-color: var(--brand); color: var(--brand); }
.c-dossier__pin[aria-pressed="true"]{ background: var(--brand); border-color: var(--brand); color: #fff; }

/* rótulo vertical do trilho: só aparece no estado colapsado (regras abaixo) */
.c-dossier__rail_label{ display: none; }

/* ── coluna de contexto colapsável (trilho que abre no hover) — só em telas largas ──────────────
   O painel fica NO FLUXO do grid (largura própria, coluna `auto`): animar a largura empurra a
   escrita — sem overlay, então a escrita nunca fica sobreposta. O "retorna ao trilho quando o mouse
   sai" é CSS puro (:hover/:focus-within). Largura fixada e largura no peek são a MESMA (var --ctx-w)
   → desfixar com o mouse em cima não muda largura (sem reanimação); só recolhe quando o ponteiro sai
   (o controller dá blur no pin após o toggle, senão o :focus-within prenderia o painel aberto). */
@media (min-width: 901px){
  .c-dossier__pane--read{ width: var(--ctx-w); min-width: 0; }

  /* trilho (recolhido): barra centralizada só com o quadrado de cor; miolo escondido */
  .c-dossier.is-context-collapsed .c-dossier__pane--read{ width: 40px; position: relative; }
  /* zona de hover invisível que ESTENDE o trilho para o gutter esquerdo (espaço antes ocioso): abrir
     ou manter aberto cobre também a borda externa, sem PINTAR o gutter (margem fica visível) nem
     mover o painel (a margem do split é preservada). Como é ::before do próprio painel, passar o
     mouse ali conta como :hover do painel — restaura miolo e largura sem regra extra. */
  .c-dossier.is-context-collapsed .c-dossier__pane--read::before{
    content: ""; position: absolute; top: 0; bottom: 0; left: -40px; width: 40px;
  }
  /* trilho: o quadrado de cor vira um tick no TOPO (order:-1 sobe a barra acima do rótulo), sem a
     régua divisória; o rótulo vertical fica logo abaixo. overflow:hidden na barra (não no painel, p/
     não clipar o ::before): clipa o miolo durante a animação de expansão (o __body já clipa pelo seu). */
  .c-dossier.is-context-collapsed .c-dossier__pane--read .c-dossier__bar{
    order: -1; padding: 14px 0 0; justify-content: center; overflow: hidden; border-bottom: 0;
  }
  .c-dossier.is-context-collapsed .c-dossier__pane--read .c-dossier__role,
  .c-dossier.is-context-collapsed .c-dossier__pane--read .c-dossier__read_name,
  .c-dossier.is-context-collapsed .c-dossier__pane--read .c-dossier__pin{ display: none; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read .c-dossier__body{ display: none; }
  .c-dossier.is-context-collapsed .c-dossier__rail_label{
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    margin: 8px auto 0; text-align: center;
    font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  }

  /* peek: hover OU foco interno (acessível p/ teclado) reabre à largura cheia e restaura o miolo */
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within{ width: var(--ctx-w); }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__bar,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__bar{ padding: 14px 28px; justify-content: space-between; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__role,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__role{ display: block; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__read_name,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__read_name{ display: inline; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__pin,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__pin{ display: flex; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__body,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__body{ display: block; }
  .c-dossier.is-context-collapsed .c-dossier__pane--read:hover .c-dossier__rail_label,
  .c-dossier.is-context-collapsed .c-dossier__pane--read:focus-within .c-dossier__rail_label{ display: none; }
}

/* direita — escrita (superfície ativa; acento da fase exibida via --cur no root) */
.c-dossier__pane--write{ background: var(--surface); position: relative; }
.c-dossier__pane--write .c-dossier__phase b{ color: var(--cur); }
.c-dossier__pane--write .c-dossier__sq{ background: var(--cur); }
.c-dossier__meta{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
/* ferramentas da barra (direita): botão de mover card + pager */
/* gap igual ao do pager (8px): os botões de ferramenta entram no mesmo ritmo de ← → */
.c-dossier__tools{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.c-dossier__move{ margin: 0; }
/* mover card p/ a fase exibida: botão secundário discreto (fundo branco), ~altura do pager */
.c-dossier__move_btn{
  height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font: 600 var(--fs-ui)/1 var(--font-ui); letter-spacing: -.005em; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.c-dossier__move_btn:hover{ border-color: var(--brand); color: var(--brand); }
.c-dossier__move_btn:active{ transform: translateY(1px); }
/* respeita o [hidden] do JS (display de autor venceria o [hidden]{display:none} do navegador):
   o botão some na fase atual do card (mover p/ onde já está não faz sentido) */
.c-dossier__move_btn[hidden]{ display: none; }

/* pager: circula entre os forms das fases (não muda a fase do card) */
.c-dossier__pager{ display: flex; gap: 8px; flex: 0 0 auto; }
.c-dossier__pager_btn{
  width: 34px; height: var(--control-h); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-ui); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.c-dossier__pager_btn:hover:not(:disabled){ border-color: var(--brand); color: var(--brand); }
.c-dossier__pager_btn:disabled{ opacity: .35; cursor: not-allowed; }
/* botões de ferramenta na barra (board de Partes no Produto; ir-para-Produto na Parte): mesmo
   gabarito do pager, mas são links */
.c-dossier__tool{
  width: 34px; height: var(--control-h); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.c-dossier__tool:hover{ border-color: var(--brand); color: var(--brand); }
/* o "salvas automaticamente" do rodapé virou ponto no rail (slot de status do frame, doc 51) */
.c-dossier__saved{ width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
/* legenda do mini-kanban flutuante: explica o verde */
.c-dossier__legend{ display: inline-flex; align-items: center; gap: 16px; padding-left: 12px; border-left: 1px solid var(--line);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.c-dossier__legend span{ display: inline-flex; align-items: center; gap: 6px; }
/* amostra do verde "fase do card" (mesmo tratamento do mini_col--card) */
.c-dossier__legend i{
  width: 9px; height: 11px; font-style: normal;
  background: color-mix(in srgb, #138a55 22%, transparent); border: 1px solid #138a55;
}

.c-phase-fields__titlebar{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.c-phase-fields__titlebar .button_to,.c-phase-fields__restore{ display:inline-flex; margin:0; }
.c-phase-fields__titlebar .c-ui-button--quiet{ padding:4px 7px; font-size:var(--fs-label); }

/* mini-kanban: orienta onde o card está (preenchido) vs. o form visto (contorno). FLUTUANTE no
   canto inferior direito do painel de escrita (doc 51) — já morou no rodapé porque flutuar colidia
   com a coluna de Partes; a colisão agora é neutralizada por padding-bottom reservado nas colunas
   (abaixo), não fugindo do canto. Fundo semitransparente + blur: a prosa passa por baixo. */
.c-dossier__mini{
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 11px; padding: 8px 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(6px);
}
@supports not (backdrop-filter: blur(6px)){ .c-dossier__mini{ background: var(--surface); } }
/* a reserva anti-colisão: nenhuma coluna termina conteúdo debaixo do widget */
.c-dossier__pane--write .c-phase-fields__main{ padding-bottom: 64px; }
.c-phase-fields__aside_inner{ padding-bottom: 64px; }
/* No DESK (Concepção do Produto) o __main tem overflow:hidden e quem rola são as colunas — a
   reserva no contêiner virava faixa MORTA no pé da consulta (bug visto em uso); desce para os
   scrollers. Estas regras empatam em especificidade com as do conception-desk.css e vencem por
   ordem de carga (c < d no glob alfabético do helper) — se o arquivo mudar de nome, reavalie. */
.c-dossier__pane--write .c-phase-fields--desk .c-phase-fields__main{ padding-bottom: 0; }
.c-dossier__pane--write .c-phase-fields--desk .c-phase-fields__col_body{ padding-bottom: 64px; }
.c-dossier__pane--write .c-phase-fields--desk .c-phase-fields__aside_inner{ padding-bottom: 64px; }
.c-dossier__mini_caption{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.c-dossier__mini_track{ display: flex; gap: 6px; }
.c-dossier__mini_col{
  position: relative; flex: 0 0 auto; width: 22px; height: var(--control-h-sm); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.c-dossier__mini_col:hover{ border-color: var(--line-2); }
/* demais colunas: sem cor — só o número da fase, bold e opaco */
.c-dossier__mini_num{
  font: 700 var(--fs-label)/1 var(--font-ui); color: color-mix(in srgb, var(--ink) 38%, transparent);
}
/* coluna do card: cor FIXA (verde), sempre a mesma — independe da fase; mantém o número */
.c-dossier__mini_col--card{ background: color-mix(in srgb, #138a55 22%, transparent); border-color: #138a55; }
/* coluna do form visto: anel limpo destacado (não se funde à borda) */
.c-dossier__mini_col.is-viewing{ outline: 2px solid var(--brand); outline-offset: 2px; }

@keyframes c-pd-rise{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

@media (max-width: 900px){
  .c-dossier__split{
    margin: 16px 20px 20px;
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 40%) minmax(0, 60%);
  }
  .c-dossier__pane--read{ border-right: 0; border-bottom: 1px solid var(--line); }
  /* tela em linhas: o trilho/flyout não se aplica (regras gated em min-width:901px); some o pin */
  .c-dossier__pin{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .c-dossier__split{ animation: none; }
  .c-dossier.is-ready .c-dossier__pane--read{ transition: none; }
  .c-phase-fields__entry,
  .c-phase-fields__field trix-editor,
  .c-phase-fields__field trix-toolbar{ transition: none; }
}

/* ── Projects::PhaseFieldsComponent — campos de uma fase (read/write) ─────────── */
/* leitura: índice | rótulo | valor. SEM divisória por campo: a coluna de leitura é o painel "quieto"
   (contexto) e mostra uma fase DIFERENTE da escrita (formulário distinto, alturas distintas), então
   réguas por campo nunca alinhariam com as da escrita — só competiriam. A numeração (04.1/04.2) + o
   espaçamento separam os campos. A escrita mantém suas divisórias (estruturam a edição). */
.c-phase-fields--read .c-phase-fields__row{
  padding: 18px 28px;
}
.c-phase-fields__no{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-3);
}
.c-phase-fields--read .c-phase-fields__label{
  font-weight: 600; font-size: var(--fs-ui); letter-spacing: -.01em; color: #2a2a2a; margin-top: 3px;
}
/* rich text (Action Text): quebras vêm dos blocos do próprio corpo — nada de `white-space: pre-wrap`
   (resquício do texto puro), senão os newlines/indentação do partial `_content` viram linhas em branco. */
.c-phase-fields__value{
  font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); margin-top: 7px;
}
.c-phase-fields__value--empty{ font-style: italic; color: var(--ink-3); }

/* ── escrita em coluna(s) ──────────────────────────────────────────────────────
   Sempre grid: preenche a altura do __body (que na escrita é overflow:hidden) → o scroll fica em
   .c-phase-fields__main, não no body. Sem campo :aside → coluna única (idêntico ao de antes). Com
   :aside (Partes na Concepção) → prosa (rolável) + coluna sticky à direita (doc 21). */
/* o wrapper de fase (writePanel) precisa levar a altura do body até a coluna, senão ele cresce com o
   conteúdo e o __main nunca fica constrangido p/ rolar. grid-template-rows: minmax(0,1fr) prende a
   linha à altura do container (não ao conteúdo) → o overflow do __main ativa. */
.c-dossier__pane--write .c-dossier__write_panel{ height: 100%; min-height: 0; }
.c-phase-fields--write{ height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.c-phase-fields--write.c-phase-fields--has-aside{ grid-template-columns: minmax(0, 1fr) var(--aside-w); }
.c-phase-fields__main{ overflow-y: auto; overflow-x: hidden; min-height: 0; }
/* a aside é uma coluna de altura fixa (= a linha do grid) que ROLA sozinha quando há muitas Partes —
   scroll independente da prosa (cada coluna tem sua barra). Poucas Partes → não rola, fica no topo. */
.c-phase-fields__aside{ border-left: 1px solid var(--line); background: var(--paper); overflow-y: auto; overflow-x: hidden; min-height: 0; }
.c-phase-fields__aside_inner{ padding: 20px 26px 26px; }

/* telas estreitas: a coluna de Partes empilha ABAIXO da prosa e o scroll volta ao __body (as duas
   rolam juntas). Precisa vir DEPOIS das regras de grid acima — @media não aumenta especificidade,
   então uma regra base posterior venceria o media. Ver doc 21. */
@media (max-width: 1100px){
  .c-phase-fields--write.c-phase-fields--has-aside{ grid-template-columns: 1fr; }
  .c-phase-fields--write{ height: auto; grid-template-rows: none; }
  .c-dossier__pane--write .c-dossier__write_panel{ height: auto; }
  .c-phase-fields__main{ overflow: visible; min-height: 0; }
  .c-phase-fields__aside{ border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .c-dossier__pane--write > .c-dossier__body{ overflow-y: auto; }
}

/* escrita: índice | rótulo | dica + campo editável (borda neutra; foco grafite) */
.c-phase-fields--write .c-phase-fields__entry{
  padding: 20px 28px; border-bottom: 1px solid var(--line);
}
.c-phase-fields__entry_head{ display: flex; align-items: baseline; gap: 13px; }
.c-phase-fields--write .c-phase-fields__no{ min-width: 34px; font-size: var(--fs-label); }
.c-phase-fields__titlebar{ display: inline-flex; align-items: baseline; gap: 7px; }
.c-phase-fields__title{ font-weight: 700; font-size: var(--fs-lead); letter-spacing: -.015em; color: var(--ink); }
/* obrigatório é o DEFAULT e não ganha marca (o asterisco verde saiu); só o desvio se anuncia, com a
   tag discreta "opcional". */
.c-phase-fields__opt{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 2px; padding: 3px 5px;
}
.c-phase-fields__hint{
  font-size: var(--fs-meta); font-style: italic; color: var(--ink-3); margin: 5px 0 0 47px; line-height: 1.45;
}
/* o campo virou um <form> com <trix-editor> (Action Text) — o form é só o invólucro/indentação */
.c-phase-fields__field{ margin: 9px 0 0 47px; max-width: 66ch; }

/* toolbar no canto superior ESQUERDO, DENTRO do campo, só no campo em foco — leve dim (55%, cheia
   no hover), sem deslizar nem esmaecer irmãos (formato validado no modal da Parte e promovido a
   padrão da casa). O form é o ancestral posicionado; a toolbar sai do FLUXO (absolute) e assenta na
   faixa de topo que o padding-top do editor abre no foco — texto e botões nunca colidem, e o
   aparecer/sumir da toolbar não mexe no layout.
   Alinhamento pela TINTA, não pela caixa: o ícone do Trix (bg contain, centrado) carrega ~14px de
   respiro interno até o traço do B — medido no canvas. Botão colado na borda (left/padding 0) põe o
   traço na mesma coluna dos 14px de padding do texto. */
.c-phase-fields__field{ position: relative; }
.c-phase-fields__field trix-toolbar{
  position: absolute; top: 1px; left: 0; z-index: 1; padding: 6px 12px 0 0;
  visibility: hidden; opacity: .55; transition: none;
}
/* só entra DEPOIS que a faixa terminou de abrir (delay = duração do tween do campo): junto, os
   ícones cairiam sobre o texto ainda em trânsito. No blur o delay não vale (a transition que conta
   é a do estado de destino) — some na hora, antes de a faixa fechar. */
.c-phase-fields__field:focus-within trix-toolbar{ visibility: visible; transition: visibility 0s var(--t2); }
.c-phase-fields__field trix-toolbar:hover{ opacity: 1; }
.c-phase-fields__field trix-toolbar .trix-button-row{ overflow-x: visible; gap: 10px; }
.c-phase-fields__field trix-toolbar .trix-button-group{
  border: 0; border-radius: 0; background: transparent; margin: 0;
}
.c-phase-fields__field trix-toolbar .trix-button{
  border: 0; border-bottom: 1px solid transparent; padding: 0 .4em;
}
.c-phase-fields__field trix-toolbar .trix-button.trix-active{
  background: transparent; border-bottom-color: var(--brand); color: var(--brand);
}
/* enxuga a barra para a prosa de reflexão: só negrito, itálico, link, título e listas.
   (strike, citação, código, indentação e anexo ficam fora; anexos voltam quando forem priorizados.) */
.c-phase-fields__field trix-toolbar .trix-button--icon-strike,
.c-phase-fields__field trix-toolbar .trix-button--icon-quote,
.c-phase-fields__field trix-toolbar .trix-button--icon-code,
.c-phase-fields__field trix-toolbar .trix-button--icon-decrease-nesting-level,
.c-phase-fields__field trix-toolbar .trix-button--icon-increase-nesting-level,
.c-phase-fields__field trix-toolbar .trix-button-group--file-tools,
.c-phase-fields__field trix-toolbar .trix-button-group--history-tools{ display: none; } /* Ctrl+Z/Y nativos */

/* a superfície editável (herda o visual do antigo contenteditable: borda neutra, foco grafite).
   Em repouso o campo fica no gabarito compacto; no foco ele CRESCE (com animação) abrindo a faixa
   das ferramentas no topo — seguro, porque a toolbar é absoluta e nada externo muda de tamanho.
   Só o tamanho anima: fundo/borda/sombra trocam de estado instantâneos. */
.c-phase-fields__field trix-editor{
  font: 400 var(--fs-body)/1.6 var(--font-ui); color: var(--ink); /* MESMO degrau e lh da leitura (__value): editar não reflui mais */
  background: #fcfcfb; border: 1px solid var(--line); border-radius: 0; padding: 11px 14px;
  min-height: 76px; outline: 0;
  transition: padding-top var(--t2) var(--ease), min-height var(--t2) var(--ease);
}
.c-phase-fields__field:focus-within trix-editor{
  padding-top: 38px; min-height: 100px; /* faixa das ferramentas + as mesmas ~2 linhas do repouso */
}
.c-phase-fields__field trix-editor:hover{ background: #fff; border-color: var(--line-2); }
.c-phase-fields__field trix-editor:focus{ background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(42, 49, 64, .07); }
/* placeholder (atributo placeholder do trix-editor) em itálico discreto */
.c-phase-fields__field trix-editor:empty:not(:focus)::before{ color: var(--ink-3); font-style: italic; }

/* o spotlight (esmaecer os campos irmãos no foco) SAIU do design system: além de cansar em uso, a
   regra vazava para o modal da Parte (o <dialog> vive dentro do __main do Projeto — o :focus-within
   externo esmaecia o modal inteiro com foco no chrome dele). O campo ativo se destaca pelo anel de
   foco e pela faixa de ferramentas aberta; os irmãos ficam legíveis. */