/* =========================================================================
   MODULE STUDIO — APP STYLES
   Tokens come from css/tokens.css (Figma variables); see docs/DESIGN_SYSTEM_TOKENS.md
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
@import url('./tokens.css');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Base reset (the part of the browser reset the app relies on) */
*, ::before, ::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
summary { display: list-item; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
[hidden] { display: none; }

input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

body {
  font-family: var(--typography-family-body);
  background-color: var(--neutral-bg-main);
  background-image: radial-gradient(var(--ds-canvas-dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 0 0;
  color: var(--neutral-text-main);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-size: 12px;
  line-height: 1.5;
}

/* Custom Sleek Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d0d3dc;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b0b4c0;
}

/* Canvas Workspace Dot Pattern */

/* Artboard Shadow Frame (Exact Proportions from Reference) */

/* Floating Card Base */

/* Pill Action Buttons in Header */

/* Round Icon Buttons */

/* Aspect Ratio Select Box */

/* Layer Stack Card (Abstract Studio Aesthetic) */

/* Layer Hidden & Dragging States */

/* Layer Thumbnail Box */

/* Shape Icon Buttons Grid */

/* Numeric Scrubbable Input (Light Minimalist) */

/* Range Inputs */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: #dcdfe6;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #18181f;
  border: 1px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: ew-resize;
  transition: transform 0.1s ease, background 0.1s ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* Mode Segment Buttons (Trazo vs Relleno) */

/* Micro Toggle Switches */

/* Modifiers Stack Card (Light Theme) */

/* Segmented Buttons */

/* Floating Bottom Zoom HUD Pill */

/* Draggable Canvas Overlay Handles */

/* =========================================================================
   CONTROLS RAIL (ABSTRACT STUDIO DOCK)
   Vertical column of circular black buttons on the right edge
   ========================================================================= */

/* Active modifier dot (indicating modifier is ON in composition) */

/* =========================================================================
   FLOATING INSPECTOR FLYOUT CARD
   Floats cleanly to the left of the vertical rail
   ========================================================================= */

.inspector-flyout-card {
  position: absolute;
  top: 0;
  right: var(--flyout-right);
  width: 300px; /* 24 padding + 252 of content */
  max-height: calc(100% - var(--spacing-6));
  background: var(--neutral-bg-light);
  border: none;
  border-radius: var(--border-radius-1);
  box-shadow: var(--elevation-5x);
  padding: var(--spacing-6);
  overflow-y: auto;
  z-index: 30;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

.inspector-flyout-card.is-closed {
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px) scale(0.97);
  pointer-events: none;
}

.close-flyout-btn {
  width: var(--sizing-6);
  height: var(--sizing-6);
  border-radius: var(--border-radius-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-icon-main);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.close-flyout-btn i { font-size: var(--sizing-4); }
.close-flyout-btn:hover {
  background: var(--neutral-bg-main);
  color: var(--neutral-text-main);
}

/* =========================================================================
   REFERENCE 1 (MODULE) & REFERENCE 2 (LAYOUT STRUCTURE) WIDGET STYLES
   ========================================================================= */

.ph-svg { width: 1em; height: 1em; flex: none; }
.shape-circle-btn .ph-svg, .ds-dropdown-item .ph-svg, .ds-dropdown-current .ph-svg { width: var(--sizing-4); height: var(--sizing-4); }
.layer-preview-box .ph-glyph { font-size: var(--sizing-7); font-weight: var(--typography-weight-400); }
.ph-glyph { font-size: var(--font-size-md); font-weight: var(--typography-weight-500); line-height: 1; flex: none; }
.ds-dropdown-item .ph, .ds-dropdown-current .ph { font-size: var(--sizing-4); flex: none; }
.ds-dropdown-current { gap: var(--spacing-3); }
.shape-grid {
  display: grid;
  grid-template-columns: repeat(6, var(--sizing-7));
  gap: var(--spacing-3);
  justify-content: start;
}
.shape-grid > .row-start { grid-column-start: 1; } /* each family of shapes starts a new row */

.shape-circle-btn {
  width: var(--sizing-7);
  height: var(--sizing-7);
  border-radius: var(--border-radius-3);
  border: var(--border-weight-1) solid var(--neutral-interactive-default);
  background: var(--neutral-bg-light);
  color: var(--neutral-interactive-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}
.shape-circle-btn:hover {
  background: var(--neutral-interactive-hover-inverted);
}
.shape-circle-btn.active {
  background: var(--neutral-interactive-default);
  color: var(--neutral-icon-inverted);
  border-color: var(--neutral-interactive-default);
}
.shape-circle-btn:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

/* =========================================================================
   WARNING ALERT BOX (Design System Standard for Incompatible Principles)
   ========================================================================= */

/* =========================================================================
   DS INSPECTOR CONTROLS (Figma: Web apps / Abstract studio)
   Header, tags, slider + value box, toggle item. Reusable across cards.
   All values come from css/tokens.css (Figma variables).
   ========================================================================= */

.ds-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5); /* 16 inside a group; the dividers add 8 on each side, so 24 around them (Figma) */
  font-family: var(--typography-family-body);
  color: var(--neutral-text-main);
}
.ds-card.hidden { display: none !important; }

.ds-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3); /* 16 + 8 = the 24 of the design under the title */
}
.ds-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}
.ds-card-title-text {
  font-size: var(--font-size-sm);
  font-weight: var(--typography-weight-600);
  line-height: var(--line-height-small);
  color: var(--neutral-text-main);
  white-space: nowrap;
}
.ds-badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sizing-4);
  padding: 0 var(--spacing-2);
  border-radius: var(--border-radius-1);
  background: var(--neutral-bg-strong);
  color: var(--neutral-text-main);
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-600);
  line-height: var(--line-height-small);
}

