/* =========================================================================
   netex · engines/integration-map.css · the integration map (AI service · Custom software hero + s7 mini map)
   Enqueued in <head> by templates/service.php (no flash); injected by the engine otherwise.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.svc-im__grid { display: grid; gap: var(--s-5); }
.svc-im__palette { display: grid; gap: var(--s-4); align-content: start; }
.svc-im__cat legend { margin-bottom: var(--s-2); }
.svc-im__chip { cursor: grab; touch-action: none; }
.svc-im__chip.is-paper { border-style: dashed; }
.svc-im__chip.is-drag { opacity: .45; }
.svc-im__ghost { position: fixed; z-index: var(--z-dialog); pointer-events: none; padding: .3em .9em; border: var(--bw) solid var(--paper); border-radius: var(--r-pill); background: var(--ink-2); color: var(--paper); font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; transform: translate(-50%, -50%); }
.svc-im__board { min-width: 0; }
.svc-im__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-3); }
.svc-im__count { display: flex; align-items: center; gap: var(--s-4); }
.svc-im__count .nx-readout { container-type: normal; flex: none; }
.svc-im__readout .nx-readout__value { font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); }
.svc-im__result { max-width: 26ch; font: var(--w-ui) 1.0625rem/1.3 var(--f-sans); }
.svc-im__legend { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font: 500 .6875rem/1.4 var(--f-mono); color: var(--fg-2); }
.svc-im__legend li::before { content: ""; display: inline-block; width: 22px; height: 3px; margin-right: var(--s-2); vertical-align: middle; background: var(--cyan); }
.svc-im__legend li.is-molten::before { background: var(--molten); }
.svc-im__canvas { position: relative; border: var(--bw) solid var(--rule); background-color: var(--ink); background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 24px 24px; overflow: hidden; }
.svc-im__canvas.is-over { box-shadow: inset 0 0 0 2px var(--cyan); }
.im-svg { display: block; width: 100%; height: auto; }
.im-tall { display: none; }
@container (max-width: 640px) { .svc-im .im-wide { display: none; } .svc-im .im-tall { display: block; } }
.im-line { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.im-line.is-molten { stroke: var(--molten); }
.im-line.is-cyan { stroke: var(--cyan); }
.im-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: pointer; pointer-events: stroke; }
.im-line.is-new { animation: svc-draw 420ms steps(6, jump-end) both; }
@keyframes svc-draw { from { stroke-dasharray: 1 1000; } to { stroke-dasharray: 1000 0; } }
.im-node__box { fill: var(--ink-2); stroke: var(--paper-72); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.im-node--erp .im-node__box { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.im-node--paper .im-node__box { fill: var(--paper); stroke: var(--paper); }
.im-node--paper .im-node__t { fill: var(--ink); }
.im-node__t { fill: var(--paper); font: 600 17px var(--f-sans); }
.im-node--erp .im-node__t { font-weight: 760; font-size: 19px; }
.im-node.is-new { animation: nx-stamp var(--dur-stamp) var(--ease-stamp) both; transform-box: fill-box; transform-origin: center; }
.svc-im__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-6); font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paper-72); text-align: center; }
.svc-im__sub { margin-top: var(--s-3); font-size: var(--t-small); color: var(--fg-2); max-width: 60ch; }
.svc-im__list { display: grid; gap: 0; margin: var(--s-4) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
/* Each row carries the legend's swatch (cyan flows, orange retyped), not a coloured side bar. */
.svc-im__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-4); padding: var(--s-2) 0 var(--s-2) calc(22px + var(--s-3)); border-top: var(--bw) solid var(--rule); font-size: .8125rem; line-height: 1.45; }
.svc-im__item::before { content: ""; position: absolute; left: 0; top: calc(var(--s-2) + .62em); width: 22px; height: 3px; background: var(--cyan); }
.svc-im__item.is-molten::before { background: var(--molten); }
.svc-im__item small { grid-column: 1; color: var(--fg-2); font-size: .75rem; }
.svc-im__item .nx-btn { grid-column: 2; grid-row: 1 / span 2; }
.svc-im__actions { margin-top: var(--s-5); }
@container (max-width: 560px) {
	/* Phones: the toggle drops under its line instead of squeezing the text into a column. */
	.svc-im__item { grid-template-columns: minmax(0, 1fr); }
	.svc-im__item .nx-btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
.svc-im__tip { position: fixed; z-index: var(--z-chip); max-width: min(32ch, 80vw); padding: var(--s-2) var(--s-3); background: var(--ink-2); color: var(--paper); border: var(--bw) solid var(--rule-dark); font: 400 .8125rem/1.4 var(--f-sans); pointer-events: none; }
@container (min-width: 980px) {
	.svc-im__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-6); }
	/* No engine (no script, or it failed): the palette steps aside, so the example map and its list take the
	   row instead of squeezing into the palette's narrow column. */
	html:not(.js) .svc-im__grid, [data-engine-state="error"] .svc-im__grid { grid-template-columns: minmax(0, 1fr); }
	html:not(.js) .svc-im__board, [data-engine-state="error"] .svc-im__board { max-width: 62rem; }
}

} /* end @layer pages */