/* ═══════════════════════════════════════════════════════════════════
   Mocca — Design Systems tab styling (Frontend ▸ Design Systems)
   Token-based, themes L/D with the rest of the shell. Pablo 2026-06-18.
   ═══════════════════════════════════════════════════════════════════ */

.ds-systems{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;margin:4px 0 2px;
}
.ds-syscard{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;cursor:pointer;text-align:start;
  background:var(--bg-1);border:1px solid var(--border);
  transition:border-color var(--mk-t-fast), background var(--mk-t-fast);
}
.ds-syscard:hover{border-color:var(--accent)}
.ds-syscard.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%, var(--bg-1))}
.ds-sysic{
  width:40px;height:40px;border-radius:11px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--accent);
}
.ds-sysic .mi{font-size:22px}
.ds-sysmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-sysname{font:700 15px var(--mk-font-ui);color:var(--fg-1)}
.ds-syssub{font:500 11px var(--mk-font-ui);color:var(--fg-3)}
.ds-syssub code{font:600 10px var(--mk-font-mono);color:var(--fg-2);background:var(--bg-2);padding:1px 5px;border-radius:5px}
/* DS-03 (2026-07-02): posture/theme/type chips on the system cards */
.ds-sysposture{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ds-post-chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:999px;border:1px solid var(--border);background:var(--bg-2);
  font:600 10.5px var(--mk-font-ui);color:var(--fg-2);white-space:nowrap;
}
.ds-post-chip .mi{font-size:13px;color:var(--fg-3)}
.ds-dark .ds-post-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
.ds-dark .ds-post-chip .mi{color:rgba(255,255,255,.55)}
/* DS-10 (2026-07-02): side-by-side compare strip — both systems at once */
.ds-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px;
}
@media (max-width:700px){ .ds-compare{grid-template-columns:1fr} }
.ds-compare-col{
  display:flex;flex-direction:column;gap:12px;padding:16px;
  border-radius:14px;border:1px solid var(--border);background:var(--bg-1);
  min-width:0;overflow:hidden;
}
.ds-compare-dark{
  background:
    radial-gradient(120% 90% at 20% 0%, oklch(0.32 0.09 300 / .55), transparent 60%),
    radial-gradient(120% 100% at 90% 100%, oklch(0.30 0.10 260 / .5), transparent 55%),
    oklch(0.17 0.03 285);
  border-color:oklch(0.99 0.01 285 / 0.16);
}
.ds-compare-hd{
  display:flex;align-items:center;gap:7px;
  font:700 12.5px var(--mk-font-ui);color:var(--fg-2);
}
.ds-compare-dark .ds-compare-hd{color:oklch(0.85 0.02 285)}
.ds-compare-hd .mi{font-size:16px}
.ds-compare-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.ds-swrow{display:inline-flex;gap:4px;grid-column:2/3;grid-row:2}
.ds-sw{width:16px;height:16px;border-radius:5px;border:1px solid var(--border)}
.ds-syschk{color:var(--accent);font-size:20px}

.ds-note{
  display:flex;gap:10px;align-items:flex-start;
  margin:10px 0 4px;padding:12px 14px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--border);
  font:400 12.5px/1.5 var(--mk-font-ui);color:var(--fg-2);
}
.ds-note .mi{font-size:18px;color:var(--accent);flex:none;margin-top:1px}
.ds-note strong{color:var(--fg-1);font-weight:700}

.ds-grid{display:flex;flex-direction:column;gap:12px}
/* ═══ B57-H — identity above, styles below ══════════════════════════════
   The tab reads top-to-bottom as the model reads: what the design system IS,
   then the styles that hang beneath it. Everything here rides existing tokens
   and the app's own `.wl-sumbox` / `.wl-form` grammar in the editor panel — no
   new visual vocabulary, which is the whole point of the overhaul. */
