/* NextGen DS · componentes ng-*.
   Sólo leen tokens (var(--ng-*)) de tokens.css: aquí no hay colores ni tamaños crudos salvo el blanco del texto sobre
   peligro y la perilla del switch. Todo lleva prefijo ng- para convivir con Bootstrap 4 y el CSS de cada módulo.
   Referencia viva: assets/ds/demo.html. Guía: docs/Alex.DESIGN_SYSTEM.md. */

/* Los componentes no dependen de un `* { box-sizing }` global de la página (main.css de NextGen no lo tiene):
   sin esto, un ng-input / ng-callout con width:100% + padding se sale de su contenedor. */
[class^="ng-"], [class*=" ng-"],
[class^="ng-"]::before, [class*=" ng-"]::before,
[class^="ng-"]::after, [class*=" ng-"]::after { box-sizing: border-box; }

/* ── Controles ─────────────────────────────────────────────────────────────── */
.ng-btn {
  --_bg: var(--ng-surface); --_fg: var(--ng-fg); --_bd: var(--ng-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ng-h-control); padding: 0 14px;
  font: 500 var(--ng-fs-md)/1 var(--ng-font-sans);
  color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--ng-r-md);
  cursor: pointer; user-select: none; white-space: nowrap;
  box-shadow: var(--ng-shadow-sm);
  transition: transform var(--ng-t-press) var(--ng-ease-out), background-color var(--ng-t-fast) ease, border-color var(--ng-t-fast) ease, box-shadow var(--ng-t-fast) ease;
}
.ng-btn:active:not(:disabled) { transform: scale(.97); }
.ng-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ng-focus); }
.ng-btn svg { width: 16px; height: 16px; flex: none; }
.ng-btn--primary { --_bg: var(--ng-accent); --_fg: var(--ng-accent-fg); --_bd: transparent; }
.ng-btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; color: var(--ng-fg-2); }
.ng-btn--danger { --_bg: var(--ng-danger); --_fg: #fff; --_bd: transparent; }
.ng-btn--sm { height: 28px; padding: 0 10px; font-size: var(--ng-fs-sm); border-radius: var(--ng-r-sm); }
.ng-btn--icon { width: var(--ng-h-control); padding: 0; }
.ng-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .ng-btn:hover:not(:disabled) { --_bd: var(--ng-fg-3); }
  .ng-btn--primary:hover:not(:disabled) { --_bg: var(--ng-accent-hover); --_bd: transparent; }
  .ng-btn--ghost:hover:not(:disabled) { --_bg: var(--ng-surface-2); --_bd: transparent; color: var(--ng-fg); }
  .ng-btn--danger:hover:not(:disabled) { --_bg: color-mix(in srgb, var(--ng-danger) 88%, #000); --_bd: transparent; }
}
.ng-btn .spin { display: none; }
.ng-btn[aria-busy="true"] .spin { display: block; animation: spin calc(600ms * var(--ng-speed)) linear infinite; }
.ng-btn[aria-busy="true"] .ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.ng-field { display: grid; gap: 6px; min-width: 0; }
.ng-label { font-size: var(--ng-fs-sm); font-weight: 500; color: var(--ng-fg); }
.ng-help { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); }
.ng-help.err { color: var(--ng-danger); }
.ng-input, .ng-select {
  width: 100%; height: var(--ng-h-control); padding: 0 10px;
  font: 400 var(--ng-fs-md) var(--ng-font-sans); color: var(--ng-fg);
  background: var(--ng-surface); border: 1px solid var(--ng-border-strong); border-radius: var(--ng-r-md);
  transition: border-color var(--ng-t-fast) ease, box-shadow var(--ng-t-fast) ease;
}
.ng-input::placeholder { color: var(--ng-fg-3); }
.ng-input:focus, .ng-select:focus { outline: none; border-color: var(--ng-accent); box-shadow: 0 0 0 3px var(--ng-focus); }
.ng-input[aria-invalid="true"] { border-color: var(--ng-danger); }
.ng-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-danger) 25%, transparent); }
.ng-select-wrap { position: relative; }
.ng-select { appearance: none; padding-right: 32px; cursor: pointer; }
.ng-select-wrap::after, .ng-combo-chev {
  content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none;
  background: var(--ng-fg-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ng-input-icon { position: relative; }
.ng-input-icon svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--ng-fg-3); pointer-events: none; }
.ng-input-icon .ng-input { padding-left: 32px; }

