/* lab.css — Fretboard Lab v2 chrome (FRETBOARD-LAB-V2-PLAN §2).
 * .lab-* namespace.  CANONICAL tokens only (fretly-tokens.css + site.css
 * colour tokens) — no magic px for type/spacing/radius (design-token
 * doctrine); 1-2 px borders + SVG strokes exempt.
 *
 * Colour split (deliberate):
 *   • CHROME (toolbar, panel, hovers, primary buttons) uses the app
 *     accent (--accent, orange) so the Lab reads as part of Fretly.
 *   • BOARD SELECTION chrome (marquee, selection rings, ghost-selection,
 *     pending-connect) uses a distinct cool --lab-select so it stays
 *     legible against the warm content dots.  lab-board.js sets only the
 *     SVG geometry; the fill/stroke COLOUR comes from the --lab-* tokens
 *     via the `.lab-sel-ring/.lab-ghost-sel/.lab-preview/.lab-marquee/
 *     .lab-pending` rules below (F8 — no colour literals in JS).
 *
 * Loaded app-wide; rules are inert until a .spg-view-lab host exists. */

/* Lab-namespaced colour tokens — SINGLE SOURCE for every lab colour that
   isn't an app token.  Fretly has no global cool-"select" or semantic
   "danger" token, so the lab owns these under its own prefix (doctrine:
   colours live in tokens, referenced everywhere else — never re-hardcoded).
   The board chrome (marquee / selection ring / ghost / preview / pending)
   is coloured entirely from these vars via the CSS rules below; lab-board.js
   sets only geometry, never colour literals. */
.lab-root {
  --lab-accent: #2f6fed;                 /* board chrome accent (cool) */
  --lab-select: #2f6fed;                 /* selection colour */
  --lab-danger: #c0392b;                 /* destructive hover (delete) */
  --lab-pending: #e2554f;                /* pending-connect highlight (warm red) */
  --lab-on-accent: #fff;                 /* text/fill on an accent fill */
  /* translucent selection fills, derived from --lab-select so one token
     drives every alpha variant (marquee / ghost / draw-preview). */
  --lab-select-fill-soft:   color-mix(in srgb, var(--lab-select) 8%, transparent);
  --lab-select-fill:        color-mix(in srgb, var(--lab-select) 18%, transparent);
  --lab-select-fill-strong: color-mix(in srgb, var(--lab-select) 25%, transparent);
}

/* Board selection chrome — colours from tokens; lab-board.js sets geometry
   (cx/cy/r, stroke-width, dasharray) but NOT colour (F8). */
.lab-sel-ring  { fill: none;                     stroke: var(--lab-select); }
.lab-ghost-sel { fill: var(--lab-select-fill);        stroke: var(--lab-select); }
.lab-preview   { fill: var(--lab-select-fill-strong); stroke: none; }
.lab-marquee   { fill: var(--lab-select-fill-soft);   stroke: var(--lab-select); }
.lab-pending   { fill: none;                     stroke: var(--lab-pending); }

/* ── page-mode view swap (scale page; chord page reuses in LAB-8) ── */

