/* =========================================================================
   DECANT — Smart Lists feature layer.
   Rules-based dynamic lists. Reuses the web app's design tokens and primitives
   (.card, .btn, .field, .modal, .bottle-grid, .three-col); only the smart-list
   specific bits live here. All scoped under .dcweb to match the web shell.
   ========================================================================= */

/* coloured icon avatar (cards, detail header, modal preview) */
.dcweb .sl-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; flex-shrink: 0;
}

/* overview card */
.dcweb .sl-card { transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.dcweb .sl-rulesum {
  font-size: 12.5px; color: var(--txt-3); margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* empty state */
.dcweb .sl-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* ── rule builder modal ──────────────────────────────────────────────────── */
.dcweb .sl-modal { width: 560px; }

/* colour swatch palette */
.dcweb .sl-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.dcweb .sl-swatch {
  all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.dcweb .sl-swatch:hover { transform: scale(1.08); }
.dcweb .sl-swatch.on { box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 4px var(--txt-1); }

/* icon picker */
.dcweb .sl-iconpick { display: flex; flex-wrap: wrap; gap: 8px; }
.dcweb .sl-iconopt {
  all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2); background: var(--chip);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .sl-iconopt:hover { color: var(--txt-1); }
.dcweb .sl-iconopt.on { background: var(--accent-soft); color: var(--accent); }

/* match selector row */
.dcweb .sl-matchrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }

/* rule rows */
.dcweb .sl-rules { display: flex; flex-direction: column; gap: 9px; }
.dcweb .sl-rule {
  display: grid; grid-template-columns: 1.2fr 1fr 1.1fr auto; gap: 8px; align-items: center;
}
@container (max-width: 560px) { .dcweb .sl-rule { grid-template-columns: 1fr 1fr; } }
.dcweb .sl-rule-rm {
  all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--chip); color: var(--txt-3); font-size: 18px; line-height: 1;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .sl-rule-rm:hover { background: var(--accent-soft); color: var(--accent); }
.dcweb .sl-rule-rm:disabled { opacity: 0.4; cursor: not-allowed; }

/* live preview strip */
.dcweb .sl-preview {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px 16px; border-radius: var(--radius-3);
  background: var(--surface-2); border: 1px solid var(--line);
}