/* combobox (replacement for select2 / comp_next pickers) */
.ng-combo { position: relative; }
.ng-combo .ng-input { padding-right: 32px; }
.ng-combo-chev { transition: transform var(--ng-t-fast) var(--ng-ease-out); }
.ng-combo.open .ng-combo-chev { transform: rotate(180deg); }
.ng-pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: var(--ng-r-md); box-shadow: var(--ng-shadow-lg);
  padding: 4px; max-height: 248px; overflow: auto;
  transform-origin: top center;
  opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none; visibility: hidden;
  transition: opacity var(--ng-t-fast) var(--ng-ease-out), transform var(--ng-t-fast) var(--ng-ease-out), visibility 0s linear var(--ng-t-fast);
}
.ng-combo.open .ng-pop { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.ng-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--ng-r-sm); cursor: pointer; font-size: var(--ng-fs-md); }
.ng-opt small { margin-left: auto; color: var(--ng-fg-3); font-size: var(--ng-fs-xs); font-family: var(--ng-font-mono); }
.ng-opt mark { background: none; color: var(--ng-accent); font-weight: 600; }
.ng-opt[aria-selected="true"] { background: var(--ng-surface-2); }
.ng-opt .chk { width: 14px; height: 14px; color: var(--ng-accent); visibility: hidden; flex: none; }
.ng-opt.picked .chk { visibility: visible; }
.ng-empty { padding: 12px 8px; color: var(--ng-fg-3); font-size: var(--ng-fs-sm); }

/* choice controls */
.ng-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--ng-fs-md); }
.ng-check input { appearance: none; margin: 0; width: 16px; height: 16px; border: 1px solid var(--ng-border-strong); border-radius: 4px; background: var(--ng-surface); display: grid; place-items: center; cursor: pointer; transition: background-color var(--ng-t-fast) ease, border-color var(--ng-t-fast) ease; }
.ng-check input[type="radio"] { border-radius: 50%; }
.ng-check input::after { content: ""; width: 10px; height: 10px; background: var(--ng-accent-fg); opacity: 0; transform: scale(.6); transition: opacity var(--ng-t-fast) var(--ng-ease-out), transform var(--ng-t-fast) var(--ng-ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ng-check input[type="radio"]::after { -webkit-mask: none; mask: none; border-radius: 50%; width: 6px; height: 6px; }
.ng-check input:checked { background: var(--ng-accent); border-color: var(--ng-accent); }
.ng-check input:checked::after { opacity: 1; transform: none; }
.ng-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ng-focus); }

.ng-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--ng-fs-md); }
.ng-switch input { appearance: none; margin: 0; width: 32px; height: 18px; border-radius: var(--ng-r-full); background: var(--ng-border-strong); position: relative; cursor: pointer; transition: background-color var(--ng-t-fast) ease; }
.ng-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--ng-t-base) var(--ng-ease-out); }
.ng-switch input:checked { background: var(--ng-accent); }
.ng-switch input:checked::after { transform: translateX(14px); }
.ng-switch input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ng-focus); }

.ng-seg { position: relative; display: inline-flex; padding: 3px; background: var(--ng-surface-2); border-radius: var(--ng-r-md); border: 1px solid var(--ng-border); }
.ng-seg button { position: relative; z-index: 1; border: 0; background: none; height: 28px; padding: 0 12px; font: 500 var(--ng-fs-sm) var(--ng-font-sans); color: var(--ng-fg-2); cursor: pointer; border-radius: var(--ng-r-sm); transition: color var(--ng-t-fast) ease; }
.ng-seg button[aria-pressed="true"] { color: var(--ng-fg); }
.ng-seg-ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: var(--ng-r-sm); background: var(--ng-surface); box-shadow: var(--ng-shadow-sm); transition: transform var(--ng-t-base) var(--ng-ease-out), width var(--ng-t-base) var(--ng-ease-out); }

