/* ═══════════════════════════════════════════════════════════════════
   Mocca — Components Lab styling (Frontend ▸ Components)

   Token-built so it inherits light/dark, the env theater and RTL like
   every other section. Two parts:
     1. The Components tab inside the Frontend page — a shell-style tab
        strip (Deployments | Components) + the catalog card grid.
     2. The slide-in component panel (mirrors the Filters panel chrome)
        that hosts the live component iframe + its controls.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Frontend/Backend page tabs — REUSE the shell tab strip look exactly
      (full-width spread + accent underline on the active tab, same as the
      dashboard tabs that "come out of the shell"). Pablo 2026-06-19:
      "Tabs are part of the shell — reuse the components that exist."
      The base `.tab` rules in shell.css supply color/hover/active-underline;
      here we only match the container + the even `flex:1` spread. ────────── */
.sec-tabs{
  display:flex;align-items:stretch;gap:0;padding:0 16px;
  height:52px;margin:0;
  border-bottom:1px solid var(--border);
  background:transparent;
}
/* ── B32 C14 — value-source control (Static / Context / State / Path) ── */
.cmp-valsrc{ display:flex;flex-direction:column;gap:8px;margin-top:2px; }
.cmp-valsrc-seg{ display:flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--bg-2); }
.cmp-valsrc-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:28px;border:0;border-radius:7px;background:transparent;cursor:pointer;
  font:600 11.5px var(--mk-font-ui);color:var(--fg-2);
}
.cmp-valsrc-btn .mi{ font-size:14px; }
.cmp-valsrc-btn.on{ background:var(--bg-1);color:var(--accent-text);box-shadow:0 1px 3px rgba(13,37,48,.12); }
.cmp-valsrc-path{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.cmp-valsrc-path .rt-ds-sel{ max-width:200px;height:30px;font-size:12px; }
.sec-tabs .tab{
  flex:1;min-width:90px;height:52px;padding:0 18px;cursor:pointer;
  justify-content:center;
}
/* B53-11 (Pablo: "On tablet, each tab should be flex-col") — icon above label,
   the same stacking the tablet nav pills and the sidebar rail already use, so
   the whole chrome reads one way at this width. */
@media (min-width:601px) and (max-width:1024px) and (min-height:600px){
  .sec-tabs{ height:auto;padding:0 10px; }
  .sec-tabs .tab{
    flex-direction:column;align-items:center;gap:3px;
    height:auto;min-height:56px;min-width:74px;padding:8px 10px;
    font-size:11px;line-height:1.2;text-align:center;
  }
  .sec-tabs .tab .mi{ font-size:20px; }
}
/* tab-views toggle on the page-view's own data-sec-tab (defaults to
   design-systems before JS sets it). */
.sec-tab-view{ display:none; }
/* B57 — Icons is the first tab and the default. B63 W9 (147) — Icons and
   Components moved off Frontend onto their own Assets peer (Design Systems
   and Routes left with them, onto Styles and Frontend respectively — see
   sections.js servicesAssets()); this whitelist moved with the two tabs that
   stayed. The unset-attribute fallback and the bogus-value fallback both
   still apply, or the page would boot showing a tab the strip does not have
   marked active. */
/* B64-Q4 — Assets is ONE collection with a scope bar (Shell / Template / Form /
   Component / Icon), not tabs. The page-view's `data-sec-tab` carries the
   scope; Shell leads (the bar's first segment), and both fallbacks (no value /
   an unknown value) land on it so the page can never boot blank. */
/* B65 W14 (065-046) — All leads: the whole collection, then the icons */
.page-view[data-view="services-assets"]:not([data-sec-tab]) .sec-tab-view[data-sec-tab="all"],
.page-view[data-view="services-assets"][data-sec-tab="all"] .sec-tab-view[data-sec-tab="all"],
.page-view[data-view="services-assets"][data-sec-tab="all"] .sec-tab-view[data-sec-tab="icons"],
.page-view[data-view="services-assets"][data-sec-tab="shells"] .sec-tab-view[data-sec-tab="shells"],
.page-view[data-view="services-assets"][data-sec-tab="templates"] .sec-tab-view[data-sec-tab="templates"],
.page-view[data-view="services-assets"][data-sec-tab="forms"] .sec-tab-view[data-sec-tab="forms"],
.page-view[data-view="services-assets"][data-sec-tab="icons"] .sec-tab-view[data-sec-tab="icons"],
.page-view[data-view="services-assets"][data-sec-tab="components"] .sec-tab-view[data-sec-tab="components"]{
  display:block;
  animation:secIn .28s var(--mk-ease) both;
}
.page-view[data-view="services-assets"][data-sec-tab]:not([data-sec-tab="all"]):not([data-sec-tab="shells"]):not([data-sec-tab="templates"]):not([data-sec-tab="forms"]):not([data-sec-tab="components"]):not([data-sec-tab="icons"]) .sec-tab-view[data-sec-tab="all"]{
  display:block;
}
/* scope groups: a count after the heading, and a gap between the two template groups */
.cl-scope-group + .cl-scope-group{ margin-top:28px; }
.cl-sech-n{ margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--bg-input);border:1px solid var(--border);font:700 11px var(--mk-font-ui);color:var(--fg-2); }
.cl-tag.cl-tag-bad{ color:var(--mk-danger);border-color:color-mix(in srgb, var(--mk-danger) 40%, var(--border));background:color-mix(in srgb, var(--mk-danger) 10%, transparent); }
@media (prefers-reduced-motion:reduce){ .sec-tab-view{ animation:none !important; } }

/* ── Catalog header bits ─────────────────────────────────────────── */
.cl-meta{ display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 4px; }
.cl-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--mk-radius-pill);background:var(--bg-2);
  border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--fg-2);
}
.cl-pill .mi{ font-size:16px;color:var(--accent-text); }

.cl-sech{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:none;
  color:var(--fg-3);margin:14px 0 2px;display:flex;align-items:center;gap:9px;
}
.cl-sech .mi{ font-size:16px; }
/* Intro line under the section header (Pablo 2026-06-21 — Components tab
   shows only what the prototype renders; this explains the scope). */
.cl-sub{
  font-size:13px;color:var(--fg-2);line-height:1.55;margin:2px 0 16px;
  max-width:62ch;text-wrap:pretty;
}
/* "Used in <screen>" tag — neutral chip with a location glyph, distinct
   from the accent state tag it replaces. */
.cl-tag-use{
  display:inline-flex;align-items:center;gap:5px;
  font:600 10.5px var(--mk-font-ui);letter-spacing:.01em;
  background:var(--bg-2);color:var(--fg-2);border:1px solid var(--border);
}
.cl-tag-use .mi{ font-size:13px;color:var(--accent-text); }

/* ── Card grid ───────────────────────────────────────────────────── */
.cl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
}
.cl-card{
  text-align:start;font-family:inherit;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--mk-radius-lg);padding:18px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--mk-t-fast),transform var(--mk-t-fast),box-shadow var(--mk-t-fast);
}
.cl-card:hover{
  border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.cl-card:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.cl-card-top{ display:flex;align-items:center;gap:12px; }
.cl-card-ic{
  width:42px;height:42px;border-radius:var(--mk-radius-md);flex:0 0 auto;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);
}
.cl-card-ic .mi{ font-size:23px; }
.cl-card-nm{ font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--fg-1); }
.cl-card-sub{ font-size:12px;color:var(--fg-3);font-weight:500;margin-top:1px; }
.cl-card-desc{ font-size:13px;color:var(--fg-2);line-height:1.55;flex:1;text-wrap:pretty; }
.cl-card-foot{ display:flex;align-items:center;gap:8px; }
.cl-tag{
  font:600 10.5px var(--mk-font-mono);padding:3px 8px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-text);
}
.cl-open{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;color:var(--accent-text);
}
.cl-open .mi{ font-size:16px;transition:transform var(--mk-t-fast); }
html[dir="rtl"] .cl-open .mi{ transform:scaleX(-1); }
.cl-card:hover .cl-open .mi{ transform:translateX(3px); }
html[dir="rtl"] .cl-card:hover .cl-open .mi{ transform:scaleX(-1) translateX(3px); }

.cl-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:48px 20px;color:var(--fg-3);font-size:14px;font-weight:500;
}
.cl-empty .mi{ font-size:34px; }

