/* ═══ B66 W4 — THE SPINE (spine.js): tree + preview, one layout for Assets · Frontend · Styles ═══
   Every rule targets a class (never a bare element type) so no .mi icon ever loses its font. */
.sp-legacy[hidden]{ display:none !important; }
.sp{ display:grid; grid-template-columns:minmax(290px, 380px) minmax(0, 1fr); gap:16px; align-items:start; min-width:0; }
.sp-tree-col{ min-width:0; padding:2px 2px 28px; }
.sp-pv-col{ position:sticky; top:var(--sp-sticky, 84px); min-width:0; }
@media (max-width:1099px){
  .sp{ grid-template-columns:minmax(0, 1fr); }
  .sp-pv-col{ position:relative; top:auto; order:-1; }
}

/* ── the tree ─────────────────────────────────────────────────────────── */
.sp-root{ gap:6px; }
.sp-box{ min-width:0; }
.sp-box .nt-label{ flex:0 1 auto; min-width:0; }
.sp-box.is-sel{ border-color:var(--accent); background:var(--accent-soft); }
.sp-box.is-hov{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
@property --sp-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spHue{ to{ --sp-a:360deg; } }
.sp-box.sp-glow::after{ content:''; position:absolute; inset:-2px; border-radius:13px; padding:2px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--sp-a), #03C9CB, #7C3AED, #FF4D8D, #F59E0B, #22C55E, #03C9CB);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spHue 2.4s linear infinite; }
@media (prefers-reduced-motion:reduce){ .sp-box.sp-glow::after{ animation:none; } }
/* 066-008 · 012 — what the open system has not styled: a red outline on its box, a count on its ancestors */
.sp-box.is-unstyled{ border-color:var(--mk-danger, #D64545); box-shadow:inset 0 0 0 1px var(--mk-danger, #D64545); }
.sp-box.is-unstyled .nt-label{ color:var(--mk-danger, #D64545); }
.sp-need{ flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--mk-danger, #D64545); color:#fff; font:800 10.5px/20px var(--mk-font-ui); text-align:center; margin-inline-start:auto; }
.sp-count{ flex:0 0 auto; font:700 11px var(--mk-font-ui); color:var(--fg-3); }
.sp-hit{ background:color-mix(in srgb, var(--mk-warning, #C98A12) 32%, transparent); color:inherit; border-radius:3px; padding:0 1px; }
.sp-empty{ display:flex; justify-content:center; padding:24px; color:var(--fg-3); }
.sp-empty .mi{ font-size:28px; }
.sp-ic-dot{ display:grid; place-items:center; background:var(--bg-input); }
.sp-ic-dot i{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 2px var(--bg-1), 0 0 0 3px var(--border); }
.sp-ic-img{ display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--border); }
.sp-ic-img img{ width:18px; height:18px; object-fit:contain; display:block; }
.sp-grip{ display:grid; place-items:center; width:20px; height:28px; flex:0 0 auto; border-radius:6px; color:var(--fg-3); cursor:grab; touch-action:none; }
.sp-grip:hover{ color:var(--fg-1); background:var(--bg-2); }
.sp-grip .mi{ font-size:17px; }
.nt-node.dragging{ opacity:.45; }
.nt-node.drop-before > .sp-box{ box-shadow:0 -3px 0 var(--accent); }
.nt-node.drop-after > .sp-box{ box-shadow:0 3px 0 var(--accent); }
/* level chips + tiles */
.sp-ty{ border:1px solid transparent; }
.sp-ty-app{ background:#0D2530; color:#fff; }
html[data-theme="dark"] .sp-ty-app{ background:#E5F3F6; color:#0D2530; }
.sp-ty-domain{ background:var(--accent-soft); color:var(--accent-text, var(--accent)); }
.sp-ty-route{ color:#0E7C86; background:color-mix(in srgb, #0E7C86 10%, transparent); border-color:color-mix(in srgb, #0E7C86 28%, transparent); }
.sp-ty-as-shell{ color:#22526A; background:color-mix(in srgb, #22526A 10%, transparent); border-color:color-mix(in srgb, #22526A 28%, transparent); }
.sp-ty-as-template{ color:#2563EB; background:color-mix(in srgb, #2563EB 10%, transparent); border-color:color-mix(in srgb, #2563EB 28%, transparent); }
.sp-ty-as-relay{ color:#B45309; background:color-mix(in srgb, #B45309 10%, transparent); border-color:color-mix(in srgb, #B45309 28%, transparent); }
.sp-ty-as-component{ color:#6D5BD0; background:color-mix(in srgb, #6D5BD0 10%, transparent); border-color:color-mix(in srgb, #6D5BD0 28%, transparent); }
.sp-ty-as-element{ color:var(--fg-2); background:var(--bg-input); border-color:var(--border); }
.sp-ty-as-icon,.sp-ty-as-part{ color:#BE185D; background:color-mix(in srgb, #DB2777 9%, transparent); border-color:color-mix(in srgb, #DB2777 26%, transparent); }
html[data-theme="dark"] .sp-ty-route{ color:#4FD8CE; } html[data-theme="dark"] .sp-ty-as-shell{ color:#8EC5DD; } html[data-theme="dark"] .sp-ty-as-template{ color:#93B4F8; }
html[data-theme="dark"] .sp-ty-as-relay{ color:#F4B26B; } html[data-theme="dark"] .sp-ty-as-component{ color:#B3A7F5; } html[data-theme="dark"] .sp-ty-as-icon{ color:#F9A8D4; }
.nt-kind-app > .sp-box .nt-ic{ background:#0D2530; color:#fff; }
.nt-kind-route > .sp-box .nt-ic{ background:color-mix(in srgb, #0E7C86 12%, transparent); color:#0E7C86; }
.nt-kind-content > .sp-box .nt-ic{ background:var(--accent-soft); color:var(--accent-text, var(--accent)); }
.nt-kind-as-shell > .sp-box .nt-ic{ background:color-mix(in srgb, #22526A 14%, transparent); color:#22526A; }
.nt-kind-as-template > .sp-box .nt-ic{ background:color-mix(in srgb, #2563EB 12%, transparent); color:#2563EB; }
.nt-kind-as-relay > .sp-box .nt-ic{ background:color-mix(in srgb, #B45309 12%, transparent); color:#B45309; }
.nt-kind-as-component > .sp-box .nt-ic{ background:color-mix(in srgb, #6D5BD0 12%, transparent); color:#6D5BD0; }
.nt-kind-as-icon > .sp-box .nt-ic,.nt-kind-as-part > .sp-box .nt-ic{ background:color-mix(in srgb, #DB2777 10%, transparent); color:#DB2777; }
html[data-theme="dark"] .nt-kind-app > .sp-box .nt-ic{ background:#E5F3F6; color:#0D2530; }
.nt-kind-content > .sp-box .nt-label{ font-weight:700; }
@media (max-width:600px){
  .sp-root .nt-children{ padding-inline-start:10px; }
  .sp-root .nt-children::before{ inset-inline-start:4px; }
  .sp-root .sp-ty{ display:none; }
}

/* ── the preview: chain + controls, then the bare stage (066-010 · 020 · 021 · 025) ── */
.sp-pv{ display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:18px; background:var(--bg-1); overflow:hidden; }
.sp-pv-h{ display:flex; align-items:center; gap:8px; min-height:52px; padding:8px 10px 8px 14px; border-bottom:1px solid var(--border); min-width:0; }
.sp-chain{ display:flex; align-items:center; gap:3px; min-width:0; flex:1 1 auto; overflow:hidden; font:600 13px var(--mk-font-ui); color:var(--fg-2); white-space:nowrap; }
.sp-chain > span:not(.mi){ overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
.sp-chain b{ color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
.sp-chain .sp-chev{ font-size:16px; color:var(--fg-3); flex:0 0 auto; }
html[dir="rtl"] .sp-chain .sp-chev{ transform:scaleX(-1); }
.sp-tools{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.sp-tools .pv-vps{ display:inline-flex; align-items:center; gap:6px; }
.sp-lang .cs{ min-width:0; }
.sp-lang .cs-btn{ height:30px; min-height:30px !important; padding-inline:8px 6px !important; font:600 12px var(--mk-font-ui) !important; border-radius:9px !important; }
.sp-pv-b{ position:relative; height:calc(100dvh - var(--sp-sticky, 84px) - 84px); min-height:420px; display:flex; flex-direction:column; }
.sp-stage{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.sp-stage[hidden]{ display:none; }
.sp-stage .pvs{ height:100%; }
.sp-stage .pvs-stage{ justify-content:flex-start; padding-top:16px; }
.sp-canvas{ flex:1 1 auto; min-height:0; overflow:auto; }
.sp-canvas[hidden]{ display:none; }
.sp-cv{ min-height:100%; display:grid; place-items:center; padding:28px;
  background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg-3) 30%, transparent) 1px, transparent 1.2px) 0 0/18px 18px, var(--bg-2); }
.sp-cv-in{ max-width:100%; min-width:0; display:grid; place-items:center; }
.sp-cv-glyph{ font-size:120px; color:var(--fg-1); }
.sp-pv.is-fs{ position:fixed; inset:0; z-index:4000; border-radius:0; border:0; }
.sp-pv.is-fs .sp-pv-b{ height:auto; flex:1 1 auto; }
body.sp-fs-open{ overflow:hidden; }
.sp-fs-x{ color:var(--fg-1); }
@media (max-width:1099px){ .sp-pv-b{ height:62dvh; min-height:360px; } }
@media (max-width:600px){
  .sp-pv-h{ flex-wrap:wrap; padding:8px 10px; }
  .sp-chain{ flex:1 1 100%; }
  .sp-tools{ flex:1 1 100%; flex-wrap:wrap; }
  .sp-pv-b{ height:58dvh; }
}

/* ── the touch sheet: the tree from the bottom, the released element lit ── */
.sp-sheet{ position:fixed; inset:auto 0 0 0; z-index:3900; max-height:72dvh; display:flex; flex-direction:column; background:var(--bg-1);
  border:1px solid var(--border); border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 -18px 50px -20px rgba(0,0,0,.45);
  transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom:env(safe-area-inset-bottom, 0px); }
.sp-sheet.open{ transform:none; }
.sp-sheet-grab{ width:44px; height:5px; border-radius:5px; background:var(--border-strong, var(--border)); margin:9px auto 6px; flex:0 0 auto; }
.sp-sheet-b{ overflow:auto; padding:4px 14px 18px; }

/* ── the slide: a preview of just that node + its inspector (066-019 · 023) ── */
.mc-slide.sp-under{ display:none !important; }
.sp-ed{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 400px); gap:16px; align-items:start; padding-bottom:28px; }
.sp-ed.sp-ed-wide{ grid-template-columns:minmax(0, 1fr) minmax(360px, 520px); }
.sp-ed-pv{ position:sticky; top:var(--sp-sticky, 84px); min-width:0; }
.sp-ed-pv .sp-pv-b{ height:calc(100dvh - var(--sp-sticky, 84px) - 120px); min-height:380px; }
.sp-ed-insp{ display:flex; flex-direction:column; gap:12px; min-width:0; }
@media (max-width:1099px){
  .sp-ed,.sp-ed.sp-ed-wide{ grid-template-columns:minmax(0, 1fr); }
  .sp-ed-pv{ position:relative; top:auto; }
  .sp-ed-pv .sp-pv-b{ height:52dvh; }
}
.sp-card{ border:1px solid var(--border); border-radius:16px; background:var(--bg-1); overflow:hidden; }
.sp-card-h{ display:flex; align-items:center; gap:8px; padding:12px 14px 8px; }
.sp-card-h h3{ margin:0; flex:1 1 auto; font:700 13px var(--mk-font-ui); color:var(--fg-1); }
.sp-card-b{ display:flex; flex-direction:column; }
.sp-kv{ display:flex; align-items:center; gap:10px; min-height:42px; padding:4px 14px; border-top:1px solid var(--border); }
.sp-kv label{ flex:1 1 auto; font:600 12.5px var(--mk-font-ui); color:var(--fg-2); }
.sp-kv > span{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.sp-v{ font:500 12px var(--mk-font-mono, ui-monospace, monospace); color:var(--fg-1); }
.sp-sw{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 8px 0 4px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input);
  font:500 11.5px var(--mk-font-mono, ui-monospace, monospace); color:var(--fg-1); max-width:200px; overflow:hidden; white-space:nowrap; }
.sp-sw i{ width:20px; height:20px; border-radius:5px; border:1px solid rgba(0,0,0,.12); flex:0 0 auto; }
.sp-kid{ display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:4px 14px; border:0; border-top:1px solid var(--border); background:none; cursor:pointer; text-align:start;
  font:600 13px var(--mk-font-ui); color:var(--fg-1); }
.sp-kid:first-child{ border-top:0; }
.sp-kid:hover{ background:var(--bg-2); }
.sp-kid > .mi{ font-size:19px; color:var(--fg-3); }
.sp-kid-n{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-kid-go{ margin-inline-start:auto; color:var(--fg-3); }
html[dir="rtl"] .sp-kid-go{ transform:scaleX(-1); }
.sp-kid .sp-ic-dot{ width:22px; height:22px; border-radius:7px; }
/* the route / domain editor docked in the inspector (sections.js) */
.sp-dock > .route-edit-panel.rt-docked{ position:relative; display:none; flex-direction:column; width:100%; min-height:0; overflow:hidden;
  border:1px solid var(--border); border-radius:16px; background:var(--bg-1); }
.sp-dock > .route-edit-panel.rt-docked.open{ display:flex; }
.sp-dock > .route-edit-panel.rt-docked > .panel-body{ max-height:none; overflow:visible; }
.sp-dock [data-route-close]{ display:none !important; }
.sp-dock[inert] .nt-ed-acts,.sp-dock[inert] [data-route-hd-edit]{ display:none !important; }
/* the component editor hosted in the slide (components-lab) — its panel is the inspector, its dock the preview */
#componentPanel.sp-hosted{ position:relative !important; inset:auto !important; transform:none !important; width:100% !important; min-width:0 !important; max-width:none !important;
  height:calc(100dvh - var(--sp-sticky, 84px) - 120px); min-height:520px; z-index:auto !important; box-shadow:none !important; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex !important; visibility:visible !important; opacity:1 !important; }
#componentPanel.sp-hosted .cl-resize,#componentPanel.sp-hosted [data-panel-close],#componentPanel.sp-hosted .cmp-pv-launch{ display:none !important; }
.sp-ed-host.is-view #componentPanel .cmp-slide-foot,.sp-ed-host.is-view #componentPanel .cmp-add-el,.sp-ed-host.is-view #componentPanel .cmp-el-act{ display:none !important; }
#cmpPreviewDock.sp-hosted-dock{ position:relative !important; inset:auto !important; z-index:auto !important; display:flex !important; opacity:1 !important; width:100%;
  height:calc(100dvh - var(--sp-sticky, 84px) - 120px); min-height:420px; border-radius:16px; overflow:hidden; background:var(--bg-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
.sp-ed-host{ min-width:0; }
.sp-ed-host.is-view #componentPanel{ pointer-events:auto; }
body.sp-editor-hosted.cmp-dock-open{ overflow:auto; }
.sp-cv-ed{ border-radius:16px; overflow:hidden; border:1px solid var(--border); min-height:420px; }
@media (max-width:1099px){
  #componentPanel.sp-hosted{ height:70dvh; }
  #cmpPreviewDock.sp-hosted-dock{ height:52dvh; }
}
/* the live file: versions + View · Edit (066-018) */
.sp-ver{ white-space:nowrap; }
.sp-mode button{ min-width:58px; }
.sp-vers{ display:flex; flex-direction:column; gap:6px; }
.sp-ver-r{ display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg-1); }
.sp-ver-r > .mi{ font-size:19px; color:var(--fg-3); }
.sp-ver-t{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
.sp-ver-t b{ font:700 13px var(--mk-font-ui); color:var(--fg-1); }
.sp-ver-t small{ font:500 12px var(--mk-font-ui); color:var(--fg-3); }
/* Styles' third slide */
.sp-st-badge.ok{ color:var(--mk-success, #1F9D55); }
.sp-st-badge.bad{ color:var(--mk-danger, #D64545); border-color:color-mix(in srgb, var(--mk-danger, #D64545) 40%, var(--border)); }
.sp-need-chip{ color:var(--mk-danger, #D64545); }
.sp-styed .sty-ed{ border:1px solid var(--border); border-radius:16px; background:var(--bg-1); padding:12px 14px; }
.sp-styed [data-sty-x]{ display:none !important; }
.sp-styed[inert] .sty-ed-ft{ display:none; }
/* Assets: the level bar sits at the end of the header (no All) */
.sp-lvlbar .seg{ flex-wrap:nowrap; }
@media (max-width:600px){
  .page-view[data-view="services-assets"] .page-h .acts{ width:100%; }
  .page-view[data-view="services-assets"] .page-h .sp-lvlbar{ width:100%; }
  .page-view[data-view="services-assets"] .page-h .sp-lvlbar .seg{ width:100%; display:flex; }
  .page-view[data-view="services-assets"] .page-h .sp-lvlbar .seg button{ flex:1 1 auto; min-width:0; padding:0 3px; font-size:11px; letter-spacing:-.01em; }
}
/* a model-drawn asset has no frame: the frame's controls step away (no dead controls) */
.sp-pv.is-canvas .sp-sizes,.sp-pv.is-canvas .sp-lang,.sp-pv.is-canvas [data-sp-theme]{ display:none; }
.sp-kid.is-unstyled .sp-kid-n{ color:var(--mk-danger, #D64545); }
.sp-kid.is-unstyled::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--mk-danger, #D64545); flex:0 0 auto; order:5; }
@media (min-width:900px){ .sp-sheet{ width:min(720px, 100%); margin-inline:auto; } }