/* status badges — semantic, separate from the accent */
.ng-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--ng-r-full); font-size: var(--ng-fs-xs); font-weight: 500; white-space: nowrap; background: var(--ng-surface-2); color: var(--ng-fg-2); }
.ng-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ng-badge.ok { background: var(--ng-ok-soft); color: var(--ng-ok); }
.ng-badge.warn { background: var(--ng-warn-soft); color: var(--ng-warn); }
/* main.css tiene un .err genérico (display:flex; margin:-5px 0 10px): .ng-badge.err le gana por especificidad */
.ng-badge.err { display: inline-flex; margin: 0; background: var(--ng-danger-soft); color: var(--ng-danger); }
.ng-badge.info { background: var(--ng-accent-soft); color: var(--ng-accent); }

/* tooltip: delayed first time, instant while warm */
[data-ng-tip] { position: relative; }
[data-ng-tip]::after {
  content: attr(data-ng-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  translate: -50% 0; transform: translateY(2px) scale(.97); transform-origin: bottom center;
  background: var(--ng-fg); color: var(--ng-bg); font: 500 var(--ng-fs-xs)/1.3 var(--ng-font-sans);
  padding: 6px 8px; border-radius: var(--ng-r-sm); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--ng-t-fast) var(--ng-ease-out), transform var(--ng-t-fast) var(--ng-ease-out); transition-delay: 0s; z-index: 30;
}
@media (hover: hover) and (pointer: fine) {
  [data-ng-tip]:hover::after { opacity: 1; transform: none; transition-delay: calc(450ms * var(--ng-speed)); }
  .ng-tips-warm [data-ng-tip]:hover::after { transition-duration: 0s; transition-delay: 0s; }
}
[data-ng-tip]:focus-visible::after { opacity: 1; transform: none; }

/* table */
.ng-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ng-border); border-radius: var(--ng-r-lg); background: var(--ng-surface); }
.ng-table { width: 100%; border-collapse: collapse; font-size: var(--ng-fs-md); min-width: 640px; }
.ng-table th { text-align: left; font-weight: 500; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--ng-border); background: var(--ng-surface-2); white-space: nowrap; }
.ng-table td { padding: 10px 12px; border-bottom: 1px solid var(--ng-border); white-space: nowrap; }
.ng-table tr:last-child td { border-bottom: 0; }
.ng-table td.r, .ng-table th.r { text-align: right; }
.ng-table tbody tr { cursor: pointer; }
.ng-table tbody tr[aria-selected="true"] td { background: var(--ng-accent-soft); }
@media (hover: hover) and (pointer: fine) { .ng-table tbody tr:hover td { background: var(--ng-surface-2); } .ng-table tbody tr[aria-selected="true"]:hover td { background: var(--ng-accent-soft); } }
.ng-table .sub { display: block; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); }

/* dialog */
.ng-dialog {
  border: 1px solid var(--ng-border); border-radius: var(--ng-r-lg); padding: 0; width: min(440px, calc(100% - 32px));
  background: var(--ng-surface); color: var(--ng-fg); box-shadow: var(--ng-shadow-lg);
  opacity: 0; transform: scale(.96);
  transition: opacity calc(150ms * var(--ng-speed)) var(--ng-ease-out), transform calc(150ms * var(--ng-speed)) var(--ng-ease-out), overlay calc(150ms * var(--ng-speed)) allow-discrete, display calc(150ms * var(--ng-speed)) allow-discrete;
}
.ng-dialog[open] { opacity: 1; transform: none; transition-duration: var(--ng-t-base); }
@starting-style { .ng-dialog[open] { opacity: 0; transform: scale(.96); } }
.ng-dialog::backdrop { background: var(--ng-overlay); opacity: 0; transition: opacity var(--ng-t-base) ease, overlay var(--ng-t-base) allow-discrete, display var(--ng-t-base) allow-discrete; }
.ng-dialog[open]::backdrop { opacity: 1; }
@starting-style { .ng-dialog[open]::backdrop { opacity: 0; } }
.ng-dialog-body { padding: 20px; display: grid; gap: 10px; }
.ng-dialog-body h3 { font-size: var(--ng-fs-lg); }
.ng-dialog-body p { color: var(--ng-fg-2); font-size: var(--ng-fs-md); }
.ng-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ng-border); background: var(--ng-surface-2); border-radius: 0 0 var(--ng-r-lg) var(--ng-r-lg); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: var(--ng-fs-sm); margin-top: 4px; }
.kv dt { color: var(--ng-fg-3); } .kv dd { margin: 0; }