/* ── Component panel (slide-in; mirrors .filter-panel) ───────────── */
.cl-panel{
  /* B46 C01 — same single panel width as every other slide-in panel. */
  width:min(var(--mk-panel-w, 560px), 96vw);
  min-width:min(var(--mk-panel-w, 560px), 96vw);
}
.cl-panel .panel-hd{ position:relative; }
.cl-hd-actions{ display:flex;align-items:center;gap:6px; }
.cl-openfull{
  width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--fg-2);border:1px solid var(--border);background:var(--bg-input);
  transition:border-color var(--mk-t-fast),color var(--mk-t-fast);text-decoration:none;
}
.cl-openfull:hover{ border-color:var(--accent);color:var(--accent-text); }
.cl-openfull .mi{ font-size:17px; }
/* C5 (Pablo B30): on desktop the live preview is always visible, so the manual
   Preview button is redundant \u2014 hide it at wide viewports (it stays on mobile
   where the preview pane is collapsed). */
@media (min-width:901px){
  .cl-panel .cmp-preview-btn{ display:none; }
}

/* drag-to-resize handle on the inner edge */
.cl-resize{
  position:absolute;inset-block:0;inset-inline-start:-3px;width:9px;z-index:5;
  cursor:col-resize;touch-action:none;
}
.cl-resize::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:3px;width:2px;
  background:transparent;transition:background var(--mk-t-fast);
}
.cl-resize:hover::after{ background:var(--accent); }
body.cl-resizing{ cursor:col-resize;user-select:none; }
body.cl-resizing .cl-frame{ pointer-events:none; }

/* live stage — the iframe fills it; component scrolls internally */
.cl-stage{
  position:relative;flex:1;min-height:0;background:var(--bg-1);
  border-top:1px solid var(--divider);
}
.cl-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--bg-1);
}
.cl-loading{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg-1);z-index:2;
}
.cl-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:cl-spin .8s linear infinite;
}
.cl-loading-txt{ font-size:12.5px;color:var(--text-2);font-weight:500; }
@keyframes cl-spin{ to{ transform:rotate(360deg); } }
/* failed / blank load — actionable, never a silent blank panel */
.cl-error{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--bg-1);z-index:3;text-align:center;padding:24px;
}
.cl-error .mi{ font-size:34px;color:var(--warn,#d9a400); }
.cl-error-msg{ margin:0;font-size:13px;color:var(--text-2);max-width:280px;line-height:1.5; }
.cl-error-acts{ display:flex;gap:8px;margin-top:4px; }
.cl-error-btn{
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-on,#fff);text-decoration:none;
}
.cl-error-btn.ghost{ background:transparent;color:var(--text-1);border-color:var(--border-strong,var(--border)); }
.cl-error-btn:hover{ opacity:.9; }

/* ── controls drawer (state + props) ─────────────────────────────── */
.cl-controls{
  flex:0 0 auto;border-top:1px solid var(--border);background:var(--bg-2);
  display:flex;flex-direction:column;max-height:46%;
}
.cl-controls.collapsed{ max-height:none; }
.cl-controls-hd{
  display:flex;align-items:center;gap:8px;cursor:pointer;flex:0 0 auto;
  padding:11px 18px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:none;color:var(--fg-2);
}
.cl-controls-hd > .mi:first-child{ font-size:15px;color:var(--accent-text); }
.cl-controls-hd .cl-chev{ margin-inline-start:auto;font-size:18px;color:var(--fg-3);transition:transform var(--mk-t-fast); }
.cl-controls.collapsed .cl-chev{ transform:rotate(-90deg); }
.cl-controls.collapsed .cl-controls-body{ display:none; }
.cl-controls.is-loading .cl-controls-body{ opacity:.4; }
.cl-controls-body{ overflow-y:auto;min-height:0;padding:0 18px 16px; }

.cl-group{ padding:12px 0;border-top:1px solid var(--divider); }
.cl-group:first-child{ border-top:0; }
.cl-group-h{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:none;color:var(--fg-3);
  margin:0 0 11px;display:flex;align-items:center;gap:7px;
}
.cl-group-h .mi{ font-size:14px; }

.cl-field{ margin-bottom:13px; }
.cl-field:last-child{ margin-bottom:0; }
.cl-field > label{ display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:7px; }
.cl-hint{ font-size:11px;color:var(--fg-3);margin-top:5px;font-weight:500; }

.cl-states{ display:flex;flex-wrap:wrap;gap:6px; }
.cl-state{
  appearance:none;cursor:pointer;font-family:inherit;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);
  font-size:11px;font-weight:600;padding:6px 11px;border-radius:var(--mk-radius-pill);
  display:inline-flex;align-items:center;gap:6px;transition:all var(--mk-t-fast);
}
.cl-state .mi{ font-size:14px; }
.cl-state:hover{ color:var(--fg-1);border-color:var(--border-strong); }
.cl-state.on{ background:var(--accent);color:var(--accent-fg);border-color:transparent; }

.cl-seg{
  display:flex;background:var(--bg-input);border:1px solid var(--border);
  border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap;
}
.cl-seg button{
  flex:1 1 auto;min-width:0;appearance:none;border:0;cursor:pointer;background:transparent;font-family:inherit;
  color:var(--fg-2);font-size:12px;font-weight:600;padding:7px 10px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  transition:background var(--mk-t-fast),color var(--mk-t-fast);
}
.cl-seg button:hover{ color:var(--fg-1); }
.cl-seg button.on{ background:var(--accent);color:var(--accent-fg); }
.cl-seg.compact button{ padding:6px 8px;font-size:11px; }

.cl-toggle{ display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer; }
.cl-toggle .cl-toggle-lbl{ font-size:12px;font-weight:600;color:var(--fg-1); }
.cl-toggle .sw{ width:38px;height:22px;border-radius:999px;background:var(--border-strong);position:relative;flex:0 0 auto;transition:background var(--mk-t-fast); }
.cl-toggle .sw::after{ content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--mk-t-fast); }
.cl-toggle.on .sw{ background:var(--accent); }
.cl-toggle.on .sw::after{ transform:translateX(16px); }
html[dir="rtl"] .cl-toggle.on .sw::after{ transform:translateX(-16px); }

.cl-rangerow{ display:flex;align-items:center;gap:10px; }
.cl-range{ flex:1;accent-color:var(--accent); }
.cl-rangeval{ font:600 12px var(--mk-font-mono);color:var(--fg-2);min-width:28px;text-align:end; }

.cl-input{
  width:100%;padding:9px 12px;border-radius:var(--mk-radius-sm);background:var(--bg-input);
  border:1px solid var(--border);color:var(--fg-1);font:500 13px var(--mk-font-ui);outline:none;
  transition:border-color var(--mk-t-fast);
}
.cl-input:focus{ border-color:var(--accent); }

/* Components-Lab panel goes FULL-SURFACE on every non-desktop viewport
   (Pablo 2026-06-22: "full screen sheet, like the filters panel, for all
   components lab panels in all screen sizes"). The old rule only caught
   max-width:680 portrait phones, so on mobile-LANDSCAPE the panel stayed a
   640px side sheet that "persistently displayed" and felt stuck. Now it
   matches the .filter-panel breakpoints exactly: portrait phone, landscape
   phone, AND tablet all take the whole surface; only desktop keeps the
   drag-resizable side panel. */
