/* Admin → Processes. Scoped to .pm; uses the cockpit tokens with fallbacks so the exported page works alone. */
.pm {
  --pm-bg: var(--bg, #f5f7fa);
  --pm-surface: var(--bg-3, #ffffff);
  --pm-surface-2: var(--bg-2, #edf0f4);
  --pm-ink: var(--text, #0d1117);
  --pm-ink-2: var(--text-2, #2d3748);
  --pm-muted: var(--muted-2, #718096);
  --pm-line: var(--border, #cbd5e0);
  --pm-line-2: color-mix(in srgb, var(--pm-line) 55%, transparent);
  --pm-flow: #2b4a6f;
  --pm-accent: var(--accent, #0f766e);
  --pm-red: #c73a37; --pm-red-bg: #fdecec;
  --pm-amber: #b07800; --pm-amber-bg: #fff5dc;
  --pm-green: #1f7a52; --pm-green-bg: #e3f4ea;
  --pm-l-client: #7c5cff; --pm-l-sales: #0e7c86; --pm-l-lead: #b4466b; --pm-l-staff: #1f6feb;
  --pm-l-pm: #0f8a5f; --pm-l-partner: #c26a00; --pm-l-dev: #6b7686; --pm-l-ops: #8a4fd1;
  color: var(--pm-ink);
  font-size: 14px;
  line-height: 1.5;
}
[data-theme="dark"] .pm, .pm.pm-dark {
  --pm-flow: #8fb3dc;
  --pm-red: #ff6b66; --pm-red-bg: #3a1b1d;
  --pm-amber: #f0b429; --pm-amber-bg: #352a10;
  --pm-green: #4cc38a; --pm-green-bg: #12301f;
}
.pm-status { min-height: 20px; margin: 4px 0 6px; font-size: 13px; color: var(--muted-2, #718096); }
.pm-status.error { color: var(--danger, #c73a37); }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pm-actions select { min-width: 220px; }
.pm h3.pm-h { font-size: 18px; margin: 30px 0 4px; letter-spacing: -.01em; }
.pm .pm-sub { color: var(--pm-muted); margin: 0 0 14px; max-width: 860px; font-size: 13px; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--pm-muted); margin: 4px 0 12px; }
.pm-meta b { color: var(--pm-ink-2); font-weight: 600; }
.pm-card { background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: 12px; }
.pm-pad { padding: 16px 18px; }
.pm-grid { display: grid; gap: 12px; }
.pm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .pm-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pm-g4, .pm-g2 { grid-template-columns: 1fr; } }
.pm-tile { padding: 14px 16px; position: relative; overflow: hidden; }
.pm-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pm-line); }
.pm-tile.red::before { background: var(--pm-red); } .pm-tile.amber::before { background: var(--pm-amber); } .pm-tile.green::before { background: var(--pm-green); }
.pm-tile .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pm-tile.red .v { color: var(--pm-red); } .pm-tile.green .v { color: var(--pm-green); }
.pm-tile .l { font-size: 13px; color: var(--pm-ink-2); margin-top: 2px; }
.pm-tile .s { font-size: 12px; color: var(--pm-muted); margin-top: 6px; }
.pm-delta { font-size: 11.5px; font-weight: 600; margin-left: 8px; letter-spacing: 0; }
.pm-delta.better { color: var(--pm-green); } .pm-delta.worse { color: var(--pm-red); } .pm-delta.same { color: var(--pm-muted); }

.pm-chain-label { font: 600 11px var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--pm-muted); margin: 14px 0 6px; }
.pm-chain { display: flex; overflow-x: auto; padding-bottom: 6px; }
.pm-chev { flex: 1 0 124px; min-width: 124px; padding: 12px 16px 12px 24px; color: var(--pm-ink); text-decoration: none; cursor: pointer; border: 0; text-align: left; font: inherit;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); margin-right: -7px; background: var(--pm-surface-2); }
.pm-chev:first-child { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); padding-left: 14px; }
.pm-chev:last-child { margin-right: 0; }
.pm-chev.red { background: var(--pm-red-bg); } .pm-chev.amber { background: var(--pm-amber-bg); } .pm-chev.green { background: var(--pm-green-bg); }
.pm-chev .id { font: 500 11px var(--font-mono, ui-monospace, monospace); color: var(--pm-muted); }
.pm-chev .n { font-weight: 700; font-size: 13px; line-height: 1.25; margin: 2px 0 4px; min-height: 32px; }
.pm-chev .m { font-size: 11.5px; color: var(--pm-ink-2); line-height: 1.3; }
.pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--pm-muted); }
.pm-chev.red .pm-dot { background: var(--pm-red); } .pm-chev.amber .pm-dot { background: var(--pm-amber); } .pm-chev.green .pm-dot { background: var(--pm-green); }

.pm-bars { display: grid; gap: 8px; }
.pm-bar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 86px; gap: 10px; align-items: center; font-size: 12.5px; }
.pm-bar .lab { color: var(--pm-ink-2); line-height: 1.25; }
.pm-track { height: 16px; background: var(--pm-surface-2); border-radius: 4px; position: relative; overflow: hidden; }
.pm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pm-flow); border-radius: 4px; }
.pm-fill.hot { background: var(--pm-red); } .pm-fill.p75 { background: color-mix(in srgb, var(--pm-red) 28%, transparent); }
.pm-bar .val { font: 500 12px var(--font-mono, ui-monospace, monospace); text-align: right; }
.pm-legend-inline { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--pm-muted); margin-top: 10px; }
.pm-sw { display: inline-block; width: 11px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.pm-cols { display: flex; align-items: flex-end; gap: 5px; height: 110px; padding-top: 8px; }
.pm-cols .c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; color: var(--pm-muted); }
.pm-cols .c i { display: block; width: 100%; background: var(--pm-flow); border-radius: 3px 3px 0 0; min-height: 2px; }
.pm-cols .c em { font-style: normal; color: var(--pm-ink); font-weight: 600; margin-bottom: 2px; }
.pm-cols .c span { margin-top: 3px; font-family: var(--font-mono, ui-monospace, monospace); }
.pm-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; margin-top: 8px; }
.pm-timeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 31px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--pm-green), var(--pm-amber) 35%, var(--pm-red)); }
.pm-timeline .pt { text-align: center; font-size: 12px; position: relative; }
.pm-timeline .d { font-weight: 700; font-size: 15px; }
.pm-timeline .k { width: 14px; height: 14px; border-radius: 50%; background: var(--pm-surface); border: 3px solid var(--pm-ink); margin: 6px auto 8px; position: relative; }
.pm-timeline .t { color: var(--pm-muted); line-height: 1.25; }