.spg-view-lab {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.spg-content--lab .spg-view-fretboard  { display: none; }
.spg-content--lab .spg-view-collection { display: none; }
.spg-content--lab .spg-shell-panels    { display: none; }
.spg-content--lab .spg-view-lab        { display: flex; }
/* Advanced-mode interplay (owner bug 2026-07-08): entering Lab while
   Advanced is active used to leave the DOM-moved Scale Explorer surface
   (`.spg-view-advanced`, shown by scale-collection-page.css's
   `.spg-content--advanced` rule) visible UNDER the Lab view — Lab
   mounted above it and pushed the whole Explorer (incl. its ctrl bar)
   down the page. Lab is a view swap like fretboard/collection: it must
   also hide the advanced view. 3-class selector out-specifies the
   2-class show rule regardless of stylesheet load order. Exit path +
   ctrl-shell resurface live in scale-collection-page.css
   (`.spg-root--lab` exception on the advanced ctrl-shell hide). */
.spg-content--advanced.spg-content--lab .spg-view-advanced { display: none; }

/* ── standalone ?route=lab page shell (LAB-2b) ───────────────────── */

.lab-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.lab-page-head { margin-bottom: var(--space-md); }
.lab-page-title { font-size: var(--font-2xl); margin: 0 0 var(--space-xs); }
.lab-page-sub { font-size: var(--font-sm); color: var(--text-3); margin: 0; }

/* ── layout ───────────────────────────────────────────────────────── */

.lab-root {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  min-width: 0;
}

/* Drag gestures (marquee / draw / erase) must never trigger the
   browser's native text/element selection — that's the blue highlight
   that bled across the board + fret numbers.  Form fields opt back in. */
.lab-root { -webkit-user-select: none; user-select: none; }
.lab-root input,
.lab-root textarea { -webkit-user-select: text; user-select: text; }

.lab-main {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.lab-canvas { min-width: 0; }
.lab-board-svg { display: block; width: 100%; touch-action: none; }
.lab-board-svg .lab-hit { cursor: crosshair; }

.lab-side {
  flex: 0 0 17rem;             /* ~252 px @ scale 1, scales with --ui-scale */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

/* ── panel position: BELOW (panel under the board, sections side-by-side) */

.lab-root--below { flex-direction: column; align-items: stretch; }
.lab-root--below .lab-main { width: 100%; }
.lab-root--below .lab-side {
  flex: 1 1 auto;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.lab-root--below .lab-panel-section {
  flex: 1 1 22rem;
  min-width: 0;
}

/* ── responsive: SIDE mode collapses to a stack on narrow viewports ── */

@media (max-width: 1100px) {
  /* Column stack — children must STRETCH; row-mode `align-items:
     flex-start` would shrink-to-fit and collapse the canvas (found
     2026-06-12 in browser verify). */
  .lab-root--side { flex-direction: column; align-items: stretch; }
  .lab-root--side .lab-main { width: 100%; }
  .lab-root--side .lab-side { flex: 1 1 auto; width: 100%; }
}

/* ── tool strip ───────────────────────────────────────────────────── */

.lab-toolstrip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: var(--border-w) solid var(--border);
}

.lab-strip-spacer { flex: 1 1 auto; }

/* Empty-board hint (b-lite) — subtle one-liner shown under the strip
   while the doc has no markers yet; hidden the moment a dot lands. */
.lab-empty-hint {
  display: none;
  font-size: var(--font-xs);
  color: var(--text-3);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-md);
}

/* Segmented group — buttons share borders, ends are rounded. */
.lab-tool-group { display: inline-flex; align-items: stretch; }

.lab-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* FIXED height (not min-height) + line-height:1 so every toolbar control
     is exactly the same height and aligns perfectly, regardless of its
     font size (icon buttons use a larger glyph). */
  height: var(--ctl-h-md);
  line-height: 1;
  padding: 0 var(--ctl-pad-x-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.lab-tool-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Modal-tool ACTIVE = solid accent fill (a chosen mode). */
.lab-tool-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--lab-on-accent);
}
.lab-tool-btn.is-active:hover { background: var(--accent-hover); color: var(--lab-on-accent); }

/* Group seams: collapse inner borders, round only the ends. */
.lab-tool-group .lab-tool-btn { border-radius: 0; }
.lab-tool-group .lab-tool-btn:not(:first-child) { margin-left: -1px; }
.lab-tool-group .lab-tool-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lab-tool-group .lab-tool-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lab-tool-group .lab-tool-btn.is-active { position: relative; z-index: 1; }

/* "All positions" toggle — soft accent tint when ON (distinct from a mode). */
.lab-tool-btn--toggle.is-active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.lab-tool-btn--toggle.is-active:hover { background: var(--accent-bg-hover); color: var(--accent); }

/* Primary action (e.g. "Save & return to collection" in edit-and-return). */
.lab-tool-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--lab-on-accent);
  font-weight: 600;
}
.lab-tool-btn--primary:hover { background: var(--accent-hover, var(--accent)); color: var(--lab-on-accent); }

/* Icon buttons (undo/redo) — square-ish; same fixed height as the rest. */
.lab-tool-btn--icon {
  min-width: var(--ctl-h-md);
  padding: 0 var(--space-sm);
  font-size: var(--font-md);
}