/* Switch 32x20 (library "input-switch"): off = white track, dark knob on the left; on = dark track, white knob on the right */
.ds-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch-track {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--sizing-7);
  height: var(--sizing-5);
  padding: 0 var(--spacing-1);
  border-radius: var(--border-radius-full);
  background: var(--neutral-interactive-default-inverted);
  border: var(--border-weight-1) solid var(--neutral-border-strong);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ds-switch:hover .ds-switch-track { background: var(--neutral-interactive-hover-inverted); }
.ds-switch-track::before {
  content: "";
  width: var(--sizing-4);
  height: var(--sizing-4);
  border-radius: 100px;
  background: var(--neutral-interactive-default);
  transition: transform 0.15s ease;
}
.ds-switch input:checked + .ds-switch-track { background: var(--neutral-interactive-active); border-color: var(--neutral-interactive-default); }
.ds-switch input:checked + .ds-switch-track::before { background: var(--neutral-interactive-default-inverted); transform: translateX(var(--sizing-3)); }
.ds-switch input:focus-visible + .ds-switch-track { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

/* Field + overline label */
.ds-field { display: flex; flex-direction: column; gap: var(--spacing-3); min-width: 0; flex: 1; }
.ds-label--overline { font-weight: var(--typography-weight-600); letter-spacing: 0.2px; text-transform: uppercase; color: var(--neutral-text-soft); } /* Overline style: the colour field */
.ds-field:has(> .ds-dropdown) { gap: var(--spacing-2); }
.ds-field:has(> .ds-tags) { gap: var(--spacing-4); }
/* Row field (Figma): the label on the left, a 132 px dropdown on the right */
.ds-field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.ds-field--row > .ds-label, .ds-field--row > .ds-title-row { flex: 1; min-width: 0; }
.ds-field--row > .ds-dropdown { flex: none; width: 132px; }
.ds-field--row .ds-dropdown-trigger .ds-dropdown-current > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-field--row .ds-dropdown-item { white-space: normal; }
/* Label style (Figma): 10 / 500, soft */
.ds-label {
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-500);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-label);
  color: var(--neutral-text-main); /* control labels in the main tone; the group titles (overline) stay soft */
}

/* Tags (selector chips) */
.ds-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.ds-tag {
  box-sizing: border-box;
  height: var(--sizing-6);
  padding: 0 var(--spacing-4);
  border-radius: var(--border-radius-1);
  border: var(--border-weight-1) solid var(--neutral-interactive-default);
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-text-main);
  font-family: inherit;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-small);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-tag:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-tag.active { background: var(--neutral-interactive-default); color: var(--neutral-text-main-inverted); }
.ds-tag:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

