/* Bloco "Composição & Critérios (DoD)" do Planejamento da Parte (Parts::DodBlockComponent, doc 57).
   Renderizado DENTRO da <section> do PhaseFieldsComponent (que dá head + hint). Itens C1/C2… com
   critérios aninhados; ghost inputs criam por Enter; badge must/nice alterna por clique. Tokens só;
   geometria sharp. Mockup aprovado no doc 57. */

.c-dod-block{ margin: 9px 0 0 47px; max-width: 66ch; }

/* live region do arraste: só para leitor de tela (a app não tem utilitário sr-only global) */
.c-dod-block__live{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── alças de arraste: <button> resetado; grip visível, cursor grab→grabbing ──────────────────
   Estados de foco no idioma da casa (outline brand). A cor sobe no hover do card: descoberta sem
   depender só de hover, sem virar ruído. */
.c-dod-block__ihandle, .c-dod-block__crithandle{
  border: 0; background: transparent; padding: 0; color: var(--ink-3);
  cursor: grab; user-select: none; transition: color var(--t1) var(--ease);
}
.c-dod-block__ihandle:active, .c-dod-block__crithandle:active{ cursor: grabbing; }
.c-dod-block__item:hover .c-dod-block__ihandle,
.c-dod-block__crit:hover .c-dod-block__crithandle{ color: var(--ink-2); }
.c-dod-block__ihandle:focus-visible, .c-dod-block__crithandle:focus-visible{
  outline: 2px solid var(--brand); outline-offset: -1px; color: var(--brand);
}
/* pego pelo teclado: a alça fica "acesa" enquanto as setas movem */
.c-dod-block__ihandle[aria-pressed="true"], .c-dod-block__crithandle[aria-pressed="true"]{
  color: var(--brand); cursor: grabbing;
}

/* ── colapsar/expandir tudo: compacto e à direita (mesmo idioma do dossiê/titlebar) ────────── */
.c-dod-block__toolbar{ display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.c-dod-block__toolbar .c-ui-button--quiet{ padding: 4px 9px; font-size: var(--fs-label); }

/* ── item de composição ────────────────────────────────────────────────────── */
.c-dod-block__item{ border: 1px solid var(--line-2); margin: 0 0 10px; transition: opacity var(--t1) var(--ease); }
/* Colapso SECO: o slide (grid-template-rows 1fr↔0fr) foi implementado, testado em uso e REPROVADO —
   numa lista que se abre e fecha em sequência o corte imediato lê melhor. Fica o registro para não
   tentar de novo achando que é melhoria. */
/* Colapsado sobra o CABEÇALHO — e só ele. A faixa de origem e a da decisão (doc 64) entraram
   depois e ficaram de fora desta regra: um remanescente colapsado mostrava três faixas. O filete
   âmbar na borda esquerda já diz que é remanescente; o título riscado já diz que foi abandonado. */
.c-dod-block__item.is-collapsed > .c-dod-block__idates,
.c-dod-block__item.is-collapsed > .c-dod-block__origin,
.c-dod-block__item.is-collapsed > .c-dod-block__gone,
.c-dod-block__item.is-collapsed > .c-dod-block__crits{ display: none; }
/* A coluna da seta saiu (doc 63): a linha inteira é o gatilho, e o botão virou chrome redundante.
   O estado se lê no próprio cartão — detalhe à vista ou não. */
.c-dod-block__ihead{
  /* a última coluna é `auto`, não 30px fixos: ela serve tanto ao ✕ (glifo) quanto ao rótulo
     "abandonar" do remanescente — fixada, cortava a palavra. O piso de 30px vive no próprio ✕. */
  display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto auto; align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.c-dod-block__ihead:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; }
.c-dod-block__ihandle{ display: flex; align-items: center; justify-content: center; }
.c-dod-block__ikey{
  display: flex; align-items: center; padding: 0 9px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .05em;
  color: var(--surface); background: var(--ink);
}
.c-dod-block__iform{ display: flex; min-width: 0; }
.c-dod-block__iinput{
  width: 100%; min-width: 0; border: 0; background: var(--surface); outline: 0;
  font: 600 var(--fs-ui)/1.4 var(--font-ui); letter-spacing: -.01em; color: var(--ink); padding: 9px 12px;
}
/* readonly = fora de edição (doc 63): o clique simples é da linha, quem abre a edição é o lápis.
   Nada de cinza de campo desligado — o título continua sendo texto de leitura, não um controle
   apagado. E o campo NÃO recebe ponteiro: o clique atravessa até a linha (que expande) em vez de
   focar um campo que não aceita digitação — era isso que fazia o título "parecer editável" e
   engolir o clique da linha. */
.c-dod-block__iinput[readonly], .c-dod-block__cinput[readonly]{ cursor: default; pointer-events: none; }
/* "editar": rótulo MONO, não ícone. O repertório da casa para ação discreta é texto micro em mono
   uppercase (o hint EDITAR do cronograma) — um lápis desenhado fica fora de família e some no meio
   dos glifos ✕/⠿. Discreto em repouso, acende no hover da linha (idioma da alça de arraste); em
   edição fica "aceso" em grafite. */
.c-dod-block__pen{
  border: 0; border-left: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); cursor: pointer; padding: 0 8px; white-space: nowrap;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--t1) var(--ease);
}
.c-dod-block__ihead:hover .c-dod-block__pen, .c-dod-block__crittop:hover .c-dod-block__pen{ color: var(--ink-2); }
.c-dod-block__pen:hover{ color: var(--brand); }
.c-dod-block__pen:focus-visible{ outline: 2px solid var(--brand); outline-offset: -1px; color: var(--brand); }
.is-editing .c-dod-block__pen{ color: var(--brand); }
/* no critério o contexto é flex (não a barra em grid do item): sem borda, alinhado ao topo */
.c-dod-block__pen--crit{ flex: 0 0 auto; border-left: 0; background: transparent; padding: 4px 4px 0; }
.c-dod-block__iinput:focus{ box-shadow: inset 0 0 0 2px rgba(42, 49, 64, .09); }
.c-dod-block__xform{ display: flex; min-width: 30px; }
.c-dod-block__x{
  width: 100%; border: 0; border-left: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); font: 400 var(--fs-ui)/1 var(--font-ui); cursor: pointer;
}
.c-dod-block__x:hover{ color: var(--danger); }

