/* Modal da Parte — <dialog> aberto por qualquer card do mini-board da Execução do Projeto
   (Projects::PartsMonitorComponent + PartPhaseFormComponent). Com o dossiê da Parte absorvido pelo
   mini-board (doc 39), o modal é o workspace da Parte: barra + pager de fases + form da fase.
   Espelha o padrão de modal da casa (parts-step-correlation/Ui::Confirm): dialog transparente +
   box emoldurado + backdrop com blur. O conteúdo entra LAZY no <turbo-frame>. Auto-descoberto. */

/* O <dialog> nativo vem do UA stylesheet com overflow:auto + max-height próprios (independentes do
   max-height:88vh do .c-part-modal__box abaixo). Sem este reset o dialog ganha SUA PRÓPRIA barra de
   rolagem, colada a poucos px da barra do .c-part-modal__body — duas rolagens visíveis ao mesmo
   tempo. O box já se autolimita a 88vh e delega a rolagem ao __body; o dialog só precisa parar de
   competir por esse papel. */
.c-part-modal{
  padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: min(680px, 94vw); width: 94vw; max-height: 88vh; overflow: visible;
}
.c-part-modal::backdrop{
  background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(2px);
}
/* sem animação de entrada: o modal assenta instantâneo (pedido de UX — form estático) */

/* o frame é inline por padrão; garante bloco + altura mínima p/ o box não "pular" durante o load */
.c-part-modal__frame{ display: block; min-height: 120px; }

.c-part-modal__box{
  margin: 0; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -28px rgba(17, 17, 17, .55);
  display: flex; flex-direction: column; max-height: 88vh;
}

.c-part-modal__bar{
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.c-part-modal__kicker{
  display: flex; align-items: center; gap: 9px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.c-part-modal__chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hue); background: color-mix(in srgb, var(--hue) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--hue) 30%, #fff);
}
.c-part-modal__chip_dot{ width: 6px; height: 6px; background: var(--hue); flex: 0 0 auto; }
.c-part-modal__title{ margin-top: 9px; font-weight: 700; font-size: var(--fs-lead); letter-spacing: -.02em; }

.c-part-modal__barside{ display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.c-part-modal__move_btn{
  padding: 7px 12px; border: 1px solid var(--line-2); background: var(--surface);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.c-part-modal__move_btn:hover{ border-color: var(--brand); color: var(--brand); }
.c-part-modal__close{
  width: 30px; height: 30px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: var(--fs-ui); line-height: 1; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.c-part-modal__close:hover{ border-color: var(--brand); color: var(--brand); }

/* pager de fases: links que navegam o próprio frame. is-shown = form na tela (aria-current);
   is-actual = fase REAL do card no board (o pontinho diz "o card está aqui") */
.c-part-modal__pager{
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.c-part-modal__pager_item{
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line); background: var(--surface);
}
a.c-part-modal__pager_item:hover{ border-color: var(--hue); color: var(--hue); }
.c-part-modal__pager_item.is-shown{
  color: var(--hue); background: color-mix(in srgb, var(--hue) 11%, #fff);
  border-color: color-mix(in srgb, var(--hue) 30%, #fff);
}
.c-part-modal__pager_item.is-actual::after{
  content: ""; width: 6px; height: 6px; background: var(--hue); flex: 0 0 auto;
}
.c-part-modal__pager_no{ color: inherit; opacity: .6; }

/* corpo rolável: hospeda o PhaseFieldsComponent (modo escrita) */
.c-part-modal__body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; }

/* O grid da escrita (dossier.css) foi desenhado p/ o dossiê full-page: delega o scroll a
   .c-phase-fields__main enquanto o pai (.c-dossier__body) fecha o overflow — só UM dono da barra.
   No modal o dono é .c-part-modal__body (que também precisa acomodar o bloco de Aceite, irmão do
   componente, fora do grid dele). Sem este reset o __main criava uma SEGUNDA barra ao lado da do
   body — duas rolagens visíveis ao mesmo tempo. Mesma neutralização do breakpoint estreito acima. */
.c-part-modal__body .c-phase-fields--write{ height: auto; display: block; }
.c-part-modal__body .c-phase-fields__main{ overflow: visible; min-height: 0; }
.c-part-modal__body .c-phase-fields__aside{ border-left: 0; border-top: 1px solid var(--line); overflow: visible; }

/* Os campos do form herdam o formato padrão da casa (dossier.css): toolbar fixa no canto superior
   esquerdo DENTRO do campo em foco (dim 55%, cheia no hover, entrada pós-tween), faixa que cresce/
   encolhe animada, sem spotlight. Este formato nasceu aqui no modal e foi promovido a base. */

/* Aceite da Parte (doc 57), só na fase Concluído: botão de ação de página (--control-h) + porquê.
   Desabilitado = gate pelos :must (verificação 03.1 incompleta). */
/* `flex-wrap` porque a faixa passou a ter um segundo nível (as concessões, doc 64): sem ele o bloco
   disputava a linha com o botão, que espremia em duas linhas e a caixa ia para o lado. */
.c-part-modal__accept{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 28px 6px; }
.c-part-modal__accept form{ display: flex; }
.c-part-modal__accept_btn{
  height: var(--control-h); padding: 0 16px; cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.c-part-modal__accept_btn:hover{ background: var(--brand-ink); }
.c-part-modal__accept_btn[disabled]{
  background: var(--surface); color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed;
}
.c-part-modal__accept_stamp{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, #fff);
  background: color-mix(in srgb, var(--ok) 8%, #fff); padding: 8px 10px;
}
.c-part-modal__accept_why{ font: 400 var(--fs-meta)/1.5 var(--font-ui); font-style: italic; color: var(--ink-3); }
.c-part-modal__accept_why b{ color: var(--danger); font-weight: 600; font-style: normal; }

/* ── concessões à vista na hora do aceite (doc 64) ───────────────────────────────────────────
   O remanescente não trava o aceite — é a definição de concessão. Mas aceitar sem ver o que fica
   devendo não é ato informado: é a "confirmation of any concessions granted" do fim de estágio. */
.c-part-modal__concessions{
  flex-basis: 100%; margin: 10px 0 0; padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, #fff);
  background: color-mix(in srgb, var(--warn) 6%, #fff);
}
.c-part-modal__ctitle{
  margin-bottom: 6px;
  font: 600 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--warn);
}
.c-part-modal__clist{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.c-part-modal__citem{
  display: flex; gap: 8px; align-items: baseline;
  font: 400 var(--fs-meta)/1.45 var(--font-ui); color: var(--ink-2);
}
.c-part-modal__ckey{
  flex: 0 0 auto; padding: 2px 6px; background: var(--ink); color: var(--surface);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .05em;
}
.c-part-modal__cnote{
  margin: 7px 0 0; font: 400 var(--fs-meta)/1.45 var(--font-ui); font-style: italic; color: var(--ink-3);
}