/* Slider + value box */
.ds-slider { display: flex; align-items: center; gap: var(--spacing-4); }
/* Figma "input-range" + "input-text": label, then the 20 px track; the 56 x 32 value box sits at the right, on the track's line */
.ds-field:has(> .ds-slider) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-3);
  align-items: end;
}
.ds-field:has(> .ds-slider) > .ds-label { grid-column: 1; grid-row: 1; }
.ds-field:has(> .ds-slider) > .ds-slider { display: contents; }
.ds-field:has(> .ds-slider) .ds-slider input[type="range"] { grid-column: 1; grid-row: 2; width: 100%; }
.ds-field:has(> .ds-slider) .ds-value { grid-column: 2; grid-row: 1 / span 2; }
.ds-slider input[type="range"] {
  --fill: 0%;
  flex: 1;
  min-width: 0;
  height: var(--sizing-6); /* the hit area is taller than the 2 px track and the 16 px knob */
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* 2 px track: ink up to the value (the --fill share), muted after it */
.ds-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: var(--border-radius-full);
  background: linear-gradient(to right, var(--neutral-interactive-default) var(--fill), var(--neutral-bg-muted) var(--fill));
}
.ds-slider input[type="range"]::-moz-range-track { height: 2px; border-radius: var(--border-radius-full); background: var(--neutral-bg-muted); }
.ds-slider input[type="range"]::-moz-range-progress { height: 2px; border-radius: var(--border-radius-full); background: var(--neutral-interactive-default); }
.ds-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--sizing-4);
  height: var(--sizing-4);
  margin-top: -7px;
  border: var(--border-weight-1) solid var(--neutral-border-strong);
  border-radius: var(--border-radius-full);
  background: var(--neutral-interactive-default);
  box-shadow: var(--elevation-1x);
}
.ds-slider input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--sizing-4);
  height: var(--sizing-4);
  border: var(--border-weight-1) solid var(--neutral-border-strong);
  border-radius: var(--border-radius-full);
  background: var(--neutral-interactive-default);
  box-shadow: var(--elevation-1x);
}
.ds-slider input[type="range"]:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
/* Value box = the library's input-text box: 32 high, radius 4, dark border, DM Mono 12 */
.ds-value {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 56px;
  height: var(--sizing-7);
  padding: 0 var(--spacing-2);
  border: var(--border-weight-1) solid var(--neutral-interactive-default);
  border-radius: var(--border-radius-1);
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-text-main);
  font-family: var(--typography-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--typography-weight-500);
  line-height: var(--line-height-body);
  text-align: center;
  outline: none;
}
.ds-value:focus { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

/* Toggle item (checkbox row) */
.ds-toggle-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  min-width: 100px;
  padding: var(--spacing-3) 0;
  cursor: pointer;
}
.ds-toggle-label { flex: 1; font-size: var(--font-size-sm); line-height: var(--line-height-body); color: var(--neutral-text-main); }
.ds-checkbox {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--sizing-5);
  height: var(--sizing-5);
  margin: 0;
  border: var(--border-weight-1) solid var(--neutral-border-strong);
  border-radius: var(--border-radius-1);
  background: var(--neutral-bg-light);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ds-checkbox:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-checkbox:checked { background: var(--neutral-interactive-default); border-color: var(--neutral-interactive-default); }
.ds-checkbox:checked:hover { background: var(--neutral-interactive-hover); border-color: var(--neutral-interactive-default); }
.ds-checkbox:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--neutral-icon-inverted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ds-checkbox:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

.ds-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-small);
  color: var(--neutral-text-soft);
}
.ds-toggles { display: flex; flex-direction: column; }

/* Long labels truncate with an ellipsis (as in the mockup) */
.ds-label-clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-field.hidden { display: none !important; }

/* Accent color row (swatch + hex) under a highlight toggle */
.ds-color-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  transition: opacity 0.15s ease;
}
.ds-color-row .ds-swatch { order: 1; }
.ds-color-row .ds-color-hex { order: 2; }
.ds-color-row .ds-color-clear { order: 3; }
/* Module: label on the left, swatch and hex on the right, on one line (Figma inventory) */
.ds-field:has(> .ds-color-picker) { flex-direction: row; align-items: center; gap: var(--spacing-5); }
.ds-field:has(> .ds-color-picker) > .ds-label { flex: 1; }
.ds-color-picker { display: flex; align-items: center; gap: var(--spacing-3); }
.ds-color-row.is-dimmed .ds-color-clear { display: none; }
.ds-color-clear {
  display: grid; place-items: center; flex-shrink: 0;
  width: var(--sizing-6); height: var(--sizing-6); padding: 0;
  border: 0; border-radius: var(--border-radius-full);
  background: transparent; color: var(--neutral-icon-main);
  font-size: var(--font-size-sm); cursor: pointer;
}
.ds-color-clear:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-color-clear:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.ds-color-label { flex: 1; font-size: var(--font-size-sm); line-height: var(--line-height-body); color: var(--neutral-text-subtle); }
.ds-color-hex {
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-500);
  letter-spacing: var(--letter-spacing-label);
  color: var(--neutral-text-soft);
}
.ds-swatch {
  position: relative;
  box-sizing: border-box;
  width: var(--sizing-6);
  height: var(--sizing-6);
  flex-shrink: 0;
  border: var(--border-weight-1) solid var(--neutral-border-main);
  border-radius: var(--border-radius-1);
  overflow: hidden;
  cursor: pointer;
}
.ds-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ds-swatch-fill { display: block; width: 100%; height: 100%; }