/* drawer (the ⓘ info panel) */
.ng-drawer-scrim { position: fixed; inset: 0; background: var(--ng-overlay); z-index: 40; opacity: 0; pointer-events: none; transition: opacity var(--ng-t-slow) ease; }
.ng-drawer {
  position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(380px, 100%);
  background: var(--ng-surface); border-left: 1px solid var(--ng-border); box-shadow: var(--ng-shadow-lg);
  padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  display: grid; align-content: start; gap: 14px; overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--ng-t-slow) var(--ng-ease-drawer), visibility 0s linear var(--ng-t-slow);
}
.drawer-open .ng-drawer-scrim { opacity: 1; pointer-events: auto; }
.drawer-open .ng-drawer { transform: none; visibility: visible; transition-delay: 0s; }
.ng-drawer h3 { font-size: var(--ng-fs-lg); }
.ng-drawer p, .ng-drawer li { color: var(--ng-fg-2); font-size: var(--ng-fs-sm); }
.ng-drawer ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ng-drawer-head { display: flex; align-items: center; justify-content: space-between; }

/* toasts — one library instead of notie + noty + sweetalert2 */
.ng-toasts { position: fixed; z-index: 50; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100% - 32px)); }
.ng-toast {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: var(--ng-r-md); box-shadow: var(--ng-shadow-lg);
  padding: 12px 12px 12px 14px; font-size: var(--ng-fs-sm);
  transition: opacity var(--ng-t-slow) var(--ng-ease-out), transform var(--ng-t-slow) var(--ng-ease-out);
}
@starting-style { .ng-toast { opacity: 0; transform: translateY(16px) scale(.98); } }
.ng-toast.leaving { opacity: 0; transform: translateX(24px); transition-duration: var(--ng-t-fast); }
.ng-toast b { display: block; font-weight: 500; color: var(--ng-fg); }
.ng-toast span { color: var(--ng-fg-2); }
.ng-toast .ti { width: 16px; height: 16px; margin-top: 1px; }
.ng-toast.ok .ti { color: var(--ng-ok); } .ng-toast.err .ti { color: var(--ng-danger); }
.ng-toast button { border: 0; background: none; color: var(--ng-fg-3); cursor: pointer; padding: 2px; border-radius: 4px; }
.ng-toast button svg { width: 14px; height: 14px; display: block; }


/* ── Patrones de flujo (promovidos de Alta de Proveedores, pd-*) ───────────── */
/* path of a request: done › here › next */
.ng-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ng-path .sep { color: var(--ng-fg-3); font-size: var(--ng-fs-sm); }
.ng-pstep { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--ng-r-full); font-size: var(--ng-fs-xs); font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.ng-pstep svg { width: 11px; height: 11px; }
.ng-pstep.done { background: var(--ng-ok-soft); color: var(--ng-ok); }
.ng-pstep.now { background: var(--ng-accent); color: var(--ng-accent-fg); }
.ng-pstep.next { color: var(--ng-fg-3); border: 1px dashed var(--ng-border-strong); }
.ng-pstep.next.first { border-style: solid; color: var(--ng-fg-2); }