/* ── datas do item (o cronograma 03.2 LÊ; o Planejamento ESCREVE) ──────────────
   linha compacta plan./prev. sob o cabeçalho do item; sharp, mono, controle de bancada (--control-h-sm). */
/* RODAPÉ do cartão: a faixa fecha o item, não o abre — daí `border-top`. (Nasceu logo abaixo do
   cabeçalho e desceu por decisão do PM: primeiro o que se entrega e como se afere, depois quando.) */
.c-dod-block__idates{
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 6px 12px;
  background: var(--surface-sunken); border-top: 1px solid var(--line);
}
/* dois forms na mesma faixa (doc 63): o término é do ITEM, a verificação é da ENTRADA do registro —
   endpoints diferentes, mesma linha visual. O filete separa os dois fatos sem inventar peso novo. */
.c-dod-block__idateform{ display: inline-flex; align-items: center; gap: 10px; }
.c-dod-block__idatesep{ width: 1px; align-self: stretch; min-height: 18px; background: var(--line-2); }
/* item já aprovado: carimbo no lugar do input (reabrir verificação é decisão, não digitação) */
.c-dod-block__ivstamp b{
  color: var(--ok); font: 600 var(--fs-meta)/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.c-dod-block__idate{
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.c-dod-block__idate input{
  height: var(--control-h-sm); border: 1px solid var(--line-2); background: var(--surface); outline: 0;
  font: 500 var(--fs-meta)/1 var(--font-mono); color: var(--ink); padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.c-dod-block__idate input:focus{ border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* ── critérios do item: cada um é um CARTÃO aninhado (doc 59) ───────────────── */
.c-dod-block__crits{ padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.c-dod-block__crit{
  background: var(--surface-sunken); border: 1px solid var(--line);
  transition: opacity var(--t1) var(--ease);
}
.c-dod-block__crit.is-collapsed > .c-dod-block__critdetail{ display: none; }
/* cursor de área clicável nos CABEÇALHOS (a linha inteira expande — doc 63); os controles de dentro
   sobrescrevem com o cursor próprio. `user-select: none` porque abrir/fechar duas vezes seguidas é
   gesto corriqueiro agora, e o duplo clique nativo selecionaria a palavra sob o cursor — seleção
   que ninguém pediu e que suja a linha. O campo EM EDIÇÃO volta a selecionar normalmente. */
.c-dod-block__ihead, .c-dod-block__crittop{ cursor: pointer; user-select: none; }
.is-editing .c-dod-block__iinput, .is-editing .c-dod-block__cinput{ user-select: text; }
.c-dod-block__crittop{ display: flex; align-items: start; gap: 9px; padding: 8px 10px; }
.c-dod-block__crithandle{ padding: 2px 4px; line-height: 1.5; }
.c-dod-block__crittop:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; }
/* selo do nível no cabeçalho: SEMPRE visível. A primeira versão o mostrava só colapsado (para não
   repetir o segmentado do detalhe) — e o selo sumindo ao expandir desorientava, que é pior que a
   redundância. São papéis distintos: o selo LÊ o estado na linha, o segmentado EDITA no detalhe.
   Largura fixa para must/nice não serrilharem a coluna. */
.c-dod-block__critlv{
  display: inline-block; flex: 0 0 auto; width: 42px; text-align: center; padding: 3px 0; margin-top: 1px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid;
}
.c-dod-block__critlv--must{ color: var(--surface); background: var(--brand); border-color: var(--brand); }
.c-dod-block__critlv--nice{ color: var(--ink-2); background: var(--surface); border-color: var(--line-2); }

/* índice do critério — identificação rápida de relance, mesmo idioma mono/uppercase do selo. */
.c-dod-block__critidx{
  flex: 0 0 auto; margin-top: 1px; padding: 3px 0; color: var(--ink-3);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em;
}

/* ── o que fica na lista é a LACUNA, não um segundo cartão levantado ──────────────────────────
   Num drag HTML5 há dois visuais: a drag image (retrato colado no cursor, que já vem "levantada"
   de graça) e o elemento original, que passeia pela lista como preview. O original tem que ler
   como o buraco onde vai cair — foi justamente a inversão disso que fazia o arraste parecer
   quebrado (dois cartões levantados, nenhum buraco). Vale para os dois níveis. */
/* a transição de opacidade do arraste convive com a do colapso (declaradas juntas lá em cima, para
   uma não sobrescrever a outra — `transition` é propriedade única, não lista acumulável). */
.c-dod-block__crit.is-dragging, .c-dod-block__item.is-dragging{
  opacity: .35; outline: 1px dashed var(--brand); outline-offset: -1px;
}
/* pego pelo teclado: mesma leitura de "em trânsito", sem o apagamento (aqui o card não sai de
   baixo do olho do usuário — ele é o que se move). */
.c-dod-block__crit.is-keyboard-dragging, .c-dod-block__item.is-keyboard-dragging{
  outline: 2px solid var(--brand); outline-offset: -1px;
}
.c-dod-block__cform{ flex: 1 1 auto; display: flex; min-width: 0; }
/* textarea (não input): título longo quebra linha e cresce em vez de ser cortado atrás do ✕
   (mesmo idioma da medida, abaixo). */
.c-dod-block__cinput{
  width: 100%; min-width: 0; resize: none; field-sizing: content; overflow: hidden;
  border: 0; border-bottom: 1px solid transparent; background: transparent;
  outline: 0; font: 600 var(--fs-ui)/1.5 var(--font-ui); color: var(--ink); padding: 2px 2px;
}
.c-dod-block__cinput:focus{ border-bottom-color: var(--brand); }
.c-dod-block__cxform{ flex: 0 0 auto; display: flex; }
.c-dod-block__cx{
  border: 0; background: transparent; color: var(--ink-3); font-size: var(--fs-ui);
  cursor: pointer; padding: 2px 4px;
}
.c-dod-block__cx:hover{ color: var(--danger); }

/* detalhe do critério: INDENTADO sob a descrição (após o gabarito do nível) + filete à esquerda,
   deixando claro que método/medida/veredito pertencem a este critério. */
.c-dod-block__critdetail{
  margin: 0 10px 10px 10px; padding-left: 12px; border-left: 2px solid var(--line-2);
  display: flex; flex-direction: column; gap: 8px;
}
.c-dod-block__cfield{ display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; }
/* a linha da medida alinha pelo topo (o textarea é multilinha) */
.c-dod-block__cfield--measure{ align-items: start; }
.c-dod-block__cfield--measure .c-dod-block__clabel{ padding-top: 8px; }
.c-dod-block__clabel{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

/* controle SEGMENTADO teste/inspeção — dois button_to; ativo GRAFITE (chrome ativo, não índigo). */
.c-dod-block__seg{ justify-self: start; display: inline-flex; border: 1px solid var(--line-2); }
.c-dod-block__segform{ display: inline-flex; margin: 0; }
.c-dod-block__segform + .c-dod-block__segform .c-dod-block__segbtn{ border-left: 1px solid var(--line-2); }
.c-dod-block__segbtn{
  border: 0; background: var(--surface); color: var(--ink-3); cursor: pointer; padding: 4px 11px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase;
}
.c-dod-block__segbtn.is-on{ background: var(--brand); color: var(--surface); cursor: default; }

.c-dod-block__measureform{ display: flex; min-width: 0; }
/* textarea com CARA de campo: borda + fundo papel + padding. field-sizing:content cresce com o
   texto (Chrome moderno); o min-height garante ~2 linhas mesmo sem suporte. Nada de truncar. */
.c-dod-block__measure{
  width: 100%; min-width: 0; resize: none; field-sizing: content;
  border: 1px solid var(--line); background: var(--paper); outline: 0;
  font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink-2); padding: 6px 9px;
  min-height: 3em; max-height: 9em; overflow-y: auto;
}
.c-dod-block__measure::placeholder{ color: var(--ink-3); font-style: italic; }
.c-dod-block__measure:hover{ border-color: var(--line-2); }
.c-dod-block__measure:focus{ border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(42, 49, 64, .07); color: var(--ink); }

/* ── ghosts de criação (digitar + Enter; itálico discreto como placeholder da casa) ── */
.c-dod-block__addcrit{ margin-top: 2px; padding-left: 2px; }
.c-dod-block__addcrit_input, .c-dod-block__additem_input{
  width: 100%; border: 0; background: transparent; outline: 0;
  font: 500 var(--fs-meta)/1.5 var(--font-mono); letter-spacing: .04em; color: var(--ink);
  padding: 4px 2px;
}
.c-dod-block__addcrit_input::placeholder, .c-dod-block__additem_input::placeholder{
  color: var(--ink-3); font-style: italic;
}
.c-dod-block__additem{ margin-top: 2px; border: 1px dashed var(--line-2); }
.c-dod-block__additem_input{ padding: 7px 12px; }
.c-dod-block__additem:focus-within{ border-color: var(--brand); border-style: solid; }

/* ── prosa legada (FieldResponse órfã de `criteria`) — só leitura ──────────── */
.c-dod-block__legacy{ margin-top: 14px; border: 1px dashed var(--line-2); }
.c-dod-block__legacy summary{
  list-style: none; cursor: pointer; padding: 7px 11px;
  font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.c-dod-block__legacy summary::before{ content: "▸ "; }
.c-dod-block__legacy[open] summary::before{ content: "▾ "; }
.c-dod-block__legacy_body{ padding: 2px 12px 4px; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.55; }
.c-dod-block__legacy_note{ padding: 0 12px 11px; font-size: var(--fs-meta); font-style: italic; color: var(--ink-3); }

/* ── documentação anexada: mesmo gabarito de campo (rótulo + corpo) dos demais __cfield ──────── */
.c-dod-block__cfield--docs{ grid-template-columns: 58px 1fr; align-items: start; }
.c-dod-block__cfield--docs .c-dod-block__clabel{ padding-top: 6px; }
.c-dod-block__docs{ display: flex; flex-direction: column; gap: 4px; }
.c-dod-block__doc{ display: flex; align-items: center; gap: 8px; }
.c-dod-block__doc_link{ font: 500 var(--fs-meta)/1.4 var(--font-ui); color: var(--brand); text-decoration: underline; }
.c-dod-block__doc_size{ font: 400 var(--fs-label)/1 var(--font-mono); color: var(--ink-3); }
.c-dod-block__doc_xform{ display: inline-flex; }
.c-dod-block__doc_x{ border: 0; background: transparent; color: var(--ink-3); font-size: var(--fs-ui); cursor: pointer; padding: 0 4px; }
.c-dod-block__doc_x:hover{ color: var(--danger); }
.c-dod-block__doc_upload{ margin-top: 2px; }
/* gatilho = ícone quadrado, mesmo gabarito compacto (--control-h-sm) e cor dos outros botões
   pequenos do bloco (x/handle); o <input type=file> nativo fica só clicável/focável (a11y), sem
   o "Choose Files/No file chosen" do navegador na tela. */
.c-dod-block__doc_attach{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: var(--control-h-sm); border: 1px solid var(--line-2);
  color: var(--ink-3); cursor: pointer;
}
.c-dod-block__doc_attach:hover{ color: var(--brand); border-color: var(--brand); }
.c-dod-block__doc_attach svg{ width: 14px; height: 14px; }
.c-dod-block__doc_input{
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}

/* memória da remarcação: a base imutável, em leitura, ao lado do campo único de data */
.c-dod-block__era{ align-self: center; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .05em; color: var(--ink-3); white-space: nowrap; }

/* o FLIP do reorder tem guard próprio no controller (this.reducedMotion) — aqui ficam as
   transições declarativas. */
@media (prefers-reduced-motion: reduce){
  .c-dod-block *{ transition: none !important; animation: none !important; }
}

/* ── concessão: o remanescente e o abandono (doc 64) ─────────────────────────────────────────
   O remanescente NÃO é um cartão de outra espécie — é entregável, e entregável é item. O que o
   distingue é um filete âmbar e a faixa de origem; o resto do cartão é idêntico. */
.c-dod-block__item--remnant{ border-left: 3px solid var(--warn); }
.c-dod-block__origin{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  margin-top: 8px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--warn) 6%, #fff);
  font: 400 var(--fs-meta)/1.4 var(--font-ui); color: var(--ink-2);
}
.c-dod-block__origintag{
  padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--warn) 40%, #fff);
  background: color-mix(in srgb, var(--warn) 12%, #fff); color: var(--warn);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.c-dod-block__originwhy{ color: var(--ink-3); font-style: italic; }

/* "abandonar" ao lado de "editar" — o rótulo diz o que acontece; um ✕ prometeria exclusão e
   entregaria outra coisa (o controller recusa apagar remanescente). */
.c-dod-block__drop{
  border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  padding: 0 8px; cursor: pointer; white-space: nowrap;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--t1) var(--ease);
}
.c-dod-block__ihead:hover .c-dod-block__drop{ color: var(--ink-2); }
.c-dod-block__drop:hover{ color: var(--danger); }
.c-dod-block__drop:focus-visible{ outline: 2px solid var(--brand); outline-offset: -1px; color: var(--brand); }
/* célula vazia no lugar das ações do abandonado: a grade do cabeçalho não muda de forma */
.c-dod-block__noact{ border-left: 1px solid var(--line); }

/* ABANDONADO: sai do gate e do cronograma, nunca do banco. Perde a cor, ganha o risco e carrega a
   decisão embaixo — é o que responde, meses depois, por que aquilo não foi feito. */
.c-dod-block__item--gone{ border-left-color: var(--line-2); background: var(--surface-sunken); }
.c-dod-block__item--gone .c-dod-block__ihead{ background: var(--surface-sunken); }
.c-dod-block__item--gone .c-dod-block__iinput{
  color: var(--ink-3); text-decoration: line-through; background: transparent;
}
.c-dod-block__gone{
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 7px 12px;
  border-top: 1px solid var(--line);
  font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink-2);
}
.c-dod-block__gonetag{
  flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-3);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.c-dod-block__gonewhy{ flex: 1 1 240px; min-width: 0; }
.c-dod-block__gonewho{ color: var(--ink-3); font-style: italic; }

/* diálogo do abandono: <dialog> nativo com as classes do Ui::Confirm; só o miolo é próprio, porque
   o confirm da casa é sim/não e aqui a JUSTIFICATIVA é o ponto. */
.c-dod-block__adialog{ max-width: 520px; }
.c-dod-block__aq{ margin: 6px 0 4px; font: 600 var(--fs-ui)/1.4 var(--font-ui); color: var(--ink); }
.c-dod-block__ahint{ margin: 0 0 12px; font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink-3); }
.c-dod-block__alabel{
  display: block; margin-bottom: 5px;
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.c-dod-block__ata{
  width: 100%; border: 1px solid var(--line-2); background: var(--surface); outline: 0;
  padding: 8px; font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink); resize: vertical;
}
.c-dod-block__ata:focus{ border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.c-dod-block__aby{ margin: 10px 0 0; font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink-2); }
.c-dod-block__aby b{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 6px;
}
.c-dod-block__ablocked{
  margin: 12px 0 0; padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, #fff);
  background: color-mix(in srgb, var(--warn) 8%, #fff);
  font: 400 var(--fs-meta)/1.5 var(--font-ui); color: var(--ink-2);
}
.c-dod-block__ablocked b{ color: var(--warn); font-weight: 600; }
/* detalhe do critério num item abandonado: legível, mas visivelmente fora de operação (o `inert` do
   HTML tira clique e tabulação; a cor conta a mesma história para quem só olha). */
.c-dod-block__item--gone .c-dod-block__critdetail{ opacity: .72; }