/* Select (dropdown) and Advanced section */
.ds-dropdown { position: relative; }
.ds-dropdown-trigger {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
  width: 100%; height: var(--sizing-7);
  padding: 0 var(--spacing-4);
  border-radius: var(--border-radius-1);
  border: var(--border-weight-1) solid var(--neutral-interactive-default);
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-text-main);
  font-family: inherit; font-size: var(--font-size-sm);
  cursor: pointer;
}
.ds-dropdown-trigger:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-dropdown-trigger[aria-expanded="true"] { border-color: var(--neutral-interactive-default); }
.ds-dropdown-trigger:focus-visible, .ds-dropdown-item:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.ds-dropdown-current { display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }
.ds-dropdown-menu {
  position: fixed; z-index: 60; /* floats above the panel; its place is set when it opens */
  display: flex; flex-direction: column; gap: var(--spacing-1);
  padding: var(--spacing-2);
  background: var(--neutral-bg-light);
  border-radius: var(--border-radius-1);
  box-shadow: var(--elevation-3x);
  max-height: 320px; overflow-y: auto;
}
.ds-dropdown-menu.hidden { display: none; }
.ds-dropdown-item {
  display: flex; align-items: center; gap: var(--spacing-3);
  min-height: var(--sizing-7);
  padding: 0 var(--spacing-4);
  border: 0; border-radius: var(--border-radius-1);
  background: transparent; color: var(--neutral-text-main);
  font-family: inherit; font-size: var(--font-size-xs); line-height: var(--line-height-small); text-align: left; cursor: pointer;
}
.ds-dropdown-item:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-dropdown-item.active { background: var(--neutral-interactive-default); color: var(--neutral-text-main-inverted); }
.ds-icon-grid { width: 20px; height: 20px; flex: none; }
.ds-advanced > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
  list-style: none; cursor: pointer;
  padding: var(--spacing-2) var(--spacing-1); /* 4 / 2, no line under it (Figma accordion item) */
  font-size: var(--font-size-xs); font-weight: var(--typography-weight-500); letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-tight);
  color: var(--neutral-text-main);
}
.ds-advanced > summary::-webkit-details-marker { display: none; }
.ds-advanced > summary i { order: 2; font-size: var(--sizing-4); transition: transform 0.15s ease; }
.ds-advanced[open] > summary i { transform: rotate(180deg); }
.ds-advanced > .ds-stack { padding-top: var(--spacing-5); }
.ds-hint { margin: 0; font-size: var(--font-size-xs); line-height: var(--line-height-body); color: var(--neutral-text-subtle); }

/* Visible notice when a draw fails (instead of a silent blank canvas) */
.render-error {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-6);
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--spacing-4);
  background: var(--neutral-interactive-default);
  color: var(--neutral-text-main-inverted);
  font-size: 13px;
  line-height: var(--line-height-body);
  box-shadow: var(--elevation-3x);
  z-index: 100;
}
.render-error[hidden] { display: none; }

/* Button group (Figma "btn-group"): 40 high with 4 around 32 high buttons; the active one is ink */
.ds-btn-group {
  display: flex;
  box-sizing: border-box;
  height: var(--sizing-9);
  padding: var(--spacing-2);
  border: var(--border-weight-1) solid var(--neutral-border-main);
  border-radius: var(--border-radius-3);
  background: var(--neutral-bg-main);
  overflow: hidden;
}
.ds-btn-group__button {
  flex: 1 0 0;
  min-width: 80px;
  padding: 0 var(--spacing-3);
  border: none;
  border-radius: 0;
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-text-main);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-small);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-btn-group__button:first-child { border-radius: var(--border-radius-2) 0 0 var(--border-radius-2); }
.ds-btn-group__button:last-child { border-radius: 0 var(--border-radius-2) var(--border-radius-2) 0; }
.ds-btn-group__button:hover:not(.active) { background: var(--neutral-interactive-hover-inverted); }
.ds-btn-group__button.active { background: var(--neutral-interactive-active); color: var(--neutral-text-main-inverted); }
.ds-btn-group__button:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: calc(var(--spacing-1) * -1); }

/* Vertical stack of fields inside a card (sub-panels) */
.ds-stack { display: flex; flex-direction: column; gap: var(--spacing-5); }
/* two sliders in a row are 24 apart (the other controls, 16) */
.ds-field:has(> .ds-slider) + .ds-field:has(> .ds-slider) { margin-top: var(--spacing-3); }
.ds-stack.hidden { display: none !important; }
/* a hint that belongs to the fields above it */
.ds-stack > .ds-hint { margin-top: calc(var(--spacing-2) * -1); }