.pm-proc { margin-top: 18px; }
.pm-proc-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding: 16px 18px 12px; border-bottom: 1px solid var(--pm-line); }
.pm-proc-head h4 { font-size: 17px; margin: 0; }
.pm-proc-head h4 .pid { font: 600 12px var(--font-mono, ui-monospace, monospace); color: var(--pm-muted); margin-right: 8px; }
.pm-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--pm-muted); margin-top: 6px; }
.pm-facts b { color: var(--pm-ink-2); font-weight: 600; }
.pm-health { font: 600 10.5px var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.pm-health.red { background: var(--pm-red-bg); color: var(--pm-red); } .pm-health.amber { background: var(--pm-amber-bg); color: var(--pm-amber); } .pm-health.green { background: var(--pm-green-bg); color: var(--pm-green); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.pm-chip { font-size: 12px; padding: 4px 9px; border-radius: 7px; background: var(--pm-surface-2); color: var(--pm-ink-2); }
.pm-chip b { color: var(--pm-ink); font-weight: 700; margin-right: 4px; }
.pm-chip.red b { color: var(--pm-red); } .pm-chip.green b { color: var(--pm-green); } .pm-chip.amber b { color: var(--pm-amber); }
.pm-diagram { overflow-x: auto; padding: 12px 18px 4px; }
.pm .pm-diagram svg { display: block; max-width: none; }
.pm-inspector { margin: 4px 18px 0; padding: 8px 12px; border-radius: 8px; background: var(--pm-surface-2); font-size: 12.5px; color: var(--pm-ink-2); min-height: 36px; }
.pm-findings { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--pm-line); margin-top: 12px; }
.pm-findings > div { padding: 12px 18px 16px; }
.pm-findings > div + div { border-left: 1px solid var(--pm-line); }
@media (max-width: 760px) { .pm-findings { grid-template-columns: 1fr; } .pm-findings > div + div { border-left: 0; border-top: 1px solid var(--pm-line); } }
.pm-findings h5 { margin: 0 0 8px; font: 600 11px var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .1em; }
.pm-findings .slow h5 { color: var(--pm-red); } .pm-findings .imp h5 { color: var(--pm-green); }
.pm-findings ul { margin: 0; padding-left: 18px; font-size: 13px; }
.pm-findings li { margin: 0 0 5px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pm-table th, .pm-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--pm-line-2); vertical-align: top; }
.pm-table th { font: 600 10.5px var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; color: var(--pm-muted); background: var(--pm-surface-2); }
.pm-table td.num { text-align: right; font-family: var(--font-mono, ui-monospace, monospace); }
.pm-sev { font: 700 10px var(--font-mono, ui-monospace, monospace); padding: 2px 7px; border-radius: 999px; }
.pm-sev.high { background: var(--pm-red-bg); color: var(--pm-red); } .pm-sev.medium { background: var(--pm-amber-bg); color: var(--pm-amber); }
.pm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12px; color: var(--pm-ink-2); }
.pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pm-empty { padding: 40px 18px; text-align: center; color: var(--pm-muted); }