.ds-ident{border:1px solid var(--border);border-radius:16px;background:var(--bg-1);overflow:hidden;margin-bottom:6px}
.ds-ident-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ds-ident-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent-text)}
.ds-ident-ic .mi{font-size:20px}
.ds-ident-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ds-ident-t b{font:700 15px/1.2 var(--mk-font-ui);color:var(--fg-1)}
.ds-ident-t span{font:500 12px/1.3 var(--mk-font-ui);color:var(--fg-3)}
.ds-ident-rows{display:flex;flex-direction:column}
.ds-ident-row{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--divider);flex-wrap:wrap}
.ds-ident-l{min-width:74px;font:700 10px/1 var(--mk-font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ds-ident-v{font:600 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1)}
.ds-sws{display:flex;flex-wrap:wrap;gap:7px}
.ds-sw{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border:1px solid var(--border);border-radius:999px;font:600 11px/1 var(--mk-font-ui);color:var(--fg-2)}
.ds-sw i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none}
.ds-ident-pv{display:flex;flex-wrap:wrap;gap:14px;padding:14px 16px}
/* step 4 — the apps that REFERENCE this system. Lit = bound here; unlit = bound
   elsewhere and one click away from moving. */
.ds-apps{display:flex;flex-wrap:wrap;gap:7px}
.ds-app{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--border);border-radius:999px;background:var(--bg-1);color:var(--fg-3);font:600 11.5px/1.4 var(--mk-font-ui);cursor:pointer}
.ds-app .mi{font-size:15px}
.ds-app:hover{border-color:var(--accent)}
.ds-app.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent-text)}
@media (pointer:coarse){.ds-app{min-height:44px}}
.ds-pvcell{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ds-sech{display:flex;align-items:center;gap:9px;margin:18px 0 9px;font:700 10.5px/1 var(--mk-font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ds-sech .mi{font-size:17px}
.ds-sech-sub{text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg-3);opacity:.85}
.ds-newstyle{margin-inline-start:auto;text-transform:none;letter-spacing:0}
.ds-stgroup{border:1px solid var(--border);border-radius:14px;background:var(--bg-1);overflow:hidden;margin-bottom:10px}
.ds-stgroup-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font:700 12.5px/1 var(--mk-font-ui);color:var(--fg-1);background:var(--bg-2)}
.ds-stgroup-h .mi{font-size:17px;color:var(--fg-3)}
.ds-stgroup-n{margin-inline-start:auto;font:600 11px/1 var(--mk-font-ui);color:var(--fg-3)}
.ds-strow{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;min-width:0}
.ds-strow+.ds-strow{border-top:1px solid var(--divider)}
.ds-strow:hover{background:var(--bg-2)}
.ds-strow-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg-2);color:var(--fg-3)}
.ds-strow-ic .mi{font-size:16px}
.ds-strow-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ds-strow-b{display:flex;align-items:center;gap:3px;font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-1)}
.ds-strow-sep{font-size:15px;color:var(--fg-3)}
.ds-strow-d{font:500 11.5px/1.3 var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-strow-vn{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font:700 11px/1.5 var(--mk-font-ui);flex:none}
.ds-strow-vn .mi{font-size:14px}
.ds-strow-go{color:var(--fg-3);font-size:18px;flex:none}
.ds-empty{padding:18px;border:1px dashed var(--border);border-radius:12px;text-align:center;font:500 12.5px var(--mk-font-ui);color:var(--fg-3)}
/* B60 - the surface Pablo asked for: a card per COMPONENT, and under it one row per
   ELEMENT carrying the style this design system gives it. The grid is the page; the
   old grouped style list (.ds-stgroup / .ds-strow, kept above for the gate's
   markup vocabulary) is no longer rendered. */
.ds-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.ds-ccard{border:1px solid var(--border);border-radius:14px;background:var(--bg-1);overflow:hidden;display:flex;flex-direction:column}
.ds-ccard-h{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.ds-ccard-h b{font:700 13px/1 var(--mk-font-ui);color:var(--fg-1)}
.ds-ccard-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg-1);color:var(--fg-3);border:1px solid var(--border)}
.ds-ccard-ic .mi{font-size:16px}
.ds-ccard-n{margin-inline-start:auto;font:600 11px/1 var(--mk-font-ui);color:var(--fg-3)}
/* the live proof that the same entity re-skins - one preview per card now, instead
   of one strip of every component inside the identity block */
.ds-ccard-pv{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:14px;min-height:64px;
  background:var(--bg-2);border-bottom:1px solid var(--border)}
.ds-ccard-els{display:flex;flex-direction:column}
.ds-elrow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;background:transparent;
  cursor:pointer;text-align:start;min-height:42px;transition:background var(--mk-t-fast)}