/* Export group — secondary but clearly INTERACTIVE (not disabled).
   Full text colour + solid border so it doesn't read as greyed-out. */
.lab-export-group .lab-tool-btn--export {
  color: var(--text);
  border-color: var(--border-strong);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}
.lab-export-group .lab-tool-btn--export:hover { color: var(--accent); border-color: var(--accent); }

/* Panel-position toggle cluster. */
.lab-panelpos { display: inline-flex; align-items: center; gap: var(--space-xs); }
.lab-panelpos-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ── LAB-D: profile:'diagram' authoring cluster (finger tool + mute/open +
   per-board tuning + title auto-detect chip).  Only rendered for diagram
   docs; inert / absent for the default full-neck lab. ─────────────────── */
.lab-diagram-tools,
.lab-diagram-tuning,
.lab-diagram-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.lab-diagram-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* Finger digit + string-state buttons — square-ish so the row reads as a
   compact keypad, matching the icon buttons' fixed height. */
.lab-tool-btn.lab-diagram-finger,
.lab-tool-btn.lab-diagram-string {
  min-width: var(--ctl-h-md);
  padding: 0 var(--space-sm);
  font-size: var(--font-md);
}

.lab-diagram-title-input {
  height: var(--ctl-h-md);
  box-sizing: border-box;
  padding: 0 var(--ctl-pad-x-md);
  font-size: var(--font-sm);
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  max-width: 12rem;
}
.lab-diagram-title-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Auto-detect accept-chip — a soft-accent suggestion the user opts into
   (never auto-applied over a manual title). */
.lab-detect-chip {
  display: inline-flex;
  align-items: center;
  height: var(--ctl-h-md);
  padding: 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--accent);
  background: var(--accent-bg);
  border: var(--border-w) dashed var(--accent);
  border-radius: var(--radius-pill, var(--radius-sm));
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.lab-detect-chip:hover { background: var(--accent-bg-hover); }

/* ── side panel ───────────────────────────────────────────────────── */

.lab-panel-section {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.lab-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: var(--border-w) solid var(--border);
}

/* layers */

.lab-layer-list { display: flex; flex-direction: column; gap: var(--space-xs); }

.lab-layer-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: var(--border-w) solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.lab-layer-row:hover { background: var(--surface-2); }

.lab-layer-row.is-active {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.lab-layer-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lab-layer-swatch {
  width: 0.857rem; height: 0.857rem;        /* 12 px @ scale 1 */
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.25);
  flex: 0 0 auto;
}

.lab-layer-kind {
  font-size: var(--font-xs);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-3);
}

.lab-icon-btn {
  /* Fixed square + centred content so the eye/"–", lock and swatch columns
     line up across every layer row regardless of glyph width. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-sm);
  opacity: 0.65;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: opacity var(--t-fast), background var(--t-fast);
}

.lab-icon-btn:hover { opacity: 1; background: var(--surface-2); }
.lab-icon-btn--danger:hover { color: var(--lab-danger); }

/* drag-reorder states */
.lab-layer-row.is-dragging { opacity: 0.5; }
.lab-layer-row.is-drop-target { box-shadow: 0 -2px 0 0 var(--accent); }

.lab-opacity-row {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-w) solid var(--border);
}
.lab-opacity-slider,
.lab-size-slider { flex: 1; min-width: 0; accent-color: var(--accent); }

/* inspector */

.lab-insp-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.lab-insp-row:last-child { margin-bottom: 0; }

/* Group separators — turn the flat row stack into legible blocks. */
.lab-conn-row,
.lab-send-row,
.lab-scale-row {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-w) solid var(--border);
}

.lab-insp-subhint {
  font-size: var(--font-xs);
  color: var(--text-3);
  margin-top: var(--space-xs);
  line-height: var(--leading-snug);
}