/* Snackbar (Figma "snackbar", warning): dependency notice shown inside a card */
.ds-snackbar {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  box-sizing: border-box;
  padding: var(--spacing-4);
  border: var(--border-weight-1) solid var(--neutral-border-main);
  border-radius: var(--border-radius-2);
  background: var(--neutral-bg-main);
  color: var(--neutral-text-main);
}
/* the warning icon: a soft disc inside a ring (Figma snackbar) */
.ds-snackbar__icon { flex-shrink: 0; display: grid; place-items: center; box-sizing: border-box; padding: var(--spacing-2); border: 2px solid var(--warning-border-soft); border-radius: 99999px; }
.ds-snackbar__icon-inner { display: grid; place-items: center; width: var(--sizing-5); height: var(--sizing-5); border-radius: 99999px; background: var(--warning-bg-soft); }
.ds-snackbar i { font-size: var(--sizing-4); color: var(--warning-icon-strong); }
.ds-snackbar p { margin: 0; flex: 1; font-size: var(--font-size-xs); font-weight: var(--typography-weight-400); line-height: 1.7; }
.ds-snackbar.hidden { display: none !important; }

/* Color picker (swatch + hex), large swatch */
.ds-color-picker { display: flex; align-items: center; gap: var(--spacing-3); }

/* =========================================================================
   APP SHELL (Figma: Abstract Studio editor, node 5763:1692)
   Header, buttons, select, view options, layers panel, rail, status.
   ========================================================================= */

/* Application header (68 high, 26 side padding) */
.ds-app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 var(--spacing-5);
  flex-shrink: 0;
  z-index: 40; /* above the controls rail (35), so the Download menu opens over it */
  user-select: none;
}
.ds-brand { display: flex; align-items: center; gap: 14px; }
.ds-brand-icon { display: grid; place-items: center; width: var(--sizing-9); height: var(--sizing-9); color: var(--neutral-text-main); }
.ds-brand-icon i { font-size: var(--sizing-9); }
.ds-brand-title {
  font-family: var(--typography-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--typography-weight-600);
  line-height: var(--line-height-body);
  color: var(--neutral-text-main);
  white-space: nowrap;
}
.ds-export-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-3); }
.ds-canvas-controls { display: flex; align-items: center; gap: var(--spacing-3); }

/* Button (Figma "button", neutral): label + 16px icon */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  box-sizing: border-box;
  height: var(--sizing-7);
  padding: 0 var(--spacing-4);
  border: none;
  border-radius: var(--border-radius-3);
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-text-main);
  font-family: var(--typography-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-500);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ds-btn i { font-size: var(--sizing-4); color: var(--neutral-icon-main); }
.ds-btn:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-btn:active { background: var(--neutral-interactive-active-inverted); }
.ds-btn:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.ds-btn:disabled, .ds-btn.opacity-40 { background: var(--neutral-interactive-disabled); color: var(--neutral-text-subtle); }

/* Icon button 32x32 (Figma "buttonIcon") */
.ds-icon-btn {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--sizing-7);
  height: var(--sizing-7);
  border: none;
  border-radius: var(--border-radius-3);
  background: var(--neutral-interactive-default-inverted);
  color: var(--neutral-icon-main);
  font-size: var(--sizing-4);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-icon-btn:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-icon-btn.active { background: var(--neutral-interactive-default); color: var(--neutral-icon-inverted); }
.ds-icon-btn.active:hover { background: var(--neutral-interactive-hover); }
.ds-icon-btn:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }

/* Select (Figma "input-select"): 32 high box, radius 4, caret at the right */
.ds-select {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100px;
  height: var(--sizing-7);
  border: var(--border-weight-1) solid var(--neutral-border-strong);
  border-radius: var(--border-radius-1);
  background: var(--neutral-interactive-default-inverted);
  overflow: hidden;
}
.ds-select select {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 var(--spacing-4);
  border: none;
  background: transparent;
  color: var(--neutral-text-main);
  font-family: var(--typography-family-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-small);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.ds-select:hover { background: var(--neutral-interactive-hover-inverted); }
.ds-select:focus-within { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.ds-select__button {
  display: grid;
  place-items: center;
  width: var(--sizing-7);
  height: 100%;
  color: var(--neutral-icon-main);
  font-size: var(--sizing-4);
  pointer-events: none;
}

/* Guide colour: an icon button that opens the colour picker; a small dot at its corner shows the chosen colour */
.ds-guide-btn { position: relative; cursor: pointer; }
.ds-guide-btn::after {
  content: "";
  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
  border-radius: var(--border-radius-full);
  background: var(--guide-color, #f24822);
}
.ds-guide-btn input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Workspace: layers | canvas column | rail, with the controls panel floating over the right edge */
.ds-workspace {
  --flyout-right: 62px; /* 16 margin + 36 rail (32 button + 2 + 2) + 10 air */
  position: relative;
  display: flex;
  flex: 1;
  gap: var(--spacing-6);
  min-height: 0;
  padding: 0 var(--spacing-5) var(--spacing-6);
  overflow: clip;
  overflow-clip-margin: 6px; /* the ring and the shadows of the buttons at the edge are not cut */
}
.ds-canvas-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-5);
  min-width: 0;
}
.ds-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; } /* the artboard sits in the middle of the free height */