/* timeline with who and when */
.ng-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ng-border); margin-left: 5px; display: grid; gap: 12px; }
.ng-tl li { position: relative; font-size: var(--ng-fs-md); }
.ng-tl li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ng-border-strong); box-shadow: 0 0 0 3px var(--ng-surface); }
.ng-tl li.done::before { background: var(--ng-accent); }
.ng-tl li.now::before { background: var(--ng-warn); }
.ng-tl li.bad::before { background: var(--ng-danger); }
.ng-tl li.next { color: var(--ng-fg-3); }
.ng-tl .meta { display: block; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); font-variant-numeric: tabular-nums; }
.ng-tl .quote { display: block; margin-top: 4px; font-size: var(--ng-fs-sm); color: var(--ng-fg-2); padding-left: 10px; border-left: 2px solid var(--ng-border); }

/* step rail with state per step */
.ng-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.ng-step { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--ng-r-md); background: none; font: 400 var(--ng-fs-md) var(--ng-font-sans); color: var(--ng-fg); text-align: left; cursor: pointer; transition: background-color var(--ng-t-fast) ease; }
.ng-step .n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--ng-surface-2); color: var(--ng-fg-2); border: 1px solid var(--ng-border); }
.ng-step .n svg { width: 12px; height: 12px; }
.ng-step .t { flex: 1; min-width: 0; display: grid; }
.ng-step .t small { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); }
.ng-step.complete .n { background: var(--ng-ok); border-color: var(--ng-ok); color: var(--ng-surface); }
.ng-step.editing .n { background: var(--ng-warn); border-color: var(--ng-warn); color: var(--ng-surface); }
.ng-step.flagged .n { background: var(--ng-danger); border-color: var(--ng-danger); color: var(--ng-surface); }
.ng-step.locked { opacity: .45; cursor: not-allowed; }
.ng-step[aria-current="step"] { background: var(--ng-accent-soft); }
.ng-step[aria-current="step"] .t > span { font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .ng-step:not(.locked):not([aria-current="step"]):hover { background: var(--ng-surface-2); } }
.ng-progress { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); font-variant-numeric: tabular-nums; }
.ng-progress .track { width: 88px; height: 6px; background: var(--ng-surface-2); border-radius: var(--ng-r-full); overflow: hidden; border: 0; }
.ng-progress .fill { display: block; height: 100%; background: var(--ng-accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--ng-t-slow) var(--ng-ease-out); }
.ng-progress.complete .fill { background: var(--ng-ok); }

/* field states: missing, flagged by a reviewer, read from a document */
.ng-input.is-missing { border-color: var(--ng-danger); background: color-mix(in srgb, var(--ng-danger-soft) 45%, var(--ng-surface)); }
.ng-input.is-flagged { border-color: var(--ng-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ng-danger) 18%, transparent); }
.ng-input.is-read { background: var(--ng-accent-soft); border-style: dashed; border-color: color-mix(in srgb, var(--ng-accent) 40%, var(--ng-border)); color: var(--ng-fg-2); }
.ng-note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--ng-fs-xs); color: var(--ng-danger); }
.ng-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.ng-src { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px; border-radius: 4px; background: var(--ng-accent-soft); color: var(--ng-accent); font-size: 11px; font-weight: 500; vertical-align: 1px; }
.ng-missing { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--ng-fs-sm); color: var(--ng-fg-2); padding: 10px 12px; background: var(--ng-danger-soft); border-radius: var(--ng-r-md); }
.ng-missing b { color: var(--ng-danger); font-weight: 500; }
.ng-missing button { border: 1px solid color-mix(in srgb, var(--ng-danger) 35%, transparent); background: var(--ng-surface); color: var(--ng-danger); height: 24px; padding: 0 10px; border-radius: var(--ng-r-full); font: 500 var(--ng-fs-xs) var(--ng-font-sans); cursor: pointer; transition: transform var(--ng-t-press) var(--ng-ease-out); }
.ng-missing button:active { transform: scale(.97); }
.ng-missing.clear { background: var(--ng-ok-soft); }
.ng-missing.clear b { color: var(--ng-ok); }

