/* Editor · llave de fragmento y filas de fragmento de la IA.
   Troceado de `compact_workspace.css` (lote C3). Carga en `head_extra` de
   editor/editor.html, ANTES del núcleo: ante una regla del núcleo con la misma
   especificidad, pierde. El orden entre módulos lo fija tests/css_manifest.py. */
/* ═══════════════════════════════════════════════════════════════════════
   LLAVE DE FRAGMENTO
   Rediseño de la clarificación, R31a (`editor/fragment_bracket.js`). Los
   fragmentos del texto que la IA revisa y cobra juntos: una fila por
   fragmento en el globo de la franja (párrafos, barrita de estados y, si
   falta, «Revisar · N peticiones») y la llave en el margen del folio. Solo
   con la IA encendida, así que el acento es el índigo de la IA.
   ═══════════════════════════════════════════════════════════════════════ */
.fragment-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.fragment-section-title { margin: 0; color: var(--text-muted); font: 650 11px var(--font-heading, inherit); letter-spacing: .04em; text-transform: uppercase; }
/* Las filas comparten columnas (subgrid) para que las barritas midan igual
   aunque el coste de cada fragmento ocupe distinto. */
.fragment-rows { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.fragment-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 4px 0 6px;
  border-radius: 8px;
  color: #475569;
  font-size: 12px;
}
.fragment-row:hover,
.fragment-row:focus-within { background: #f5f5fe; }
.fragment-row-name { color: var(--text-main); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* El botón lleva también `.assistant-btn` (editor/fragment_bracket.js), que ya
   no declara ninguna hoja: el estilo es solo el de esta fila. */
.fragment-row .fragment-row-go { justify-self: end; min-height: 28px; color: var(--ed-accent, #006fc0); border-color: rgba(0, 111, 192, .35); }
.fragment-row .fragment-row-go:hover { background: var(--ed-active-bg, #eaf3fb); }
.fragment-row-go[disabled],
.fragment-rest[disabled] { opacity: .55; cursor: default; }
.fragment-row-note { justify-self: end; padding-right: 10px; color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.fragment-rest { width: 100%; }
.fragment-error:not([hidden]) { color: #b42318; }

/* La llave: una capa hermana del folio dentro del lienzo, que es el contexto
   de posicionamiento y el que se desplaza. No es contenido: no la ve
   ProseMirror, no intercepta el puntero y no la lee el lector de pantalla
   (lo accesible está en la fila del globo). */
.fragment-bracket {
  position: absolute;
  z-index: 2;
  width: 8px;
  box-sizing: border-box;
  border: 1.5px solid var(--ai);
  border-left-width: 3px;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, top .15s ease, height .15s ease;
}
.fragment-bracket.is-visible { opacity: .8; }
/* El cambio de la fila del paso abierto bajo el ratón o con el foco (N4). Solo
   fondo: la decoración se parte en trozos donde empiezan y acaban las marcas, y
   un contorno por trozo dibujaría costuras. */
.editor-step-lit { background-color: rgba(0, 111, 192, .2); }
@media (prefers-reduced-motion: reduce) {
  .fragment-bracket { transition: none; }
}