@media (max-width:600px) and (orientation:portrait),
       (max-height:599px) and (orientation:landscape),
       (min-width:601px) and (max-width:1024px) and (min-height:600px){
  .cl-panel{
    inset:0;
    inset-inline-start:0;inset-inline-end:0;top:0;bottom:0;
    width:100% !important;min-width:0;height:100%;
    border-inline-start:0;border-radius:0;
    transform:translateX(110%);
  }
  html[dir="rtl"] .cl-panel{ transform:translateX(-110%); }
  .cl-panel.open{ transform:translateX(0) !important; }
  .cl-resize{ display:none; }
  .cl-controls{ max-height:52%; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT EDITOR (rebuilt 2026-06-29) — model-driven editor + preview.
   Reuses the filter-panel kit (.fp-slide* / .fp-chip* / .panel-btn* /
   .cb-input) and the .cl-* field classes above. Only the editor-specific
   structure is styled here.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes cmp-spin{ to{ transform:rotate(360deg); } }

/* the panel hosts a slide stack — guarantee flex column */
.cl-panel{ display:flex;flex-direction:column; }
.cl-panel .fp-slide-stack{ flex:1;min-height:0; }

/* "New component" card */
.cl-card-new{ border-style:dashed;background:transparent; }
.cl-card-new .cl-card-ic{ background:var(--bg-2);color:var(--fg-2); }
.cl-card-new:hover .cl-card-ic{ background:var(--accent-soft);color:var(--accent-text); }

/* section header inside the editor */
.cmp-sech{ margin:20px 0 10px; }
.cmp-sech-t{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:none;color:var(--fg-2);
  display:flex;align-items:center;gap:8px;
}
.cmp-sech-t .mi{ font-size:15px;color:var(--accent-text); }
.cmp-sech-s{ font-size:12px;color:var(--fg-3);line-height:1.5;margin-top:5px;max-width:54ch;text-wrap:pretty; }

/* component name bar */
.cmp-namebar{ margin-bottom:4px; }
.cmp-name-input{ width:100%;font-weight:700;font-size:15px; }

/* inline live-preview stage */
.cmp-stage-inline{
  display:flex;align-items:center;justify-content:center;
  padding:26px 20px;border-radius:14px;min-height:120px;
  background:
    repeating-conic-gradient(color-mix(in srgb,var(--fg-3) 8%,transparent) 0 25%, transparent 0 50%) 0 0/18px 18px,
    var(--bg-1);
  border:1px solid var(--border);
  overflow:auto;
}
.cmp-stage-inline > .cmp-render{ width:100%;max-width:480px; }
.cmp-stage-mini{ min-height:96px;padding:18px;margin-bottom:14px; }
.cmp-state-sw{ margin-top:10px; }

/* states manager (reuses .fp-chip) */
.cmp-states-mgr{ margin-top:2px; }
.cmp-state-chip{ cursor:pointer; }
.cmp-state-chip .fp-chip-tag{ color:var(--accent-text); }
.cmp-state-add{ border-style:dashed;color:var(--fg-2); }
.cmp-state-add:hover{ color:var(--accent);border-color:var(--accent); }

/* element tree (reuses .fp-row) */
.cmp-tree{ display:flex;flex-direction:column;gap:2px;margin-bottom:10px; }
.cmp-el-row{ gap:6px;align-items:center; }
.cmp-el-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:start;
  font-family:inherit;border:1px solid var(--border);background:var(--bg-input);
  padding:7px 10px;border-radius:9px;transition:border-color var(--mk-t-fast),background var(--mk-t-fast);
}
.cmp-el-main:hover{ border-color:var(--accent);background:var(--accent-soft); }
.cmp-el-tag{
  font:600 10.5px var(--mk-font-mono);padding:2px 7px;border-radius:5px;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent-text);
}
.cmp-el-label{ font-size:12.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-el-acts{ display:flex;align-items:center;gap:2px;flex:0 0 auto; }
.cmp-el-act{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--fg-3);
  transition:all var(--mk-t-fast);
}
.cmp-el-act .mi{ font-size:15px; }
.cmp-el-act:hover{ background:var(--accent-soft);color:var(--accent-text); }
.cmp-el-del:hover{ background:color-mix(in srgb,var(--mk-danger) 18%,transparent);color:var(--mk-danger); }
.cmp-add-el{ width:100%;justify-content:center; }

/* element form */
.cmp-flabel{ display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin:14px 0 7px; }
.cmp-flabel:first-child{ margin-top:0; }
.cmp-select{
  width:100%;appearance:none;cursor:pointer;
  background:var(--bg-input) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
  background-position:right 10px center;padding-right:34px;
}
html[dir="rtl"] .cmp-select{ background-position:left 10px center;padding-right:12px;padding-left:34px; }
.cmp-attr{ margin-bottom:7px; }

/* icon picker grid */
.cmp-iconpick{ display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px;margin-top:8px; }
.cmp-iconpick-b{
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-input);color:var(--fg-2);transition:all var(--mk-t-fast);
}
.cmp-iconpick-b .mi{ font-size:18px; }
.cmp-iconpick-b:hover{ border-color:var(--accent);color:var(--accent-text); }
.cmp-iconpick-b.on{ background:var(--accent);color:var(--accent-fg);border-color:transparent; }

/* C5 (Pablo 2026-07-01) — searchable icon dropdown (replaces the always-open grid) */
.cmp-iconsel{ position:relative;display:block;margin-top:8px; }
.cmp-iconsel > .cs-btn{ width:100%;justify-content:flex-start;gap:8px; }
.cmp-iconsel-cur{ font-size:18px;color:var(--accent-text); }
.cmp-iconsel-lbl{ flex:1;text-align:start;font:600 12.5px var(--mk-font-ui);color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cmp-iconsel > .cs-menu{ width:min(320px,86vw);padding:0;overflow:hidden; }
.cmp-iconsel-search{ display:flex;align-items:center;gap:6px;padding:8px 10px;position:sticky;top:0;background:var(--bg-1);border-bottom:1px solid var(--border);z-index:1; }
.cmp-iconsel-search .mi{ font-size:17px;color:var(--fg-3); }
.cmp-iconsel-inp{ flex:1;min-width:0;border:0;background:transparent;outline:none;font:500 13px var(--mk-font-ui);color:var(--fg-1); }
.cmp-iconsel-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:5px;padding:10px;max-height:230px;overflow:auto; }

/* C10 — disabled orientation toggle on desktop (orientation-agnostic) */
.cmp-pv-iconbtn.cmp-disabled,.cmp-pv-iconbtn:disabled{ opacity:.4;cursor:not-allowed;pointer-events:none; }

/* C12 — icon+label rows inside the shared-select menus (state + icon pickers) */
.cmp-pv-statecs .cs-item,.cmp-iconsel .cs-item{ display:flex;align-items:center;gap:8px; }

/* C6 — right internal padding so chip text isn't tight against the border */
#componentPanel .fp-chips > button,
#componentPanel .fp-chips > input,
#componentPanel .fp-chips > textarea{ padding-inline-end:12px; }

/* style layer + property editor */
.cmp-layer-sw{ margin-bottom:12px; }
.cmp-style-host{ display:flex;flex-direction:column;gap:10px; }
.cmp-style-row{
  padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:var(--bg-2);
  display:flex;flex-direction:column;gap:9px;
}
.cmp-style-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; }
.cmp-style-name{ font-size:12.5px;font-weight:600;color:var(--fg-1); }
.cmp-style-rm{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;cursor:pointer;
  border:0;background:transparent;color:var(--fg-3);
}
.cmp-style-rm .mi{ font-size:15px; }
.cmp-style-rm:hover{ background:color-mix(in srgb,var(--mk-danger) 18%,transparent);color:var(--mk-danger); }
.cmp-addstyle{ margin-top:2px; }