/* gate: validate existence before capture */
.ng-gate { width: 100%; border-radius: var(--ng-r-md); padding: 12px 14px; font-size: var(--ng-fs-sm); display: grid; gap: 4px; border: 1px dashed var(--ng-border-strong); background: var(--ng-surface-2); color: var(--ng-fg-2); transition: background-color var(--ng-t-fast) ease, border-color var(--ng-t-fast) ease; }
.ng-gate b { color: var(--ng-fg); font-weight: 500; font-size: var(--ng-fs-md); }
.ng-gate.free { border: 1px solid color-mix(in srgb, var(--ng-ok) 45%, transparent); background: var(--ng-ok-soft); }
.ng-gate.free b { color: var(--ng-ok); }
.ng-gate.exists { border: 1px solid color-mix(in srgb, var(--ng-danger) 45%, transparent); background: var(--ng-danger-soft); }
.ng-gate.exists b { color: var(--ng-danger); }

/* board: one column per stage, cards with SLA stripe */
.ng-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; width: 100%; padding-bottom: 4px; }
.ng-col { background: var(--ng-surface-2); border-radius: var(--ng-r-lg); padding: 8px; display: grid; gap: 8px; align-content: start; }
.ng-col-h { display: flex; align-items: center; gap: 6px; font-size: var(--ng-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--ng-fg-2); padding: 2px 4px; }
.ng-col-h .c { margin-left: auto; background: var(--ng-surface); border-radius: var(--ng-r-full); padding: 0 7px; font-variant-numeric: tabular-nums; color: var(--ng-fg-3); }
.ng-item { background: var(--ng-surface); border: 1px solid var(--ng-border); border-left: 3px solid var(--ng-fg-3); border-radius: var(--ng-r-md); padding: 8px 10px; display: grid; gap: 3px; font-size: var(--ng-fs-sm); box-shadow: var(--ng-shadow-sm); cursor: pointer; transition: transform var(--ng-t-press) var(--ng-ease-out), box-shadow var(--ng-t-fast) ease; }
.ng-item:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ng-item:hover { box-shadow: var(--ng-shadow-md); } }
.ng-item.sla-ok { border-left-color: var(--ng-ok); } .ng-item.sla-warn { border-left-color: var(--ng-warn); } .ng-item.sla-late { border-left-color: var(--ng-danger); }
.ng-item .top { display: flex; align-items: center; gap: 6px; }
.ng-item .folio { font-family: var(--ng-font-mono); font-size: var(--ng-fs-xs); color: var(--ng-fg-2); flex: 1; }
.ng-item .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-item .foot { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); font-variant-numeric: tabular-nums; }
.ng-item.mine .name { color: var(--ng-accent); }
.ng-item.code { background: var(--ng-kind-2-soft); }
.ng-kind { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--ng-brand); color: var(--ng-surface); white-space: nowrap; }
.ng-kind.code { background: var(--ng-kind-2); }

/* callouts */
.ng-callout { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border-radius: var(--ng-r-md); font-size: var(--ng-fs-sm); background: var(--ng-accent-soft); color: var(--ng-fg); border: 1px solid color-mix(in srgb, var(--ng-accent) 22%, transparent); }
.ng-callout svg { width: 16px; height: 16px; margin-top: 1px; color: var(--ng-accent); }
.ng-callout.ok { background: var(--ng-ok-soft); border-color: color-mix(in srgb, var(--ng-ok) 25%, transparent); } .ng-callout.ok svg { color: var(--ng-ok); }
.ng-callout.warn { background: var(--ng-warn-soft); border-color: color-mix(in srgb, var(--ng-warn) 28%, transparent); } .ng-callout.warn svg { color: var(--ng-warn); }
.ng-callout.bad { background: var(--ng-danger-soft); border-color: color-mix(in srgb, var(--ng-danger) 25%, transparent); } .ng-callout.bad svg { color: var(--ng-danger); }