/* Artboard frame (Figma "Moiré artwork": white 20px border, radius 20, elevation 5x) */
.ds-artboard {
  display: inline-block;
  box-sizing: content-box;
  border: 10px solid var(--neutral-bg-light); /* the white frame of the canvas and of the module canvas, 10 px (Figma "Moiré artwork") */
  border-radius: var(--border-radius-1);
  box-shadow: var(--elevation-1x);
  overflow: hidden;
  line-height: 0;
}
.artboard-container {
  display: block;
  background-color: var(--neutral-bg-main);
  transition: background-color 0.2s ease;
}

/* Layers panel (320 wide): the layers on top, the Art configuration log below, half and half */
.ds-layers-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-4);
  box-sizing: border-box;
  width: 320px;
  min-height: 0;
  padding: var(--spacing-3) 0;
  border-radius: var(--border-radius-1);
  background: var(--neutral-bg-strong);
  user-select: none;
}
.ds-layers-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: var(--sizing-7);
  padding: 0 var(--spacing-5);
}
.ds-layers-count { display: flex; align-items: center; gap: 10px; }
.ds-layers-actions { display: flex; align-items: center; gap: 8px; }
.ds-layers-title {
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-600);
  letter-spacing: 0.2px;
  line-height: var(--line-height-tight);
  color: var(--neutral-text-main);
}
.ds-layers-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Layer row (Figma "Layer"): 64 high, 40 preview, a line under each one; the active one is ink */
.layer-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  box-sizing: border-box;
  height: 64px;
  padding: 0 var(--spacing-5) 0 var(--spacing-3);
  flex-shrink: 0;
  border: 0;
  border-bottom: var(--border-weight-1) solid var(--neutral-border-main);
  background: transparent;
  color: var(--neutral-text-main);
  cursor: pointer;
  transition: background 0.15s ease;
}
.layer-card:hover { background: var(--neutral-interactive-hover-inverted); }
.layer-card.is-active {
  border-bottom-color: var(--neutral-interactive-default);
  background: var(--neutral-interactive-active);
  color: var(--neutral-text-main-inverted);
}
.layer-card:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.layer-card.is-hidden { opacity: 0.45; }
.layer-card.is-dragging { opacity: 0.3; transform: scale(0.97); }
.layer-card.drag-over { box-shadow: inset 0 0 0 var(--border-weight-2) var(--neutral-interactive-default); }
.layer-preview-box .ph { font-size: var(--sizing-9); }
.layer-preview-box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--sizing-9);
  height: var(--sizing-9);
  border-radius: var(--border-radius-1);
  color: var(--neutral-interactive-default);
  font-size: var(--sizing-7);
}
.layer-card.is-active .layer-preview-box { color: var(--neutral-icon-inverted); }
.layer-card.is-active:hover { background: var(--neutral-interactive-hover); }
.layer-copy { display: flex; flex-direction: column; gap: var(--spacing-1); flex: 1; min-width: 0; line-height: var(--line-height-small); }
.layer-title {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--typography-weight-400);
  line-height: var(--line-height-small);
  color: var(--neutral-text-main);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-card.is-active .layer-title { color: var(--neutral-text-main-inverted); }
.layer-subtitle {
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: var(--typography-weight-400);
  line-height: var(--line-height-small);
  color: var(--neutral-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-actions { display: flex; align-items: center; gap: var(--spacing-4); flex-shrink: 0; }
.layer-action-btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-2);
  background: transparent;
  color: var(--neutral-icon-main);
  font-size: var(--sizing-5);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.layer-action-btn:hover { color: var(--neutral-text-main); }
.layer-card.is-active .layer-action-btn { color: var(--neutral-icon-inverted); }
.layer-card.is-active .layer-action-btn:hover { color: var(--neutral-bg-light); }
.layer-action-btn:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.layer-card.is-active .layer-action-btn:focus-visible { outline-color: var(--neutral-bg-light); }

/* Controls rail (Figma "View options"): white card with its own column. Buttons are secondary
   (white, 1px border); filled dark = the modifier is ON for the layer; ring = its panel is open. */
.controls-rail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--spacing-4);
  box-sizing: border-box;
  width: 36px; /* 32 button + 2 px each side: the buttons sit flush with the workspace's 16 px margin */
  padding: 0 var(--spacing-1);
  border-radius: var(--border-radius-1);
  z-index: 35;
}
.rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--sizing-7);
  height: var(--sizing-7);
  border: var(--border-weight-1) solid var(--neutral-interactive-default);
  border-radius: var(--border-radius-3);
  background: var(--neutral-bg-light);
  color: var(--neutral-icon-main);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.rail-btn:hover { background: var(--neutral-interactive-hover-inverted); }
