/* ═══ B65 W15 — Backend + Middleware trees (services-tree.js) ═══════════
   Rows are the shared nested tree (.nt-*); this file only adds the type chips,
   the Deploy button, the Middleware bar and the panel pieces. Every rule targets
   a class — never a bare element type — so no .mi icon ever loses its font. */
.svt{ padding:2px 0 28px; }
.svt-root{ gap:6px; }
.svt-box{ min-width:0; }
.svt-box .nt-label{ flex:0 1 auto;min-width:0; }
.svt-sel{ border-color:var(--accent);background:var(--accent-soft); }
.svt-sp{ flex:1 1 auto;min-width:4px; }
.svt-meta{ display:flex;gap:6px;min-width:0;overflow:hidden;flex:0 1 auto; }
.svt-chip{ display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.svt-chip .mi{ font-size:14px;color:var(--fg-3); }
.svt-chip.svt-soft{ background:transparent;color:var(--fg-3); }
.svt-chip.svt-bad{ color:var(--mk-danger,#D64545);border-color:color-mix(in srgb,var(--mk-danger,#D64545) 35%,transparent); }
.svt-acts{ display:flex;align-items:center;gap:6px;flex:0 0 auto; }
.svt-add{ opacity:1; }

/* type chips — one tone per level, quiet, after the name (W14 grammar) */
.svt-ty{ border:1px solid transparent; }
.svt-ty-client{ color:#22526A;background:color-mix(in srgb,#22526A 10%,transparent);border-color:color-mix(in srgb,#22526A 28%,transparent); }
.svt-ty-service{ color:#0E7C86;background:color-mix(in srgb,#0E7C86 10%,transparent);border-color:color-mix(in srgb,#0E7C86 28%,transparent); }
.svt-ty-entity{ color:#6D5BD0;background:color-mix(in srgb,#6D5BD0 10%,transparent);border-color:color-mix(in srgb,#6D5BD0 28%,transparent); }
.svt-ty-action{ color:#B45309;background:color-mix(in srgb,#B45309 10%,transparent);border-color:color-mix(in srgb,#B45309 28%,transparent); }
.svt-ty-automation{ color:#7C3AED;background:color-mix(in srgb,#7C3AED 10%,transparent);border-color:color-mix(in srgb,#7C3AED 28%,transparent); }
.svt-ty-form{ color:#0E7C86;background:color-mix(in srgb,#0E7C86 10%,transparent);border-color:color-mix(in srgb,#0E7C86 28%,transparent); }
.svt-ty-field{ color:var(--fg-2);background:var(--bg-input);border-color:var(--border); }
.svt-ty-variant{ color:#6D5BD0;background:color-mix(in srgb,#6D5BD0 10%,transparent);border-color:color-mix(in srgb,#6D5BD0 28%,transparent); }
html[data-theme="dark"] .svt-ty-client{ color:#8EC5DD; }
html[data-theme="dark"] .svt-ty-service,html[data-theme="dark"] .svt-ty-form{ color:#4FD8CE; }
html[data-theme="dark"] .svt-ty-entity,html[data-theme="dark"] .svt-ty-variant{ color:#B3A7F5; }
html[data-theme="dark"] .svt-ty-action{ color:#F4B26B; }
html[data-theme="dark"] .svt-ty-automation{ color:#C4A5FA; }
.nt-kind-client > .nt-box .nt-ic{ color:#fff;background:#22526A; }
.nt-kind-entity > .nt-box .nt-ic{ background:color-mix(in srgb,#6D5BD0 14%,transparent);color:#6D5BD0; }
.nt-kind-action > .nt-box .nt-ic{ background:color-mix(in srgb,#B45309 14%,transparent);color:#B45309; }
.nt-kind-automation > .nt-box .nt-ic{ background:color-mix(in srgb,#7C3AED 14%,transparent);color:#7C3AED; }
.nt-kind-field > .nt-box .nt-ic{ background:var(--bg-input);color:var(--fg-2); }
.nt-kind-client > .nt-box .nt-label{ font-size:14px;font-weight:700; }


/* Middleware bar: Forms · Fields — docked at the end of the header on desktop (066-028); its search is the navbar's (027) */
.svt-bar{ display:flex;align-items:center;gap:10px;min-width:0;margin:0 0 12px; }
.svt-empty{ display:flex;align-items:center;gap:8px;padding:18px;color:var(--fg-3);font:500 13px var(--mk-font-ui); }
.svt-empty .mi{ font-size:20px; }

/* panels */
.svt-note{ font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3); }
.svt-lbl{ display:flex;flex-direction:column;gap:6px; }
.svt-lbl-r{ display:flex;align-items:center;gap:8px; }
.svt-lbl-r .ent-input{ flex:1;min-width:0; }
.svt-lng{ flex:0 0 30px;height:22px;border-radius:6px;background:var(--bg-3,var(--bg-input));font:700 10.5px/22px var(--mk-font-ui);color:var(--fg-2);text-align:center; }
.svt-list{ display:flex;flex-direction:column;gap:6px; }
.svt-li{ display:flex;align-items:center;gap:9px;min-height:42px;padding:6px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-1);
  font:600 13px var(--mk-font-ui);color:var(--fg-1);text-align:start;cursor:pointer;width:100%; }
.svt-li:hover{ border-color:var(--accent); }
.svt-li > .mi{ font-size:18px;color:var(--fg-3); }
.svt-li-n{ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.svt-li-n small{ display:block;font:500 12px/1.35 var(--mk-font-ui);color:var(--fg-3);white-space:normal;margin-top:2px; }
.svt-li-s{ margin-inline-start:auto;font:500 12px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
.svt-li-go{ font-size:18px;color:var(--fg-3); }
html[dir="rtl"] .svt-li-go{ transform:scaleX(-1); }
.svt-li-big{ min-height:64px;padding:10px 12px; }
.svt-li-big .svt-li-n{ white-space:normal;flex:1; }
.svt-li-ed{ cursor:default; }
.svt-li-link{ border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:start; }
.svt-li-link:hover{ color:var(--accent-text,var(--accent));text-decoration:underline; }
.svt-step-acts{ display:inline-flex;gap:2px;flex:0 0 auto; }
.svt-step-acts .nt-act[disabled]{ opacity:.3;pointer-events:none; }
.svt-tags{ display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--bg-input);min-height:42px; }
/* B67 R67-071 — a flex item of the panel's column (its wrapper is display:contents), it shrank to 42px: a second row of domains
   spilled over "18 services" and the add-a-domain box. It keeps its height (R67-008's lesson). */
.svt-tags{ flex-shrink:0; }
.svt-tag{ display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 4px 0 9px;border-radius:999px;background:var(--bg-1);border:1px solid var(--border);font:600 12px var(--mk-font-ui);color:var(--fg-1); }
.svt-tag button{ border:0;background:none;cursor:pointer;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--fg-3); }
.svt-tag button:hover{ background:var(--bg-input);color:var(--fg-1); }
.svt-tag .mi{ font-size:14px; }
.svt-tag-in{ flex:1;min-width:120px;border:0;background:transparent;outline:0;font:500 13px var(--mk-font-ui);color:var(--fg-1);height:26px; }
.svt-mini{ align-self:flex-start;margin-top:6px; }
.svt-deploy-btn{ margin-top:14px; }
.svt-kind{ align-self:flex-start; }
.svt-when{ display:grid;grid-template-columns:1fr 150px;gap:8px; }
.svt-conds{ display:flex;flex-direction:column;gap:6px; }
.svt-cond{ display:flex;align-items:center;gap:8px; }
.svt-cond > .mi{ font-size:18px;color:var(--mk-warning,#C98A12); }
.svt-cond .ent-input{ flex:1;min-width:0; }
.svt-steps{ list-style:none;margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;position:relative; }
html[dir="rtl"] .svt-steps{ padding:0 20px 0 0; }
.svt-steps::before{ content:'';position:absolute;inset-inline-start:8px;top:14px;bottom:14px;width:2px;background:var(--border); }
.svt-step{ position:relative;display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--bg-1); }
.svt-step-n{ position:absolute;inset-inline-start:-21px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font:800 10px/18px var(--mk-font-ui);text-align:center; }
.svt-step-cond{ border-color:color-mix(in srgb,var(--mk-warning,#C98A12) 55%,var(--border)); }
.svt-step-cond .svt-step-n{ background:var(--mk-warning,#C98A12); }
.svt-step-br{ border-color:color-mix(in srgb,#7C3AED 45%,var(--border)); }
.svt-step-br .svt-step-n{ background:#7C3AED; }
.svt-step-note .svt-step-n{ background:#0E7C86; }
.svt-step-b{ flex:1;min-width:0;display:grid;grid-template-columns:140px 1fr;gap:6px; }
.svt-vf{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:44px;padding:6px 8px;border:1px solid var(--border);border-radius:10px;background:var(--bg-1);font:600 13px var(--mk-font-ui); }
.svt-vf.off{ opacity:.55;border-style:dashed; }
.svt-chk{ width:22px;height:22px;border-radius:6px;border:2px solid var(--border-strong,var(--fg-3));background:transparent;display:grid;place-items:center;cursor:pointer;color:transparent;flex:0 0 auto; }
.svt-chk.on{ background:var(--accent);border-color:var(--accent);color:#fff; }
.svt-chk .mi{ font-size:16px; }
.svt-modes button{ height:26px;padding:0 9px;font-size:12px; }
.svt-fix{ flex:1 0 100%; }
.svt-env{ align-self:flex-start; }
.svt-ready{ display:flex;align-items:center;gap:8px;margin:14px 0 8px;font:700 13px var(--mk-font-ui); }
.svt-ready .mi{ font-size:20px; }
.svt-ready.ok{ color:var(--mk-success,#1F9D55); }
.svt-ready.bad{ color:var(--mk-danger,#D64545); }
.svt-checks{ display:flex;flex-direction:column;gap:6px; }
.svt-check{ display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-1);font:600 13px/1.35 var(--mk-font-ui);color:var(--fg-1); }
.svt-check > .mi{ font-size:19px; }
.svt-check.ok > .mi{ color:var(--mk-success,#1F9D55); }
.svt-check.bad{ border-color:color-mix(in srgb,var(--mk-danger,#D64545) 40%,var(--border)); }
.svt-check.bad > .mi{ color:var(--mk-danger,#D64545); }
.svt-check-t{ flex:1;min-width:0; }
.svt-check-t small{ display:block;font:500 12px/1.4 var(--mk-font-ui);color:var(--fg-3);margin-top:3px; }
.svt-check b{ font:700 12.5px var(--mk-font-ui);color:var(--fg-2);white-space:nowrap; }
.svt-foot{ margin-top:0;width:100%; }
.svt-foot .svt-del{ color:var(--mk-danger,#D64545); }
.svt-foot .wl-close-btn[disabled]{ opacity:.45;cursor:not-allowed; }

/* phones + tablets: meta chips give way, the name and actions stay */
@media (max-width:1024px){
  .svt-bar{ flex-wrap:wrap; }
}
@media (max-width:720px){
  .svt{ padding-bottom:96px; }
  .svt-meta{ display:none; }
  .svt-when,.svt-step-b{ grid-template-columns:1fr; }
  .nt-children{ padding-inline-start:12px; }
}
/* B66 W1 (066-030) — ranked rows carry a drag grip (no up/down buttons, ever) */
.svt-grip{ display:grid;place-items:center;width:22px;height:30px;flex:0 0 auto;border-radius:6px;color:var(--fg-3);cursor:grab;touch-action:none; }
.svt-grip:hover{ color:var(--fg-1);background:var(--bg-2); }
.svt-grip:focus-visible{ outline:2px solid var(--accent);outline-offset:1px; }
.svt-grip .mi{ font-size:18px; }
.svt-step.dragging,.svt-li-ed.dragging{ opacity:.45; }
.svt-step.drop-before,.svt-li-ed.drop-before{ box-shadow:inset 0 2px 0 var(--accent); }
.svt-step.drop-after,.svt-li-ed.drop-after{ box-shadow:inset 0 -2px 0 var(--accent); }

/* ═══ B66 W3 (066-027…035) — Listener level, Default + exceptions, Merge, per-app Deploy, staging gate ═══ */
.svt-ty-listener{ color:#7C3AED;background:color-mix(in srgb,#7C3AED 10%,transparent);border-color:color-mix(in srgb,#7C3AED 28%,transparent); }
.svt-ty-automation{ color:#BE185D;background:color-mix(in srgb,#DB2777 10%,transparent);border-color:color-mix(in srgb,#DB2777 28%,transparent); }
.svt-ty-def{ color:var(--accent-text,var(--accent));background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.svt-ty-exception{ color:#6D28D9;background:color-mix(in srgb,#7C3AED 12%,transparent);border-color:color-mix(in srgb,#7C3AED 30%,transparent); }
html[data-theme="dark"] .svt-ty-listener,html[data-theme="dark"] .svt-ty-exception{ color:#C4A5FA; }
html[data-theme="dark"] .svt-ty-automation{ color:#F9A8D4; }
.nt-kind-listener > .nt-box .nt-ic{ background:color-mix(in srgb,#7C3AED 14%,transparent);color:#7C3AED; }
.nt-kind-automation > .nt-box .nt-ic{ background:color-mix(in srgb,#DB2777 14%,transparent);color:#DB2777; }
.nt-kind-def > .nt-box .nt-ic{ background:var(--accent-soft);color:var(--accent-text,var(--accent)); }
.nt-kind-variant > .nt-box .nt-ic,.nt-kind-exception > .nt-box .nt-ic{ background:color-mix(in srgb,#7C3AED 12%,transparent);color:#7C3AED; }
.nt-kind-form > .nt-box .nt-ic{ background:color-mix(in srgb,#0E7C86 12%,transparent);color:#0E7C86; }
html[data-theme="dark"] .nt-kind-listener > .nt-box .nt-ic,html[data-theme="dark"] .nt-kind-variant > .nt-box .nt-ic,html[data-theme="dark"] .nt-kind-exception > .nt-box .nt-ic{ color:#C4A5FA; }
html[data-theme="dark"] .nt-kind-automation > .nt-box .nt-ic{ color:#F9A8D4; }
html[data-theme="dark"] .nt-kind-form > .nt-box .nt-ic{ color:#4FD8CE; }
.svt-hit{ background:color-mix(in srgb,var(--mk-warning,#C98A12) 32%,transparent);color:inherit;border-radius:3px;padding:0 1px; }
.svt-n{ font-weight:700;opacity:.55;margin-inline-start:3px; }
.svt-chip.svt-x{ color:#6D28D9;background:color-mix(in srgb,#7C3AED 9%,transparent);border-color:color-mix(in srgb,#7C3AED 26%,transparent); }
.svt-chip.svt-x .mi{ color:inherit; }
html[data-theme="dark"] .svt-chip.svt-x{ color:#C4A5FA; }
.svt-chip.svt-runs{ max-width:340px;overflow:hidden;text-overflow:ellipsis; }

/* Merge — on services, staging only (033) */
.svt-merge{ height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);
  font:600 12px/1 var(--mk-font-ui);display:inline-flex;align-items:center;gap:5px;cursor:pointer;flex:0 0 auto; }
.svt-merge .mi{ font-size:16px;color:var(--accent-text,var(--accent)); }
.svt-merge:hover:not([disabled]){ border-color:var(--accent); }
.svt-merge[disabled]{ opacity:.45;cursor:default; }
.svt-merge-n{ min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--mk-warning,#C98A12);color:#fff;font:800 10.5px/18px var(--mk-font-ui);text-align:center; }
@media (max-width:640px){ .svt-merge-l{ display:none; } }
.svt-chg .mi.svt-chg-add{ color:var(--mk-success,#1F9D55); }
.svt-chg .mi.svt-chg-edit{ color:var(--mk-warning,#C98A12); }
.svt-chg .mi.svt-chg-del{ color:var(--mk-danger,#D64545); }

/* Listener — trigger cards, the conditions tree, automations in order */
.svt-trigs{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.svt-trig{ display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-1);cursor:pointer;text-align:start;min-width:0;color:var(--fg-1); }
.svt-trig .mi{ font-size:20px;color:var(--fg-3); }
.svt-trig b{ font:700 13px var(--mk-font-ui); }
.svt-trig small{ font:500 11.5px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; }
.svt-trig:hover{ border-color:var(--accent); }
.svt-trig.on{ border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-1)); }
.svt-trig.on .mi{ color:var(--accent-text,var(--accent)); }
@media (max-width:520px){ .svt-trigs{ grid-template-columns:1fr; } .svt-trig{ flex-direction:row;align-items:center;gap:8px; } .svt-trig small{ margin-inline-start:auto; } }
.svt-row2{ display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0; }
.svt-row2 > .cs{ flex:1 1 130px;min-width:0; }
.svt-row2 > .ent-input{ flex:1 1 140px;min-width:0; }
.svt-num{ flex:0 0 88px !important;width:88px; }
.svt-dir{ flex:0 0 auto; }
.svt-cond-host{ min-width:0; }
.svt-ord{ flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#DB2777;color:#fff;font:800 10.5px/20px var(--mk-font-ui);text-align:center; }
.svt-auto .svt-li-n{ flex:0 1 auto; }

/* Automation — what it sends: target field ← source */
.svt-maps{ display:flex;flex-direction:column; }
.svt-map{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr);gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--border); }
.svt-map:first-child{ border-top:0; }
.svt-map-t{ display:flex;gap:7px;align-items:center;font:600 13px var(--mk-font-ui);color:var(--fg-1);min-width:0; }
.svt-map-t > span:last-child{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.svt-map-t .mi{ font-size:18px;color:var(--fg-3); }
.svt-map-ar{ color:var(--fg-3);font-size:18px; }
html[dir="rtl"] .svt-map-ar{ transform:scaleX(-1); }
.svt-map-s{ display:flex;flex-direction:column;gap:6px;min-width:0; }
@media (max-width:520px){ .svt-map{ grid-template-columns:1fr; gap:6px; } .svt-map-ar{ display:none; } }

/* Default — every field's base behaviour */
.svt-df{ flex-wrap:wrap;cursor:default; }
.svt-df .svt-modes{ margin-inline-start:auto; }
.svt-df .svt-fix{ flex:1 0 100%; }
.svt-df .svt-li-s{ margin-inline-start:0; }
.svt-vis button{ display:inline-flex;align-items:center;gap:4px; }
.svt-vis button .mi{ font-size:16px; }

/* Deploy (032) */
.svt-check-t{ flex:1;min-width:0; }
.svt-check small{ display:block;font:500 12px/1.35 var(--mk-font-ui);color:var(--fg-3);margin-top:2px; }
.svt-last{ margin-top:10px;font:500 12px var(--mk-font-ui);color:var(--fg-3); }

/* Staging only (034) — every Settings page reads outside staging */
.svt-edit{ display:contents; }
.svt-to-stg{ display:none !important; }
body:not([data-env="staging"]) .svt-to-stg{ display:inline-flex !important; }
body:not([data-env="staging"]) .svt-deploy-app{ display:none !important; }
body:not([data-env="staging"]) .svt-edit .svt-grip,
body:not([data-env="staging"]) .svt-edit .svt-step-acts{ display:none; }
/* the panels breathe: one rhythm between rows (the B65 bodies had none) */
[data-mp-id="svtPanel"] [data-mp-body]{ display:flex;flex-direction:column;gap:12px; }
[data-mp-id="svtPanel"] [data-mp-body] > .wl-sech{ margin:8px 0 -4px; }
[data-mp-id="svtPanel"] [data-mp-body] > .svt-mini{ margin-top:-4px; }
.svt-trig[disabled]{ opacity:.45;cursor:default; }
.svt-trig[disabled]:hover{ border-color:var(--border); }
.svt-trig-d .cs-btn.is-invalid{ border-color:var(--mk-danger,#D64545); }
/* phones: six levels deep must still show names — a tighter indent, and the level reads from the icon tile's colour */
@media (max-width:600px){
  .svt-root .nt-children{ padding-inline-start:10px; }
  .svt-root .nt-children::before{ inset-inline-start:4px; }
  .svt-root .nt-box{ gap:7px;padding:8px 9px; }
  .svt-root .svt-ty{ display:none; }
  .svt-root .nt-caret-sp{ width:12px; }
}