/* swimlane svg */
.pm .sv-lane-a { fill: var(--pm-surface); } .pm .sv-lane-b { fill: color-mix(in srgb, var(--pm-surface-2) 45%, var(--pm-surface)); }
.pm .sv-lane-line { stroke: var(--pm-line); stroke-width: 1; }
.pm .sv-lane-name { font: 600 11px Inter, system-ui, sans-serif; fill: var(--pm-ink-2); }
.pm .sv-lane-band { fill: var(--pm-surface-2); }
.pm .sv-col { stroke: var(--pm-line-2); stroke-dasharray: 2 4; }
.pm .sv-edge { fill: none; stroke: var(--pm-flow); stroke-width: 1.5; stroke-linejoin: round; }
.pm .sv-arrow { fill: var(--pm-flow); }
.pm .sv-edge-lab { font: 600 10px Inter, system-ui, sans-serif; fill: var(--pm-flow); paint-order: stroke; stroke: var(--pm-surface); stroke-width: 4px; stroke-linejoin: round; }
.pm .sv-node { cursor: pointer; }
.pm .sv-task { fill: var(--pm-surface); stroke: var(--pm-ink-2); stroke-width: 1.2; }
.pm .sv-node:hover .sv-task, .pm .sv-node:hover .sv-gw, .pm .sv-node.sel .sv-task, .pm .sv-node.sel .sv-gw { stroke: var(--pm-accent); stroke-width: 2; }
.pm .sv-task.slow { stroke: var(--pm-red); stroke-width: 1.8; fill: color-mix(in srgb, var(--pm-red-bg) 55%, var(--pm-surface)); }
.pm .sv-task.gap { stroke: var(--pm-amber); stroke-width: 1.8; fill: color-mix(in srgb, var(--pm-amber-bg) 55%, var(--pm-surface)); }
.pm .sv-task.ok { stroke: var(--pm-green); stroke-width: 1.8; }
.pm .sv-gw { fill: var(--pm-surface); stroke: var(--pm-ink-2); stroke-width: 1.2; }
.pm .sv-gw.slow { stroke: var(--pm-red); stroke-width: 1.8; } .pm .sv-gw.gap { stroke: var(--pm-amber); stroke-width: 1.8; }
.pm .sv-gw-x { stroke: var(--pm-ink-2); stroke-width: 1.6; }
.pm .sv-ev-s { fill: var(--pm-surface); stroke: var(--pm-green); stroke-width: 1.8; }
.pm .sv-ev-e { fill: var(--pm-surface); stroke: var(--pm-ink); stroke-width: 3.2; }
.pm .sv-t { font: 500 11px Inter, system-ui, sans-serif; fill: var(--pm-ink); }
.pm .sv-tool { font: 400 9.3px ui-monospace, SFMono-Regular, Menlo, monospace; fill: var(--pm-muted); }
.pm .sv-cap { font: 600 10.5px Inter, system-ui, sans-serif; fill: var(--pm-ink-2); }
.pm .sv-m { font: 600 10px Inter, system-ui, sans-serif; }
.pm .sv-m.slow { fill: var(--pm-red); } .pm .sv-m.gap { fill: var(--pm-amber); } .pm .sv-m.ok { fill: var(--pm-green); } .pm .sv-m.none { fill: var(--pm-muted); }
.pm .sv-pill.slow { fill: var(--pm-red-bg); } .pm .sv-pill.gap { fill: var(--pm-amber-bg); } .pm .sv-pill.ok { fill: var(--pm-green-bg); } .pm .sv-pill.none { fill: var(--pm-surface-2); }
.pm .sv-badge.slow { fill: var(--pm-red); } .pm .sv-badge.gap { fill: var(--pm-amber); } .pm .sv-badge.ok { fill: var(--pm-green); }
.pm .sv-badge-t { font: 800 10px Inter, system-ui, sans-serif; fill: #fff; }
@media print { .pm-actions { display: none; } .pm-card { break-inside: avoid; } }