.rail-btn.has-modifier-active { background: var(--neutral-interactive-default); color: var(--neutral-icon-inverted); }
.rail-btn.has-modifier-active:hover { background: var(--neutral-interactive-hover); }
.rail-btn.active { box-shadow: 0 0 0 var(--border-weight-2) var(--neutral-bg-light), 0 0 0 var(--border-weight-3) var(--neutral-interactive-default); }
.rail-btn:focus-visible { outline: var(--border-weight-2) solid var(--primary-interactive-focus); outline-offset: var(--spacing-1); }

/* Art log (Figma "Layer list" bottom half): DM Mono 12, a line above, soft text with dark keys */
.ds-art-log {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: var(--spacing-5);
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--spacing-6);
  border-top: var(--border-weight-1) solid var(--neutral-border-main);
  font-family: var(--typography-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--typography-weight-500);
  user-select: text;
}
/* The whole app blocks text selection (every element), so the log lines must opt in to be copied by hand */
.ds-art-log .art-log__lines, .ds-art-log .art-log__lines * { user-select: text; -webkit-user-select: text; }
.art-log__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: calc(var(--spacing-6) * -1); margin: calc(var(--spacing-6) * -1) calc(var(--spacing-6) * -1) 0; padding: var(--spacing-5) var(--spacing-6); background: var(--neutral-bg-strong); z-index: 1; }
.art-log__copy { width: var(--sizing-7); height: var(--sizing-7); padding: 0; justify-content: center; }
.art-log__title { margin: 0; line-height: var(--line-height-body); color: var(--neutral-text-main); text-transform: uppercase; }
.art-log__lines { color: var(--neutral-text-subtle); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.art-log__lines p { margin: 0; }
.art-log__key, .art-log__layer { color: var(--neutral-text-main); }
.art-log__layer { margin-top: var(--spacing-3) !important; }

/* Scroll bars: thin, black at 50 % so they do not weigh on the layout */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.5) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); border-radius: var(--border-radius-full); }