.lab-insp-hint {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.lab-shape-btn {
  width: var(--ctl-h-md);
  min-height: var(--ctl-h-md);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--font-base);
  line-height: 1;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.lab-shape-btn:hover { border-color: var(--accent); }
.lab-shape-btn.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.lab-color-btn {
  width: 1.286rem; height: 1.286rem;        /* 18 px @ scale 1 */
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
  transition: box-shadow var(--t-fast);
}

.lab-color-btn.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

.lab-color-pick {
  width: 1.714rem; height: var(--ctl-h-md);
  padding: 0;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.lab-mini-btn {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  min-height: var(--ctl-h-md);
  padding: var(--ctl-pad-y) var(--ctl-pad-x-md);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.lab-mini-btn:hover { border-color: var(--accent); color: var(--accent); }

.lab-mini-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--lab-on-accent);
}
.lab-mini-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--lab-on-accent); }

.lab-mini-btn--danger:hover { border-color: var(--lab-danger); color: var(--lab-danger); }

/* Flat dropdown — Fretly house style (NEVER OS-native).  Mirrors the
   canonical .scp-kd-select / .scp-ctrl-select: appearance:none + custom
   SVG chevron + accent focus ring. */
.lab-sys-select {
  flex: 1 1 0;          /* basis 0 → width from flex share, NOT option text
                          (toggling "In scale only" changes the type list;
                          a content basis made the whole row resize) */
  min-width: 9rem;      /* floor so option text (e.g. system/suite names)
                          stays readable instead of collapsing to ~2ch
                          when the row has little flex space to share */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  font-size: var(--font-sm);
  color: var(--text);
  min-height: var(--ctl-h-md);
  padding: 0 1.857rem 0 var(--ctl-pad-x-md);   /* room for the chevron */
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 0.786rem;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lab-sys-select:hover { border-color: var(--text-3); }
.lab-sys-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.lab-sys-select:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* Compact picker trigger (replaces native chord root/type selects).
   Button, not a select — opens a styled categorised popover. */
.lab-pick-trigger {
  flex: 0 1 auto;            /* compact — don't hog the row; leave room beside */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: var(--ctl-h-md);
  padding: 0 1.857rem 0 var(--ctl-pad-x-md);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 0.786rem;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lab-pick-trigger:hover { border-color: var(--accent); }
.lab-pick-trigger:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.lab-chord-root { flex: 0 0 auto; min-width: 4.5rem; }   /* note name — short + stable */
.lab-chord-type { flex: 0 1 auto; min-width: 7rem; max-width: 12rem; }  /* compact; truncates long names */
/* "Add board to" trigger fills the remaining row width (unlike the compact
   chord-nav triggers) so the current suite name has room to show. */
.lab-send-pick { flex: 1 1 auto; }

/* "＋ New suite…" footer form inside the suite picker (global popover scope). */
.lab-newsuite-form { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 auto; }
.lab-newsuite-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ctl-h-md);
  padding: 0 var(--ctl-pad-x-md);
  font: inherit;
  font-size: var(--font-sm);
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.lab-newsuite-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* Picker popover body — categorised, horizontal-spread chip grid. */
.lab-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-sm);
}
.lab-pick-grid--notes {
  grid-template-columns: repeat(4, 1fr);
}
.lab-pick-chip {
  min-height: var(--ctl-h-md);
  padding: var(--ctl-pad-y) var(--ctl-pad-x-md);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  text-align: center;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.lab-pick-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.lab-pick-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--lab-on-accent);
}

/* Imported-boards browser (LAB-9 surfacing) — FretlyPopover list. */
.lab-imported-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-w) solid var(--border);
}
.lab-imported-head .lab-insp-subhint { margin-top: 0; flex: 1 1 auto; }
.lab-imported-head .lab-mini-btn { flex: 0 0 auto; }

.lab-imported-list { display: flex; flex-direction: column; gap: var(--space-xs); }

.lab-imported-empty {
  font-size: var(--font-sm);
  color: var(--text-3);
  line-height: var(--leading-snug);
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
}

.lab-imported-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-w) solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lab-imported-row:hover { background: var(--surface-2); border-color: var(--border); }

.lab-imported-main {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lab-imported-name {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-imported-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-xs);
  color: var(--text-3);
}
.lab-imported-source {
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-3);
}

.lab-imported-actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }

/* dark mode — tokens already theme; only the swatch borders need a nudge. */
html[data-theme="dark"] .lab-layer-swatch,
html[data-theme="dark"] .lab-color-btn { border-color: rgba(255,255,255,0.28); }