.ds-elrow+.ds-elrow{border-top:1px solid var(--divider)}
.ds-elrow:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ds-elrow-n{flex:0 0 34%;min-width:0;display:flex;align-items:baseline;gap:5px;font:700 12px/1.3 var(--mk-font-ui);color:var(--fg-1)}
.ds-elrow-n i{font:600 10.5px/1 var(--mk-font-ui);font-style:normal;color:var(--fg-3)}
.ds-elrow-v{flex:1 1 auto;min-width:0;font:500 11.5px/1.35 var(--mk-font-ui);color:var(--fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-elrow.is-bare .ds-elrow-v{color:var(--fg-3);font-style:italic}
.ds-elrow.is-bare{background:color-mix(in srgb,var(--mk-danger) 5%,transparent)}
.ds-elrow.is-mention .ds-elrow-v{color:var(--fg-3)}
.ds-elrow-ix{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;flex:none;
  background:var(--accent-soft);color:var(--accent-text);font:700 10.5px/1.5 var(--mk-font-ui)}
.ds-elrow-ix .mi{font-size:13px}
.ds-elrow-ix.is-part{background:color-mix(in srgb,var(--mk-warning) 16%,transparent);color:var(--fg-2)}
.ds-elrow-go{flex:none;font-size:16px;color:var(--fg-3)}
.ds-elrow:hover .ds-elrow-go{color:var(--accent-text)}
@media (pointer:coarse){.ds-elrow{min-height:48px}}
/* the style editor's binding line: a statement of what is being dressed */
.ds-bindrow{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;background:var(--bg-2);
  font:600 12.5px/1 var(--mk-font-ui);color:var(--fg-2);margin-bottom:2px}
.ds-bindrow b{color:var(--fg-1)}
.ds-bindrow .mi{font-size:16px;color:var(--fg-3)}
.ds-bindrow i{font-style:normal;font-weight:600;font-size:11px;color:var(--fg-3);margin-inline-start:2px}
/* the header SWITCH is a dropdown now (Pablo: "it should be a dropdown because I
   want eventually more design systems") */
.ds-hd-cs[hidden]{display:none !important}
.ds-hd-cs{min-width:186px}
.ds-hd-cs .cs-btn .mi:first-child{font-size:16px;color:var(--accent-text)}
.ds-hd-item{display:flex;align-items:center;gap:8px}
.ds-hd-item .ds-hd-nm{font-weight:600}
.ds-hd-item i{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--fg-3)}
.ds-hd-item.on{background:var(--accent-soft);color:var(--accent-text)}
/* the style editor's value rows: property · value · remove */
.ds-valrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:6px;align-items:center;margin-bottom:6px}
.ds-hint{display:flex;align-items:flex-start;gap:7px;margin:0 0 4px;font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3)}
.ds-hint .mi{font-size:15px;flex:none;margin-top:1px}
/* B58 — the INDEX: one row per variant/state the COMPONENT declares, the condition
   it stands for stated beside it, and one field for the style this system picks. */
.ds-ixlist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ds-ixrow{display:grid;grid-template-columns:minmax(96px,.9fr) minmax(0,1.3fr);gap:8px;align-items:center;
  padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2)}
.ds-ixrow.is-set{border-color:var(--accent);background:var(--accent-soft)}
.ds-ixk{display:flex;flex-direction:column;gap:1px;min-width:0}
.ds-ixk b{font:700 12px/1.2 var(--mk-font-ui);color:var(--fg-1)}
.ds-ixk i{font:500 10.5px/1.3 var(--mk-font-mono);color:var(--fg-3);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the debt this system owes — an error, because a deploy is blocked on it */
.ds-gate{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:12px;background:var(--bg-2)}
.ds-gate.is-ok{display:flex;align-items:center;gap:8px;font:600 12px/1.4 var(--mk-font-ui);color:var(--fg-2)}
.ds-gate.is-ok .mi{font-size:17px;color:var(--mk-ok)}
.ds-gate.is-bad{border-color:color-mix(in srgb,var(--mk-danger) 55%,transparent);
  background:color-mix(in srgb,var(--mk-danger) 8%,var(--bg-1))}
.ds-gate.is-warn{border-color:color-mix(in srgb,var(--mk-warning) 55%,transparent);
  background:color-mix(in srgb,var(--mk-warning) 9%,var(--bg-1))}
.ds-gate-h{display:flex;align-items:center;gap:7px;font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-1)}
.ds-gate-h .mi{font-size:17px}
.ds-gate.is-bad .ds-gate-h .mi{color:var(--mk-danger)}
.ds-gate.is-warn .ds-gate-h .mi{color:var(--mk-warning)}
.ds-gate-h span{margin-inline-start:auto;font:700 11px/1.6 var(--mk-font-mono);color:var(--fg-3)}
.ds-gate-s{margin:5px 0 8px;font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty}
.ds-gate-l{display:flex;flex-wrap:wrap;gap:5px}
.ds-gate-i{padding:2px 8px;border-radius:999px;background:var(--bg-1);border:1px solid var(--border);
  font:600 10.5px/1.6 var(--mk-font-ui);color:var(--fg-2)}