/* color value control */
.cmp-color{ display:flex;flex-direction:column;gap:8px; }
.cmp-color-swatches{ display:flex;flex-wrap:wrap;gap:6px; }
.cmp-swatch{
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:2px solid var(--border);transition:transform var(--mk-t-fast),border-color var(--mk-t-fast);
}
.cmp-swatch:hover{ transform:scale(1.1); }
.cmp-swatch.on{ border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
input.cmp-color-txt{ font-family:var(--mk-font-mono);font-size:12px; }

/* children list */
.cmp-kidlist{ display:flex;flex-direction:column;gap:5px;margin-bottom:10px; }
.cmp-kid-row{
  display:flex;align-items:center;gap:8px;cursor:pointer;text-align:start;font-family:inherit;
  border:1px solid var(--border);background:var(--bg-input);padding:8px 11px;border-radius:9px;
  transition:border-color var(--mk-t-fast),background var(--mk-t-fast);
}
.cmp-kid-row:hover{ border-color:var(--accent);background:var(--accent-soft); }
.cmp-kid-go{ margin-inline-start:auto;font-size:17px;color:var(--fg-3); }
html[dir="rtl"] .cmp-kid-go{ transform:scaleX(-1); }
.cmp-empty{ font-size:12.5px;color:var(--fg-3);padding:10px 2px; }

/* ── preview overlay (tablet/mobile + explicit Preview) — C24: fullscreen,
   dark opaque, big corner exit, controls + component front & center ── */
.cmp-preview-overlay{
  position:fixed;inset:0;z-index:1200;display:none;
}
.cmp-preview-overlay.open{ display:block; }
.cmp-preview-scrim{
  position:absolute;inset:0;background:color-mix(in srgb,#000 82%, var(--bg-1));
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:cmp-pv-fade .2s var(--mk-ease) both;
}
@keyframes cmp-pv-fade{ from{ opacity:0; } to{ opacity:1; } }
.cmp-preview-dialog{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  background:transparent;animation:cmp-pv-pop .24s var(--mk-ease) both;
}
@keyframes cmp-pv-pop{ from{ opacity:0;transform:scale(.985); } to{ opacity:1;transform:none; } }
.cmp-pv-exit{
  position:absolute;z-index:6;top:16px;inset-inline-end:16px;
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  border:1px solid color-mix(in srgb,#fff 22%,transparent);background:color-mix(in srgb,#000 35%,transparent);
  color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background var(--mk-t-fast),transform var(--mk-t-fast);
}
.cmp-pv-exit:hover{ background:color-mix(in srgb,#000 55%,transparent);transform:scale(1.05); }
.cmp-pv-exit .mi{ font-size:26px; }

/* ═══════════════════════════════════════════════════════════════════
   BATCH 13 (Pablo 2026-06-29) — component editor: context fields, element
   labels & icons, tree indentation, in-panel state flows, and the preview
   that lives OUTSIDE the panel (left dock on desktop, overlay on touch).
   ═══════════════════════════════════════════════════════════════════ */

/* the animated rotating outline that tracks the hovered element (C6) */
@property --cmp-ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cmp-ang-spin { to { --cmp-ang:360deg; } }

/* ── preview launcher row in the panel (points at the external preview) ── */
.cmp-pv-launch{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;
  padding:11px 13px;border-radius:12px;border:1px dashed var(--border);
  background:var(--bg-2);margin:4px 0 2px;
}
.cmp-pv-launch-l{ display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--fg-2);line-height:1.45;flex:1;min-width:160px;text-wrap:pretty; }
.cmp-pv-launch-l .mi{ font-size:18px;color:var(--accent-text);flex:0 0 auto; }
.cmp-pv-btn{ flex:0 0 auto; }
html[dir="rtl"] .cmp-pv-launch-l .mi[ ]{}

/* ── desktop preview canvas: fills the area the editor panel doesn't cover
   (C25). Opaque background; controls float on top; component centered. ── */
.cmp-preview-dock{
  /* End the dock at the editor panel's inline edge (Pablo: on desktop the
     opaque dock bg was painting OVER the form panel because it spanned the
     full viewport and only *padded* out the panel width — border-box bg fills
     the padding too, and the dock's z-index (1150) sits above the panel (260),
     so the form disappeared). Insetting the end instead of padding it leaves
     the panel fully visible + clickable. */
  position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:var(--cmp-panel-w,0);z-index:1150;
  display:none;flex-direction:column;
  /* C4 (Pablo 2026-07-01) — dark, lightly-blurred backdrop: the app content behind
     stays legible as shapes but is blurred enough to be irrelevant. */
  background:color-mix(in srgb, #050a12 70%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s var(--mk-ease);
}
.cmp-preview-dock.open{ display:flex;opacity:1; }

/* ── shared preview surface (floating controls + scaled screen) ── */
.cmp-pv-surface{ position:relative;display:flex;flex-direction:column;flex:1;min-height:0; }
.cmp-pv-ctrls{
  position:absolute;z-index:4;inset-block-start:0;inset-inline:0;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:transparent;pointer-events:none;
}
.cmp-pv-ctrls > *{ pointer-events:auto; }
/* B51-18 — the shared 4-variant control (preview-variants.css) floating over the
   preview stage: it needs the same lift the old segmented control had, since it
   sits on top of the blurred device backdrop rather than on a panel. */
.cmp-pv-vps{ pointer-events:auto; }
.cmp-pv-vps .pv-seg{ background:var(--bg-1);box-shadow:0 1px 3px rgba(0,0,0,.14); }
.cmp-pv-vps .pv-vp{ width:34px;height:30px; }
.cmp-pv-vps .pv-touch{ width:34px;height:34px;box-shadow:0 1px 3px rgba(0,0,0,.14); }
.cmp-pv-row{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.cmp-pv-iconbtn{
  width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);cursor:pointer;flex:0 0 auto;
  transition:border-color var(--mk-t-fast),color var(--mk-t-fast),background var(--mk-t-fast);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.cmp-pv-iconbtn .mi{ font-size:18px; }
.cmp-pv-iconbtn:hover{ border-color:var(--accent);color:var(--accent-text); }
.cmp-pv-iconbtn.on{ background:var(--accent);color:var(--accent-fg);border-color:transparent; }
.cmp-pv-dssel-wrap,.cmp-pv-statesel-wrap{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-2);flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.cmp-pv-dssel-wrap .mi,.cmp-pv-statesel-wrap .mi{ font-size:17px;color:var(--accent-text); }
.cmp-pv-dssel,.cmp-pv-statesel{
  appearance:none;border:0;background:transparent;outline:none;cursor:pointer;
  font:600 12px var(--mk-font-ui);color:var(--fg-1);padding-inline-end:2px;max-width:150px;
}
/* DS selector reuses the shared `.cs` custom-select (Pablo). Match the height
   + drop-shadow of the neighbouring controls; keep its menu above the stage. */
.cmp-pv-cs{ flex:0 0 auto; }
.cmp-pv-cs > .cs-btn{ height:34px;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.14); }
.cmp-pv-cs > .cs-btn > .mi:first-child{ color:var(--accent-text); }
.cmp-pv-cs > .cs-menu{ z-index:8; }

/* C26 — context accordion */
.cmp-pv-ctxwrap{ display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:min(440px,100%); }
.cmp-pv-ctxhd{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);font:600 12px var(--mk-font-ui);box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.cmp-pv-ctxhd .mi{ font-size:17px;color:var(--fg-2); }
.cmp-pv-ctxchev{ transition:transform .2s var(--mk-ease); }
.cmp-pv-ctxwrap.open .cmp-pv-ctxchev{ transform:rotate(90deg); }
html[dir="rtl"] .cmp-pv-ctxchev{ transform:scaleX(-1); }
html[dir="rtl"] .cmp-pv-ctxwrap.open .cmp-pv-ctxchev{ transform:rotate(90deg) scaleX(-1); }
.cmp-pv-ctxpanel{
  width:min(420px,84vw);max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:10px;
  padding:14px;border-radius:13px;background:var(--bg-1);border:1px solid var(--border);box-shadow:var(--shadow-lg,var(--shadow-md));
}
/* Pablo: the context panel "wouldn't close once opened". The [hidden] attribute
   the JS toggles was defeated by the display:flex above (an author display rule
   beats the UA [hidden]{display:none}), so the panel stayed visible. Restore the
   hidden behaviour with a class+attr selector that outranks the base rule. */
.cmp-pv-ctxpanel[hidden]{ display:none; }
.cmp-pv-form{ display:flex;flex-direction:column;gap:12px; }
.cmp-pv-field{ display:flex;flex-direction:column;gap:6px; }
.cmp-pv-flabel{ display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--fg-2); }
.cmp-pv-flabel .mi{ font-size:16px;color:var(--accent-text); }
.cmp-pv-req{ color:var(--mk-danger,#d64545);font-weight:800; }
.cmp-pv-ctxctrl{ width:100%;min-width:0; }
.cmp-pv-ctxctrl.cl-toggle{ width:auto;align-self:flex-start; }

/* the scaled device screen (centered on the opaque canvas, C13/C25) */
.cmp-pv-stage{
  flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;
  /* B50-23 — the bezel is drawn OUTSIDE the screen's box (box-shadow spread), so
     the stage needs a little more room or the ring clips against the controls. */
  padding:94px 32px 34px;background:transparent;
}
/* ── B50-23 — the preview reads as a SCREEN, not a white plate ──────────────
   Pablo: "I'm not a huge fan of the white frame, could we build something that
   maybe looks more like a screen or maybe use a less intense color with opacity
   or something, so that the actual component preview is actually highlighted."
   Two changes, both aimed at lowering the frame's voice:
   1. The surface is the app's CANVAS colour (--bg-2), not pure --bg-1 white. That
      is both quieter AND more honest: in the real app a component sits on the
      page canvas, never on a white sheet.
   2. The loud 1px border + generic drop shadow are replaced by a dark, slightly
      translucent BEZEL drawn with box-shadow spread (so it costs no layout and
      the JS-measured screen size stays exactly the device size) plus a hairline
      highlight and one deep soft lift. The dark ring separates the screen from
      the blurred backdrop, so the component inside is what the eye lands on. */
.cmp-pv-screen{
  position:relative;flex:0 0 auto;transform-origin:top left;border-radius:16px;overflow:hidden;
  background:var(--bg-2,#f7f8fa);border:0;
  box-shadow:
    0 0 0 9px color-mix(in srgb,#0a1220 74%,transparent),
    0 0 0 10px color-mix(in srgb,#ffffff 13%,transparent),
    0 30px 64px -22px rgba(0,0,0,.62);
}
/* Dark theme: the bezel needs to stay readable against an already-dark backdrop,
   so it lightens rather than darkens. */
html[data-theme="dark"] .cmp-pv-screen,
body.theme-dark .cmp-pv-screen{
  box-shadow:
    0 0 0 9px color-mix(in srgb,#e8eef7 9%,transparent),
    0 0 0 10px color-mix(in srgb,#ffffff 16%,transparent),
    0 30px 64px -22px rgba(0,0,0,.75);
}
.cmp-pv-content{
  position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;
}
.cmp-pv-content > .cmp-render{ width:100%;max-width:640px;flex:0 0 auto; }
/* B46 C01 — empty-preview state (no elements / all conditioned out). */
.cmp-pv-empty{ display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 22px;max-width:320px;margin:auto;border-radius:14px;
  background:var(--bg-1);border:1px dashed var(--border);color:var(--fg-3); }
.cmp-pv-empty .mi{ font-size:28px;color:var(--accent-text,var(--accent)); }
.cmp-pv-empty b{ font:700 13.5px var(--mk-font-ui);color:var(--fg-1); }
.cmp-pv-empty span:not(.mi){ font:500 12px/1.5 var(--mk-font-ui);text-wrap:pretty; }
.cmp-pv-scrubbing .cmp-pv-content{ pointer-events:none; }

/* the traveling (rotating) border that tracks the hovered element. Pablo: the
   marching "dotted line" was removed (it read as misaligned); only the
   conic traveling border remains — brighter, and radius-matched to the element
   (--cmp-out-r set per-hover in drawOutline) so it hugs the real shape. */
.cmp-pv-outline{
  position:absolute;z-index:5;pointer-events:none;border-radius:var(--cmp-out-r,8px);
}
/* C7 (Pablo 2026-07-01) — a vivid 3-neon-colour gradient (green → cyan → violet)
   that travels around the OUTSIDE of the hovered element. Thicker ring + a neon
   glow so it's very evident, hugging the element's real corner radius. */
.cmp-pv-outline::after{
  content:"";position:absolute;inset:-3px;border-radius:calc(var(--cmp-out-r,8px) + 3px);padding:3px;
  background:conic-gradient(from var(--cmp-ang),
    #39ff14, #00e5ff 25%, #b026ff 50%, #00e5ff 75%, #39ff14);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(0,229,255,.75)) drop-shadow(0 0 7px rgba(176,38,255,.55));
  animation:cmp-ang-spin 1.4s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .cmp-pv-outline,.cmp-pv-outline::after{ animation:none; }
}

/* overlay reuses the surface; the dialog hosts it full-height */
.cmp-preview-dialog .cmp-pv-surface{ min-height:0; }
.cmp-preview-dialog{ height:min(88vh,860px); }

/* ── tree: leading icon, indentation rails, mini tag (C3/C5) ── */
.cmp-el-row{ position:relative; }
.cmp-el-rails{ display:inline-flex;flex:0 0 auto;align-self:stretch; }
.cmp-el-rails i{ display:block;width:13px;align-self:stretch;border-inline-start:2px solid var(--border);margin-inline-start:5px; }
.cmp-el-ic{
  width:25px;height:25px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-text);
}
.cmp-el-ic .mi{ font-size:16px; }
.cmp-el-tagmini{ font:600 9.5px var(--mk-font-mono);color:var(--fg-3);margin-inline-start:auto;flex:0 0 auto;text-transform:lowercase; }

/* inline rename / add-state input (replaces window.prompt — C2) */
.cmp-inline-input{
  appearance:none;font:600 12px var(--mk-font-ui);color:var(--fg-1);
  border:1px solid var(--accent);background:var(--bg-input);border-radius:7px;padding:4px 8px;outline:none;
  min-width:90px;max-width:150px;
}
.cmp-state-newinput{ min-width:130px; }

/* inline confirm bar (replaces window.confirm — C2) */
.cmp-confirm{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--warn,#d9a400) 12%,var(--bg-2));border:1px solid color-mix(in srgb,var(--warn,#d9a400) 40%,var(--border));
}
.cmp-confirm > .mi{ font-size:19px;color:var(--warn,#d9a400);flex:0 0 auto; }
.cmp-confirm-msg{ flex:1;min-width:140px;font-size:12.5px;color:var(--fg-1);line-height:1.45; }
.cmp-confirm-acts{ display:flex;gap:7px;flex:0 0 auto; }

/* ── context-field list (C1) ── */
.cmp-ctx-list{ display:flex;flex-direction:column;gap:4px;margin-bottom:10px; }
.cmp-ctx-main{ gap:9px; }
.cmp-ctx-nm{ font-size:13px;font-weight:600;color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-ctx-type{ font:600 10.5px var(--mk-font-mono);color:var(--fg-3);margin-inline-start:auto;flex:0 0 auto; }
.cmp-ctx-req{ color:var(--accent-text);font-weight:800;flex:0 0 auto;margin-inline-start:6px; }
.cmp-ctx-rmbtn{ width:100%;justify-content:center;color:var(--mk-danger,#d64545);margin-top:14px; }
.cmp-ctx-rmbtn:hover{ border-color:var(--mk-danger,#d64545); }

/* ── tri-language text field (element labels + context names/descriptions) ── */
.cmp-tri{ display:flex;flex-direction:column;gap:6px; }
.cmp-tri-row{ display:flex;align-items:center;gap:8px; }
.cmp-tri-tag{
  flex:0 0 auto;width:30px;text-align:center;font:700 10px var(--mk-font-mono);letter-spacing:.04em;
  color:var(--fg-3);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:6px 0;
}
.cmp-tri-input{ flex:1;min-width:0; }

/* toggle row inside the context form */
.cmp-toggle{ width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);margin-top:10px; }
.cmp-toggle .cl-toggle-lbl{ font-size:12.5px; }

/* full-surface (tablet/mobile): hide the desktop dock, never let it show */
@media (max-width:600px) and (orientation:portrait),
       (max-height:599px) and (orientation:landscape),
       (min-width:601px) and (max-width:1024px) and (min-height:600px){
  .cmp-preview-dock{ display:none !important; }
  /* C9 (Pablo this batch): the in-panel preview launcher only makes sense on
     tablet/mobile (no left dock there). On desktop the component already shows
     in the dock outside the panel, so the launcher stays hidden. */
  .cmp-pv-launch{ display:flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   BATCH 15 (Pablo 2026-06-30) — drag tree, state forms, save/publish,
   component icon, floating-controls canvas, context icons.
   ═══════════════════════════════════════════════════════════════════ */
/* C18 — continuous indentation rails (rows flush so guides connect) */
.cmp-tree{ gap:0; }
.cmp-el-row{ padding-block:2px; }
.cmp-el-rails{ display:inline-flex;flex:0 0 auto;align-self:stretch; }
.cmp-el-rails i{ display:block;width:15px;align-self:stretch;border-inline-start:2px solid var(--border);margin-inline-start:6px; }
.cmp-el-row.cmp-row-hot > .cmp-el-main{ border-color:var(--accent);background:var(--accent-soft); }

/* C17 — drag grip + drop markers */
.cmp-el-grip{ flex:0 0 auto;display:grid;place-items:center;width:18px;color:var(--fg-3);cursor:grab; }
.cmp-el-grip .mi{ font-size:17px; }
.cmp-el-dragging{ opacity:.45; }
.cmp-el-row.cmp-drop-before{ box-shadow:inset 0 2px 0 var(--accent); }
.cmp-el-row.cmp-drop-after{ box-shadow:inset 0 -2px 0 var(--accent); }
.cmp-el-row.cmp-drop-inside > .cmp-el-main{ border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent) inset; }

/* C19 — add-child below the box */
.cmp-el-addchild{
  display:flex;align-items:center;width:100%;border:0;background:transparent;cursor:pointer;
  padding:0;color:var(--fg-3);font:600 11px var(--mk-font-ui);opacity:.45;transition:opacity var(--mk-t-fast);
}
.cmp-el-addchild .cmp-ac-in{ display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;border:1px dashed var(--border); }
.cmp-el-addchild .cmp-ac-in .mi{ font-size:14px; }
.cmp-el-addchild:hover{ opacity:1;color:var(--accent-text); }
.cmp-el-addchild:hover .cmp-ac-in{ border-color:var(--accent);background:var(--accent-soft); }

/* state chips — grip, default badge, drop */
.cmp-chip-grip{ font-size:15px;color:var(--fg-3);cursor:grab;margin-inline-end:-2px; }
.cmp-state-def{ font:700 8.5px var(--mk-font-mono);letter-spacing:.04em;text-transform:none;color:var(--accent-fg);background:var(--accent);padding:2px 5px;border-radius:5px;margin-inline-start:5px; }
.cmp-state-chip.cmp-chip-dragging{ opacity:.45; }
.cmp-state-chip.cmp-chip-drop{ box-shadow:0 0 0 2px var(--accent) inset; }

/* C23 — component icon selector in the name bar */
.cmp-namebar{ display:flex;align-items:center;gap:8px;position:relative;flex-wrap:wrap; }
.cmp-name-input{ flex:1;min-width:0;width:auto; }
.cmp-name-iconbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 9px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-input);color:var(--accent-text);
}
.cmp-name-iconbtn > .mi:first-child{ font-size:20px; }
.cmp-name-caret{ font-size:16px;color:var(--fg-3); }
.cmp-name-iconpop{ position:absolute;z-index:10;top:46px;inset-inline-start:0;width:min(320px,100%);padding:10px;border-radius:12px;background:var(--bg-1);border:1px solid var(--border);box-shadow:var(--shadow-lg,var(--shadow-md)); }

/* C20 — save / publish button, slide footer, toast */
.cl-hd-actions{ display:flex;align-items:center;gap:6px; }
.cmp-save-btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;cursor:pointer;
  border:0;background:var(--accent);color:var(--accent-fg);font:600 12.5px var(--mk-font-ui);
}
.cmp-save-btn .mi{ font-size:16px; }
.cmp-save-btn:hover{ filter:brightness(.95); }
.cmp-slide-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-2);
}
.cmp-slide-foot .cmp-save-btn{ height:38px;padding:0 16px;font-size:13.5px; }
.cmp-foot-hint{ display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fg-3); }
.cmp-foot-hint .mi{ font-size:14px; }
/* ═══ B21 (Pablo 2026-07-02) — architecture pivot styling ═══ */
/* shared .cs replacement for every native select (C4) */
.cmp-cs{ position:relative;width:100%; }
.cmp-cs > .cs-btn{ width:100%;height:38px;border-radius:9px; }
.cmp-cs > .cs-btn .cs-val{ flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-cs .cmp-cs-ph{ color:var(--fg-3);font-style:italic; }
.cmp-cs > .cs-menu{ max-height:260px;overflow:auto;z-index:9; }
.cmp-mono{ font-family:var(--mk-font-mono);font-size:12.5px; }
.cmp-hint{
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--border);color:var(--fg-2);font:500 12px/1.5 var(--mk-font-ui);margin-bottom:10px;
}
.cmp-hint .mi{ font-size:16px;color:var(--fg-3);flex:none; }
/* state-variable rows — B22 C2 (Pablo): the initial value is a TAG chip
   (visual language of the kanban tag pills), not bare mono text; the
   IMPLICIT badge is gone (no implicit feature — all vars are optional). */
.cmp-sv-init{
  margin-inline-start:auto;flex:none;max-width:38%;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent-text);
  font:600 10.5px var(--mk-font-mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* action step cards */
.cmp-steps{ display:flex;flex-direction:column;gap:8px;margin-bottom:10px; }
.cmp-step-card{ border:1px solid var(--border);border-radius:11px;background:var(--bg-2);padding:9px; }
.cmp-step-hd{ display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.cmp-step-hd .cmp-cs{ flex:1;width:auto; }
.cmp-step-n{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-text);font:700 11px var(--mk-font-ui);
}
.cmp-step-bd{ display:flex;flex-direction:column;gap:7px; }
/* effect dep / action chips */
.cmp-dep-chip{ cursor:pointer; }
.cmp-dep-chip.on{ border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text); }
/* triggers (C5 — interactive elements must configure an action) */
.cmp-trig-list{ display:flex;flex-direction:column;gap:8px;margin-bottom:6px; }
.cmp-trig-row{ display:flex;align-items:center;gap:7px; }
.cmp-trig-row .cmp-cs{ flex:1;width:auto;min-width:0; }
.cmp-trig-arrow{ flex:none;font-size:16px;color:var(--fg-3); }
.cmp-trig-open .cmp-trig-act > .cs-btn{
  border-color:color-mix(in srgb, var(--warn,#d9a400) 60%, var(--border));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--warn,#d9a400) 40%, transparent);
}
.cmp-trig-req{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;
  border:1px dashed color-mix(in srgb, var(--warn,#d9a400) 65%, var(--border));
  background:color-mix(in srgb, var(--warn,#d9a400) 8%, transparent);
  color:var(--fg-1);font:600 12px var(--mk-font-ui);
}
.cmp-trig-req .mi{ font-size:17px;color:var(--warn,#d9a400); }
.cmp-btn-warn{ border-color:color-mix(in srgb, var(--warn,#d9a400) 60%, var(--border)) !important; }
/* styles = default + exceptions (C1) */
.cmp-defstyle-row{ margin-bottom:10px; }
.cmp-defstyle-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-2);text-align:start;
  transition:border-color var(--mk-t-fast);
}
.cmp-defstyle-btn:hover{ border-color:var(--accent); }
.cmp-defstyle-l{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
.cmp-defstyle-l b{ font:600 13px var(--mk-font-ui);color:var(--fg-1); }
.cmp-defstyle-l i{ font:500 11.5px var(--mk-font-ui);font-style:normal;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-ex-list{ display:flex;flex-direction:column;gap:7px;margin-bottom:8px; }
.cmp-ex-row{ align-items:center;gap:8px; }
.cmp-ex-row.cmp-ex-drop{ outline:2px dashed var(--accent);outline-offset:2px;border-radius:10px; }
.cmp-ex-n{
  flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--bg-input);color:var(--fg-3);font:700 11px var(--mk-font-ui);
}
.cmp-ex-sum{ flex:1;min-width:0;font:500 12.5px var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-ex-warn{ color:var(--warn,#d9a400);font-style:italic; }
/* condition builder */
.cmp-cond-sum{
  display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;margin-bottom:10px;
  background:var(--accent-soft);color:var(--accent-text);font:600 12.5px/1.5 var(--mk-font-ui);
}
.cmp-cond-sum .mi{ font-size:16px;flex:none; }
.cmp-cond-sum.cmp-ex-warn{ background:color-mix(in srgb, var(--warn,#d9a400) 10%, transparent);color:var(--fg-1); }
.cmp-rules{ display:flex;flex-direction:column;gap:8px;margin:10px 0; }
.cmp-rule-card{ border:1px solid var(--border);border-radius:11px;background:var(--bg-2);padding:9px;display:flex;flex-direction:column;gap:7px; }
.cmp-rule-row{ display:flex;align-items:center;gap:7px; }
.cmp-rule-row .cmp-cs{ flex:1;width:auto;min-width:0; }
.cmp-rule-vinp{ flex:1;min-width:0; }
/* styles form — search-a-key property picker (C1) */
.cmp-prop-search{
  position:relative;display:flex;align-items:center;gap:7px;margin:10px 0;
  height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);
}
.cmp-prop-search > .mi{ font-size:18px;color:var(--fg-3); }
.cmp-prop-inp{ flex:1;min-width:0;border:0;background:transparent;outline:none;font:500 13px var(--mk-font-ui);color:var(--fg-1); }
.cmp-prop-menu{
  position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:11;max-height:280px;overflow:auto;
  border-radius:12px;border:1px solid var(--border);background:var(--bg-1);box-shadow:var(--shadow-md);padding:6px;
}
.cmp-prop-cat{
  display:flex;align-items:center;gap:6px;padding:7px 8px 4px;
  font:700 10.5px var(--mk-font-ui);letter-spacing:.05em;text-transform:none;color:var(--fg-3);
}
.cmp-prop-cat .mi{ font-size:14px; }
.cmp-prop-it{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:7px 9px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:start;
  font:500 13px var(--mk-font-ui);color:var(--fg-1);
}
.cmp-prop-it:hover{ background:var(--bg-2); }
.cmp-prop-it code{ font:500 11px var(--mk-font-mono);color:var(--fg-3); }
.cmp-props{ display:flex;flex-direction:column;gap:10px; }
/* dynamic value control — Static / Context / State / DS token */
.cmp-dynval{ display:flex;align-items:flex-start;gap:7px; }
.cmp-dynval-seg{
  flex:none;display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-input);
}
.cmp-dynval-seg button{
  width:28px;height:30px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--fg-3);
}
.cmp-dynval-seg button + button{ border-inline-start:1px solid var(--border); }
.cmp-dynval-seg button .mi{ font-size:15px; }
.cmp-dynval-seg button.on{ background:var(--accent-soft);color:var(--accent-text); }
.cmp-dynval-host{ flex:1;min-width:0;display:flex;flex-direction:column;gap:6px; }
.cmp-dynval-unit{ height:30px; }
/* DS style-doc mode */
.cmp-dsstyle{ display:flex;flex-direction:column;gap:4px;margin-top:8px; }
.cmp-doc-spec{ margin-top:10px;padding:14px;border-radius:12px;border:1px dashed var(--border);display:flex;justify-content:center; }
/* call graph (Uses / Used by) */
.cmp-graph{ display:flex;flex-direction:column;gap:6px; }
.cmp-graph-h{
  display:flex;align-items:center;gap:6px;margin-top:6px;
  font:700 10.5px var(--mk-font-ui);letter-spacing:.05em;text-transform:none;color:var(--fg-3);
}
.cmp-graph-h .mi{ font-size:14px; }
.cmp-graph-row{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-2);text-align:start;
}
.cmp-graph-row:hover{ border-color:var(--accent); }
.cmp-graph-nm{ font:600 13px var(--mk-font-ui);color:var(--fg-1);flex:none; }
.cmp-graph-meta{ flex:1;min-width:0;font:500 11.5px var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* preview first row (C7/C8/C9) — wrap ONLY when it doesn't fit; truncate long values */
.cmp-pv-row{ flex-wrap:wrap; }
.cmp-pv-row .cs-val{ max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-pv-ctxbtn{
  pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-1);color:var(--fg-1);font:600 12.5px var(--mk-font-ui);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.cmp-pv-ctxbtn:hover{ border-color:var(--accent); }
.cmp-pv-ctxbtn .mi:first-child{ color:var(--accent-text);font-size:17px; }
.cmp-pv-ctxgo{ font-size:16px;color:var(--fg-3); }
html[dir="rtl"] .cmp-pv-ctxgo{ transform:scaleX(-1); }
/* the pushed context-data slide shows OVER everything (dock 1150 / overlay 1200) */
body.cmp-dataslide-open #componentPanel{ z-index:1300; }
/* C2 — icon selector closed button: glyph in a small tile + humanized name */
.cmp-iconsel-tile{
  flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--border);
}
.cmp-iconsel-tile .cmp-iconsel-cur{ font-size:17px;color:var(--fg-1); }

.cmp-toast{
  position:fixed;z-index:1400;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;
  background:var(--fg-1);color:var(--bg-1);font:600 13px var(--mk-font-ui);box-shadow:var(--shadow-lg,var(--shadow-md));
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.cmp-toast .mi{ font-size:18px;color:var(--mk-ok,#2f9e63); }
.cmp-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

/* C8 — context type as icon (leading) + list badge */
.cmp-ctx-main .cmp-ctx-nm{ flex:1; }
.cmp-ctx-list{ font-size:15px;color:var(--fg-3);margin-inline-start:6px;flex:0 0 auto; }
/* ── B50-07 point 4 — the component ↔ form binding (the back-end bridge) ─────
   Pablo: "a component is created linked to a form for context data and then we
   can select which fields from the form will be used by elements, states,
   effects, etc." Ticking a field here pulls it in as a context key that keeps a
   pointer to the field layer, so its name and type are never retyped. */
.cmp-fbind{ border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:10px;
  background:color-mix(in srgb,var(--accent) 4%,transparent);padding:10px 11px;margin-bottom:10px;
  display:flex;flex-direction:column;gap:8px; }
.cmp-fbind-hd{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.cmp-fbind-hd .mi{ font-size:16px;color:var(--accent-text,var(--accent)); }
.cmp-fbind-hd b{ font:700 11.5px var(--mk-font-ui);color:var(--fg-1);flex:1 1 auto; }
.cmp-fbind-sel{ flex:0 1 auto;max-width:100%;padding:5px 9px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-1);color:var(--fg-1);font:600 11px var(--mk-font-ui);cursor:pointer; }
.cmp-fbind-sub{ font:500 11px/1.5 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty; }
.cmp-fbind-fields{ display:flex;flex-direction:column;gap:3px; }
.cmp-fbind-f{ display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;cursor:pointer;
  background:var(--bg-1);border:1px solid var(--divider);font:500 11.5px var(--mk-font-ui);color:var(--fg-2); }
.cmp-fbind-f:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
.cmp-fbind-f.on{ border-color:var(--accent);background:var(--accent-soft); }
.cmp-fbind-f input{ accent-color:var(--accent);flex:0 0 auto;margin:0; }
.cmp-fbind-f > .mi{ font-size:15px;color:var(--fg-3);flex:0 0 auto; }
.cmp-fbind-nm{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--fg-1); }
.cmp-fbind-ty{ font:600 10px var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);flex:0 0 auto; }
.cmp-fbind-req{ color:var(--accent-text,var(--accent));font-weight:800;flex:0 0 auto; }
.cmp-ctx-src{ font-size:14px;color:var(--accent-text,var(--accent));flex:0 0 auto;margin-inline-start:6px; }
@media (pointer:coarse){ .cmp-fbind-f{ min-height:42px; } .cmp-fbind-sel{ min-height:40px; } }
.cmp-pv-dark{ color-scheme:dark; }


/* ═══════════════════════════════════════════════════════════════════
   B23 (Pablo 2026-07-06) — editor ergonomics
   ═══════════════════════════════════════════════════════════════════ */

/* C10 — section descriptions live in an info-icon tooltip */
.cmp-sech{ position:relative; }
.cmp-sech-s{ display:none; }
.cmp-sech-i{
  border:0;background:none;padding:0;margin-inline-start:1px;display:inline-grid;place-items:center;
  cursor:pointer;color:var(--fg-3);
}
.cmp-sech-i .mi{ font-size:14px; }
.cmp-sech-i:hover{ color:var(--accent-text); }
.cmp-sech-tip{
  position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-start:0;max-width:300px;
  background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:9px 11px;
  font:500 12px/1.5 var(--mk-font-ui);color:var(--fg-2);letter-spacing:0;text-transform:none;
  box-shadow:0 12px 32px rgba(13,37,48,.16);text-wrap:pretty;
}

/* C7 — no 6-dot grip anywhere; the box itself is the drag affordance */
.cmp-el-grip{ display:none !important; }
[data-dnd-id]{ cursor:grab; }
[data-dnd-id]:active{ cursor:grabbing; }

/* C7 — action buttons live INSIDE the row box (top-end corner overlay) */
.cmp-el-row, .cmp-ctx-row{ position:relative; }
.cmp-el-row > .cmp-el-acts, .cmp-ctx-row > .cmp-el-acts{
  position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);z-index:2;
}
.cmp-el-row > .cmp-el-main{ padding-inline-end:68px; }
.cmp-ctx-row > .cmp-el-main{ padding-inline-end:42px; }
.cmp-el-row > .cmp-el-acts .cmp-el-act, .cmp-ctx-row > .cmp-el-acts .cmp-el-act{
  background:color-mix(in srgb, var(--bg-1) 55%, transparent);
}

/* C7 — indentation rails: continuous (bleed through row padding), opacity
   stepped per LEVEL left→right (leftmost strongest), same on every row */
.cmp-el-row .cmp-el-rails, .cmp-el-addchild .cmp-el-rails{ margin-block:-2px; }
.cmp-el-rails i:nth-child(1){ opacity:1; }
.cmp-el-rails i:nth-child(2){ opacity:.72; }
.cmp-el-rails i:nth-child(3){ opacity:.52; }
.cmp-el-rails i:nth-child(4){ opacity:.38; }
.cmp-el-rails i:nth-child(n+5){ opacity:.28; }

/* C5 — drag & drop on every list: drop target marker */
.cmp-drop-row{ outline:2px dashed var(--accent);outline-offset:2px;border-radius:10px; }

/* C11 — the exception number bubble IS the ordered-drag handle */
.cmp-ex-n{ cursor:grab; }

/* C4 — "where it lands" insertion line in the preview (bright traveling
   gradient, paired with the conic outline on the parent) */
.cmp-pv-insertline{
  position:absolute;z-index:6;height:4px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#ffffff,var(--accent));background-size:220% 100%;
  box-shadow:0 0 10px var(--accent),0 0 2px var(--accent);
  animation:cmpInsertSlide 1.1s linear infinite;
}
@keyframes cmpInsertSlide{ from{ background-position:0 0; } to{ background-position:220% 0; } }

/* C12 — truncate long values in the lab's dropdown selector buttons */
.cmp-cs .cs-btn .cs-val{ max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* B23 C2 — element kind tag in the tree + component-call binding form */
.cmp-el-kindtag{
  flex:0 0 auto;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-text);
}
.cmp-el-kindtag .mi{ font-size:13px; }
.cmp-bind-list{ display:flex;flex-direction:column;gap:8px; }
.cmp-bind-row{
  display:grid;grid-template-columns:minmax(90px,110px) 1fr;gap:6px 8px;align-items:center;
  border:1px solid var(--border);background:var(--bg-input);border-radius:9px;padding:8px;
}
.cmp-bind-lab{ font:600 12px var(--mk-font-ui);color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cmp-bind-val:empty{ display:none; }
.cmp-bind-val{ grid-column:1 / -1; }
.cmp-bind-src .cs-btn{ min-height:30px; }


/* ═══ B31 — panel tabs, component calls, preview pin, close confirm ═ */
/* C24 — Uses / Used by tabs (the active tab lives in the route ?tab=) */
.cmp-ptabs { display: flex; gap: 4px; margin: 8px 0 10px; border-bottom: 1px solid var(--border); }
.cmp-ptab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cmp-ptab .mi { font-size: 16px; }
.cmp-ptab:hover { color: var(--fg-1); }
.cmp-ptab.active { color: var(--accent-text); border-bottom-color: var(--accent); }
.cmp-ptab-n { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--fg-3); }
.cmp-ptab.active .cmp-ptab-n { background: var(--accent-soft); color: var(--accent-text); }
/* C25 — a tree row that CALLS another component */
.cmp-el-row.cmp-el-call .cmp-el-main { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cmp-el-row.cmp-el-call .cmp-el-ic .mi { color: var(--accent-text); }
.cmp-el-tagcall { display: inline-flex; align-items: center; gap: 3px; background: var(--accent-soft); color: var(--accent-text); }
.cmp-el-tagcall .mi { font-size: 12px; }
.cmp-el-jump .mi { color: var(--accent-text); }
/* C25 — preview pin bar: "Previewing <caller> — editing <callee>" */
.cmp-pv-pinbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 12px 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 500; position: relative; z-index: 3; }
.cmp-pv-pinbar .mi { font-size: 16px; flex: 0 0 auto; }
.cmp-pv-pintxt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pv-unpin { flex: 0 0 auto; font-size: 11.5px; padding: 4px 10px; }
/* C25 — post-save call-site review */
.cmp-callsites { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.cmp-callsites-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--fg-1); }
.cmp-callsites-t .mi { font-size: 16px; color: var(--accent-text); }
.cmp-callsites-t span:not(.mi) { flex: 1 1 auto; }
.cmp-callsites-x { flex: 0 0 auto; }
.cmp-callsites-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.cmp-callsite { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: var(--bg-1); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--fg-1); }
.cmp-callsite:hover { border-color: var(--accent); }
.cmp-callsite .mi { font-size: 16px; color: var(--fg-3); }
.cmp-callsite-go { margin-inline-start: auto; }
/* C22 — unsaved-changes confirmation popup */
.cmp-close-confirm { position: fixed; inset: 0; z-index: 11000; background: rgba(10, 16, 20, 0.42); display: flex; align-items: center; justify-content: center; }
.cmp-close-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: min(360px, calc(100vw - 48px)); background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30); }
.cmp-close-card > .mi { font-size: 22px; color: var(--accent-text); }
.cmp-close-msg { font-size: 13.5px; font-weight: 600; color: var(--fg-1); line-height: 1.45; }
.cmp-close-acts { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
/* C23 — temporarily forced-visible hidden element */
[data-cmp-force] { display: block !important; visibility: visible !important; opacity: 1 !important; outline: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
/* C16 — a disabled control disappears */
.cmp-pv-iconbtn[hidden] { display: none !important; }

/* B48 C2 — ONE always-on behaviour (Pablo): the preview is live, the gradient
   outline always follows the pointer, and the cursor follows what the element
   actually does. */
.cmp-pv-interact .cmp-pv-content [data-cmp-live]{ cursor:pointer; }
.cmp-pv-content input,.cmp-pv-content textarea{ cursor:text; }
/* the element clicked in the preview stays selected in the panel tree */
.cmp-el-row.cmp-row-sel > .cmp-el-main{ border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
/* the disclosed element announces itself once */
@keyframes cmpReveal{ from{ opacity:.25;transform:translateY(-3px) } to{ opacity:1;transform:none } }
[data-cmp-reveal]{ animation:cmpReveal .2s var(--mk-ease,ease-out); }
/* touch: the preview's own controls keep the project's 44px floor (VC2-T2) */
@media (pointer:coarse){ .cmp-pv-vps .pv-vp,.cmp-pv-vps .pv-touch,.cmp-pv-iconbtn{ min-width:44px;min-height:44px } }


/* B44 C30 — component panel TOP tab strip (Configuration / Uses / Used by) */
/* B61 (Pablo: "The tabs inside the panel for components are not well placed and
   well aligned. They should be fixed right at the bottom of the panel's header and
   they could use a bit more height. Please fix it") - the strip lives INSIDE
   .panel-body, which carries 16px of padding all round, so at rest it sat 10px+16px
   below the header with a 16px inset on each side and only became flush once you
   scrolled it into its sticky slot. It is pulled out of that padding now: full-bleed
   to the panel's edges, top edge meeting the header's bottom edge exactly, and it
   stays there because top:0 on a sticky element whose margin-top cancels the padding
   is already its resting position. Height goes 33px -> 44px (also the coarse-pointer
   floor, which this strip did not meet). */
.cmp-ptabs-top{ position:sticky;top:0;z-index:5;
  margin:-16px -16px 14px;padding:0 10px;
  background:var(--bg-1);border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 var(--border); }
.cmp-ptabs-top .cmp-ptab{ flex:1;justify-content:center;min-height:44px;padding:0 12px;
  border-bottom-width:2px;font-size:12.5px; }
/* the active underline has to sit ON the strip's own hairline, not 1px above it */
.cmp-ptabs-top .cmp-ptab.active{ margin-bottom:-1px;padding-bottom:1px; }

/* B64-Q4 — the Assets scope bar must show all five scopes at phone width
   (a clipped "Icon" is cropped critical info). Full width, equal-flex
   segments, tighter padding; the words stay (Pablo named them). */
@media (max-width:600px){
  .page-view[data-view="services-assets"] .page-h .as-scope-seg{ width:100%;display:flex; }
  .page-view[data-view="services-assets"] .page-h .as-scope-seg button{ flex:1 1 auto;min-width:0;padding:0 6px;font-size:11.5px; }
}

/* ═══ B65 W14 — Assets: no heading rows (065-045), type chip + live thumbnail (065-048) ═══ */
.page-view[data-view="services-assets"] [data-icons-mount] > .cl-sech,
.page-view[data-view="services-assets"] [data-icons-mount] > .cl-sub{ display:none; }
.page-view[data-view="services-assets"][data-sec-tab="all"] .sec-tab-view[data-sec-tab="icons"]{ margin-top:22px; }
.cl-card-nm{ display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0; }
.cl-card-nm-t{ min-width:0;overflow-wrap:anywhere; }
.cl-card-thumb{ position:relative;height:124px;margin:-18px -18px 0;overflow:hidden;
  border-radius:var(--mk-radius-lg) var(--mk-radius-lg) 0 0;border-bottom:1px solid var(--border);
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fg-3) 26%,transparent) 1px,transparent 1.5px) 0 0/14px 14px,var(--bg-1); }
.cl-thumb-in{ position:absolute;left:50%;top:50%;width:max-content;max-width:640px;transform:translate(-50%,-50%) scale(.5);transform-origin:center;pointer-events:none; }
[dir="rtl"] .cl-thumb-in{ left:50%; }
.cl-card-thumb.is-empty::after{ content:'';position:absolute;inset:0; }

/* B66 W4 (066-017) — the tab strip lives between the header and the scrolling body: nothing shows
   through it, and switching tabs slides the body in from the side of the new tab */
.fp-slide > .cmp-ptabs-top.cmp-ptabs-fixed{ position:relative;top:auto;margin:0;flex:0 0 auto;padding:0 10px;z-index:2;box-shadow:none; }
[data-cmp-tabbody].cmp-tab-in-next{ animation:cmpTabNext .26s cubic-bezier(.2,.8,.2,1); }
[data-cmp-tabbody].cmp-tab-in-prev{ animation:cmpTabPrev .26s cubic-bezier(.2,.8,.2,1); }
@keyframes cmpTabNext{ from{ transform:translateX(28px);opacity:0; } }
@keyframes cmpTabPrev{ from{ transform:translateX(-28px);opacity:0; } }
html[dir="rtl"] [data-cmp-tabbody].cmp-tab-in-next{ animation-name:cmpTabPrev; }
html[dir="rtl"] [data-cmp-tabbody].cmp-tab-in-prev{ animation-name:cmpTabNext; }
@media (prefers-reduced-motion:reduce){ [data-cmp-tabbody].cmp-tab-in-next,[data-cmp-tabbody].cmp-tab-in-prev{ animation:none; } }