/* ScrubStack — brand tokens */
:root {
  /* Backgrounds */
  --ss-cream: #F5EFE5;
  --ss-warm-white: #FAF7F2;
  --ss-cream-tint: #EDE6D8;
  --ss-cream-deep: #E8E1D2;

  /* Text */
  --ss-ink: #1B1A18;
  --ss-gray-900: #3A3833;
  --ss-gray-700: #6E6962;
  --ss-gray-500: #ABA59C;
  --ss-gray-300: #D6D0C5;
  --ss-line: #D6D0C5;
  --ss-line-soft: #E5DFD2;

  /* Accents */
  --ss-sage: #7A8E7B;
  --ss-sage-deep: #5A6E5C;
  --ss-sage-tint: #E3E8DE;
  --ss-terra: #C7765A;
  --ss-terra-deep: #A05F47;
  --ss-terra-tint: #F1DDD2;

  /* Status */
  --ss-confirmed: #5A8C6D;
  --ss-confirmed-bg: #DCE7DE;
  --ss-open: #D9A14A;
  --ss-open-bg: #F4E6CC;
  --ss-outstanding: #D17353;
  --ss-outstanding-bg: #F1DDD2;
  --ss-brick: #B14A3F;
  --ss-brick-bg: #F0D8D2;
  --ss-info: #6B7A85;
  --ss-info-bg: #DCE2E6;
  --ss-match-reject: #B14A3F;
  --ss-match-reject-bg: #F0D8D2;
  --ss-match-nomatch: #6E6962;
  --ss-match-nomatch-bg: #EEE7DA;
  --ss-match-review: #C7765A;
  --ss-match-review-bg: #F1DDD2;
  --ss-match-auto: #5A8C6D;
  --ss-match-auto-bg: #DCE7DE;
  --ss-match-verified: #5A8C6D;
  --ss-match-verified-bg: #DCE7DE;

  /* Type */
  --ss-serif: 'Newsreader', 'Source Serif Pro', Charter, 'Georgia', serif;
  --ss-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ss-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace;

  /* Shadows */
  --ss-shadow-card: 0 1px 2px rgba(27, 26, 24, 0.04);
  --ss-shadow-lift: 0 4px 14px rgba(27, 26, 24, 0.08), 0 1px 2px rgba(27, 26, 24, 0.04);
  --ss-shadow-pop: 0 12px 32px rgba(27, 26, 24, 0.12), 0 2px 6px rgba(27, 26, 24, 0.06);
}

* { box-sizing: border-box; }

.ss-app {
  font-family: var(--ss-sans);
  color: var(--ss-ink);
  background: var(--ss-cream);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

.ss-app, .ss-app * { font-variant-ligatures: contextual; }

.ss-mono { font-family: var(--ss-mono); font-feature-settings: 'zero', 'ss01'; }
.ss-serif { font-family: var(--ss-serif); font-feature-settings: 'lnum'; }
.ss-caps  { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; }

.prefcard-cat-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.prefcard-cat-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ss-line);
  border-radius: 6px;
  background: var(--ss-warm-white);
  overflow-x: auto;
}

.prefcard-cat-tab {
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ss-gray-900);
  cursor: pointer;
  font-family: var(--ss-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  white-space: nowrap;
}

.prefcard-cat-tab.is-active {
  background: var(--ss-ink);
  border-color: var(--ss-ink);
  color: var(--ss-cream);
}

.prefcard-cat-sections,
.prefcard-cat-section-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.prefcard-cat-section {
  min-width: 0;
}

.prefcard-cat-section-head {
  position: sticky;
  top: 0;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ss-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ss-cream-tint) 82%, white);
  color: var(--ss-ink);
  cursor: pointer;
  font-family: var(--ss-sans);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
  text-align: left;
  box-shadow: var(--ss-shadow-card);
}

.prefcard-cat-arrow {
  width: 12px;
  color: var(--ss-terra-deep);
  font-family: var(--ss-mono);
  font-size: 11px;
}

.prefcard-cat-count {
  margin-left: auto;
  border: 1px solid var(--ss-line);
  border-radius: 999px;
  background: var(--ss-warm-white);
  color: var(--ss-gray-700);
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
}

.prefcard-cat-empty {
  border: 1px dashed var(--ss-line);
  border-radius: 6px;
  background: var(--ss-warm-white);
  color: var(--ss-gray-700);
  font-size: 13px;
  padding: 18px;
  text-align: center;
}

/* Subtle scroll hide inside artboards */
.ss-app *::-webkit-scrollbar { display: none; }