.ds-gate-i.is-hard{border-color:color-mix(in srgb,var(--mk-danger) 45%,transparent);color:var(--mk-danger)}
/* a style row that owes a default, and a partly-answered index */
.ds-strow.is-bad .ds-strow-ic{background:color-mix(in srgb,var(--mk-danger) 14%,transparent);color:var(--mk-danger)}
.ds-strow-vn.is-part{background:color-mix(in srgb,var(--mk-warning) 16%,transparent);color:var(--fg-2)}

.ds-comp{
  border-radius:16px;background:var(--bg-1);border:1px solid var(--border);
  overflow:hidden;
}
.ds-comp-hd{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--bg-2);
}
.ds-comp-ic{
  width:28px;height:28px;border-radius:8px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-3);color:var(--fg-2);
}
.ds-comp-ic .mi{font-size:17px}
.ds-comp-nm{font:700 14px var(--mk-font-ui);color:var(--fg-1)}
.ds-comp-meta{margin-inline-start:auto;font:500 11px var(--mk-font-mono);color:var(--fg-3)}

.ds-comp-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:18px;padding:18px 16px;
}
.ds-preview{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:18px;border-radius:12px;min-height:90px;
  background:
    linear-gradient(45deg,var(--bg-2) 25%,transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg,var(--bg-2) 25%,transparent 25%) -8px 0/16px 16px,
    var(--bg-1);
}
.ds-ov{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ds-ovhd,.ds-ovrow{
  display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr;gap:8px;align-items:center;
  padding:8px 10px;
}
.ds-ovhd{
  background:var(--bg-2);border-bottom:1px solid var(--border);
  font:600 10px var(--mk-font-ui);letter-spacing:.04em;text-transform:none;color:var(--fg-3);
}
.ds-ovrow{border-bottom:1px solid var(--border)}
.ds-ovrow:last-child{border-bottom:0}
.ds-ovchild{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mk-font-ui);color:var(--fg-1);min-width:0}
.ds-ovchild .mi{font-size:15px;color:var(--fg-3)}
.ds-mention{font:600 9px var(--mk-font-ui);padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.ds-ovval{font:500 11px var(--mk-font-mono);color:var(--fg-1)}
.ds-ovother{color:var(--fg-3)}

/* Purple Glass active → dark aurora preview backdrop so the glass shows. */
.ds-dark .ds-preview{
  background:
    radial-gradient(60% 60% at 0% 0%, oklch(0.40 0.14 285 / 0.55), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, oklch(0.38 0.13 305 / 0.55), transparent 60%),
    oklch(0.16 0.05 285);
}

@media (max-width:760px){
  .ds-comp-body{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ds-ovhd,.ds-ovrow{grid-template-columns:1fr;gap:2px}
  .ds-ovother{display:none}
  .ds-ovhd .ds-ovother{display:none}
}

/* ══ B61 — the design-system tab is a WALK, not a form ════════════════════
   Pablo: "I want to be standing on a design system and seeing the same list of
   components I would see in the Components tab. When I click on a component, the
   panel opens showing me all the elements (nothing else really). When I click on
   one of the elements, a new slide opens in the panel where I can set the default
   and all the other variant styles. But I have to click on each box... the new
   slide in the panel to configure the style would be like a UI layout with very
   standard ways of editing them. Maybe use figma as a benchmark."
   Card -> elements -> a box per style -> a grouped, typed editor with a live chip. */
.ds-ccard-click{ width:100%;text-align:start;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:10px; }
.ds-ccard-click:hover{ border-color:var(--accent); }
.ds-ccard-click:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
.ds-ccard-go{ font-size:18px;color:var(--fg-3);margin-inline-start:auto; }
[dir="rtl"] .ds-ccard-go{ transform:scaleX(-1); }
.ds-ccard-f{ display:flex;align-items:center;font:600 10.5px/1.4 var(--mk-font-ui); }
.ds-cc-bare,.ds-cc-ok{ display:inline-flex;align-items:center;gap:5px; }
.ds-cc-bare{ color:var(--mk-danger,#d64545); }
.ds-cc-ok{ color:var(--mk-ok,#2f9e63); }
.ds-cc-bare .mi,.ds-cc-ok .mi{ font-size:14px; }
/* the component panel: elements, and nothing else */
.ds-ellist{ display:flex;flex-direction:column;gap:6px;margin-top:4px; }
.ds-ellist .ds-elrow{ width:100%; }
/* the element slide: one box per style you can set */
.ds-boxes{ display:flex;flex-direction:column;gap:6px;margin:4px 0 12px; }
.ds-box{ width:100%;text-align:start;cursor:pointer;font:inherit;color:inherit; }
.ds-box:hover{ border-color:var(--accent); }
.ds-box.is-empty .wl-sumbox-s{ color:var(--fg-3);font-style:italic; }
.ds-box-ic{ font-size:17px;color:var(--accent-text,var(--accent));flex:0 0 auto; }
/* the editor: what the box stands for, a live chip, then typed groups */
.ds-cond{ display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;
  background:var(--bg-2);margin-bottom:12px;flex-wrap:wrap; }
.ds-cond .mi{ font-size:16px;color:var(--accent-text,var(--accent)); }
.ds-cond b{ font:700 12.5px var(--mk-font-ui);color:var(--fg-1); }
.ds-cond i{ font:500 11px var(--mk-font-ui);font-style:normal;color:var(--fg-3); }
.ds-live{ display:flex;align-items:center;gap:12px;padding:18px 14px;margin-bottom:14px;
  border-radius:12px;border:1px dashed var(--border);
  background:repeating-conic-gradient(var(--bg-2) 0% 25%, var(--bg-1) 0% 50%) 0 0/16px 16px; }
.ds-live-l{ font:700 9.5px/1 var(--mk-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);flex:0 0 auto; }
.ds-live-chip{ display:inline-flex;align-items:center;justify-content:center; }
.ds-group{ border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden; }
.ds-group-h{ display:flex;align-items:center;gap:7px;padding:9px 12px;
  background:var(--bg-2);border-bottom:1px solid var(--border);
  font:700 11.5px var(--mk-font-ui);color:var(--fg-1); }
.ds-group-h .mi{ font-size:16px;color:var(--fg-3); }
.ds-group-b{ display:flex;flex-direction:column;gap:11px;padding:12px; }
.ds-f{ display:flex;flex-direction:column;gap:6px; }
.ds-f > label{ font:600 10.5px/1.3 var(--mk-font-ui);color:var(--fg-3); }
/* colour: curated swatches + an explicit unset — never a free hex box */
.ds-swrow{ display:flex;flex-wrap:wrap;gap:6px; }
.ds-sw{ width:26px;height:26px;border-radius:7px;border:1px solid var(--border);cursor:pointer;
  background:var(--sw,#fff);padding:0;display:grid;place-items:center;
  transition:transform var(--mk-t-fast),box-shadow var(--mk-t-fast); }
.ds-sw:hover{ transform:translateY(-1px); }
.ds-sw.on{ box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--accent); }
.ds-sw-none{ background:var(--bg-2);color:var(--fg-3); }
.ds-sw-none .mi{ font-size:14px; }
/* a length: slider and number are two views of one value */
.ds-numrow{ display:flex;align-items:center;gap:8px; }
.ds-range{ flex:1;min-width:0;accent-color:var(--accent);height:22px; }
.ds-num{ width:66px;flex:0 0 auto;font-variant-numeric:tabular-nums; }
.ds-unit{ font:600 10.5px var(--mk-font-ui);color:var(--fg-3);flex:0 0 auto;min-width:16px; }
.ds-clear{ flex:0 0 auto; }
.ds-seg{ width:100%; }
.ds-seg button{ flex:1;font-size:11px;text-transform:none; }
/* B61 (Pablo: "This dropdown doesn't need to be this wide") — the header system
   picker was sized for the longest name in the menu; it fits its own value now. */
.ds-hd-cs > .cs-btn{ min-width:0;width:auto; }
.ds-hd-cs .cs-val{ max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ds-hd-cs > .cs-menu{ min-width:236px; }