/* =========================================================================
   Utility classes used by index.html and the scripts (what the Tailwind CDN used to provide).
   They stay at the end of the file so they win over the component rules, as before.
   ========================================================================= */
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.select-none { -webkit-user-select: none; user-select: none; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.cursor-grab { cursor: grab; }
.cursor-not-allowed { cursor: not-allowed; }
.active\:cursor-grabbing:active { cursor: grabbing; }
.opacity-40 { opacity: 0.4; }
.z-30 { z-index: 30; }
.text-\[14px\] { font-size: 14px; }
.text-\[16px\] { font-size: 16px; }
.bg-\[\#eceef2\] { background-color: #eceef2; }
.text-\[\#121317\] { color: #121317; }

/* Smart module editor (proof of concept): the list of figures */
.fig-list { display: flex; flex-direction: column; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.fig-list .ds-btn { justify-content: flex-start; width: 100%; }
.fig-list .ds-btn.active { background: var(--neutral-bg-strong); font-weight: var(--typography-weight-700); }

/* A neutral line between groups of controls (Figma catalog: divider) */
.ds-divider { height: 1px; margin: var(--spacing-3) 0; background: var(--neutral-border-main); border: 0; }

/* The rows of the shape list reuse the layer rows, a bit shorter */
.fig-list .layer-card.fig-row { height: 48px; }
.fig-list { gap: 0; }

/* Which mode the app is in: the composition (the design) or the smart module editor (the module on its own) */
.ds-mode-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-2); box-sizing: border-box; height: var(--sizing-6);
  padding: 0 var(--spacing-3); border-radius: var(--border-radius-2); background: var(--neutral-bg-strong);
  color: var(--neutral-text-main); font-size: var(--font-size-xs); font-weight: var(--typography-weight-500); white-space: nowrap;
}
.ds-mode-chip--smart { background: #cdeeed; color: #0b5e5c; }
.ds-btn--dark { background: var(--neutral-interactive-default); color: var(--neutral-text-main-inverted); }
.ds-btn--dark:hover { background: var(--neutral-interactive-hover); }
.ds-btn--dark:active { background: var(--neutral-interactive-active); }
.is-edit-only { display: none; }
body.is-editing-module .is-edit-only { display: inline-flex; }
/* in the editor the only ways out are Save and Cancel: the document buttons give way to them, and the rest of the app waits */
body.is-editing-module .ds-export-actions > .ds-btn:not(.is-edit-only), body.is-editing-module .ds-export-actions > .ds-menu { display: none; }
body.is-editing-module #controls-rail .rail-btn:not([data-rail-tab="module"]) { opacity: 0.4; pointer-events: none; }
body.is-editing-module #inspector-flyout .close-flyout-btn { display: none; }
/* the shapes take the place of the layers and the Art log on the left */
.ds-shapes-panel { display: none; }
body.is-editing-module .ds-shapes-panel { display: flex; }
body.is-editing-module .ds-layers-panel:not(.ds-shapes-panel) { display: none; }
/* a small cross marks the centre of the module canvas (a guide, never exported) */
body.is-editing-module .ds-artboard { position: relative; }
body.is-editing-module .ds-artboard::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); pointer-events: none;
  background:
    linear-gradient(#9aa0a6, #9aa0a6) center / 1px 100% no-repeat,
    linear-gradient(#9aa0a6, #9aa0a6) center / 100% 1px no-repeat;
}
body.is-editing-module .ds-select { opacity: 0.5; pointer-events: none; }
.ds-btn--dark i { color: var(--neutral-icon-inverted); }

/* Download menu in the header: one button that opens JSON, SVG and Copy SVG */
.ds-menu { position: relative; }
.ds-menu__list {
  position: absolute; right: 0; top: calc(100% + var(--spacing-2)); z-index: 50; min-width: 160px; padding: var(--spacing-2);
  display: flex; flex-direction: column; gap: var(--spacing-1); border-radius: var(--border-radius-2);
  background: var(--neutral-bg-light); box-shadow: var(--elevation-5x);
}
.ds-menu__list[hidden] { display: none; }
.ds-menu__item {
  display: flex; align-items: center; gap: var(--spacing-3); height: var(--sizing-6); padding: 0 var(--spacing-3); border: 0; border-radius: var(--border-radius-1);
  background: transparent; color: var(--neutral-text-main); font: inherit; font-size: var(--font-size-xs); cursor: pointer; text-align: left;
}
.ds-menu__item:hover { background: var(--neutral-bg-strong); }

/* A control that does not apply now stays in view, dimmed and without response; its reason is the tooltip (see panel-builder.js) */
.is-disabled { opacity: 0.45; cursor: not-allowed; }
.is-disabled button, .is-disabled input, .is-disabled label { cursor: not-allowed; }

/* The (?) help beside a title and its popover (Figma "tooltip"): dark card, two short parts, a pointer to the button */
.ds-title-row { display: flex; align-items: center; gap: var(--spacing-2); }
.ds-card-title .ds-help { margin-left: var(--spacing-1); }
.ds-help {
  display: inline-grid; place-items: center; flex: none; width: var(--sizing-4); height: var(--sizing-4); padding: 0;
  border: 0; border-radius: var(--border-radius-full, 99999px); background: transparent; color: var(--neutral-text-soft); cursor: pointer;
}
.ds-help i { font-size: var(--sizing-4); }
.ds-help:hover, .ds-help[aria-expanded="true"] { color: var(--neutral-text-main); }
.ds-help:focus-visible { outline: var(--border-weight-2) solid var(--neutral-interactive-default); outline-offset: var(--spacing-1); }
.ds-help-popover {
  position: fixed; z-index: 70; box-sizing: border-box; width: max-content; min-width: 148px; max-width: 240px; padding: var(--spacing-3);
  display: flex; flex-direction: column; gap: var(--spacing-2);
  border-radius: var(--border-radius-1); background: var(--neutral-interactive-default); color: var(--neutral-text-main-inverted);
  box-shadow: var(--elevation-4x); font-family: var(--typography-family-body); font-size: var(--font-size-xs); font-weight: var(--typography-weight-400); line-height: 1.7;
}
.ds-help-popover[hidden] { display: none; }
.ds-help-popover p { margin: 0; }
.ds-help-popover__label { display: block; }
.ds-help-popover__pointer {
  position: absolute; left: var(--pointer-x, 50%); bottom: -6px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--neutral-interactive-default);
}
.ds-help-popover.is-below .ds-help-popover__pointer { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid var(--neutral-interactive-default); }

/* Stroke or Fill (two tags with an icon) and the shape's color at the end of the same row (Figma, Smart module controls) */
.ds-style-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); width: 100%; }
.ds-tag--icon { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: 0 var(--spacing-3); }
.ds-tag--icon i { font-size: var(--sizing-4); flex: none; }
.ds-style-row .ds-color-picker { gap: 10px; }
.ds-style-row .ds-swatch { border-color: var(--neutral-border-strong); }