/* =====================================================================
   bn-style-lab.css — Style Lab tool styles
   Uses BN brand tokens from bn-brand.css (loaded first via head.php).
   No custom property declarations needed — inherits from brand system.
===================================================================== */

/* =====================================================================
   LAYOUT
===================================================================== */
.slab__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── Toolbar: tier toggle + export ──────────────────────────────────── */
.slab__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.slab__tier-toggle {
  display: flex;
  gap: 0.35rem;
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-full);
  padding: 4px;
}
.slab__tier-btn {
  padding: 0.45rem 1.1rem;
  font-family: var(--bn-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bn-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--bn-radius-full);
  cursor: pointer;
  transition: all var(--bn-transition);
  white-space: nowrap;
}
.slab__tier-btn:hover {
  color: var(--bn-text);
}
.slab__tier-btn--active {
  background: var(--bn-acc);
  color: var(--bn-acc-on);
}
.slab__tier-btn--active:hover {
  background: var(--bn-acc-hover);
  color: var(--bn-acc-on);
}

.slab__export-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  font-family: var(--bn-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bn-acc);
  color: var(--bn-acc-on);
  border: none;
  border-radius: var(--bn-radius-md);
  cursor: pointer;
  transition: background var(--bn-transition);
  white-space: nowrap;
}
.slab__export-btn:hover { background: var(--bn-acc-hover); }
.slab__export-btn.exported { background: #16a34a; }

/* ── Tier visibility ────────────────────────────────────────────────── */
.slab__tier--hidden { display: none; }

/* =====================================================================
   ACCORDION
===================================================================== */
.slab .accordion {
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-lg);
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow var(--bn-transition), border-color var(--bn-transition);
}
.slab .accordion:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.slab .accordion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background var(--bn-transition), border-color var(--bn-transition);
  border-radius: var(--bn-radius-lg);
  min-height: 56px;
}
.slab .accordion-header:hover { background: var(--bn-surf-2); }
.slab .accordion.open .accordion-header {
  border-bottom-color: var(--bn-bdr);
  background: var(--bn-surf-2);
  border-radius: var(--bn-radius-lg) var(--bn-radius-lg) 0 0;
}
.slab .accordion-arrow {
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--bn-acc);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}
.slab .accordion.open .accordion-arrow { transform: rotate(90deg); }
.slab .accordion-title {
  font-family: var(--bn-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bn-text);
}
.slab .accordion-badge {
  font-family: var(--bn-font-body);
  font-size: 0.68rem;
  background: var(--bn-acc-subtle);
  color: var(--bn-acc);
  padding: 2px 8px;
  border-radius: var(--bn-radius-sm);
  font-weight: 600;
}
.slab .accordion-body { display: none; padding: 1.4rem; }
.slab .accordion.open .accordion-body { display: block; }

/* =====================================================================
   SHARED COMPONENTS — remapped to BN tokens
===================================================================== */
.slab .field-label {
  font-family: var(--bn-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-text-muted);
  margin-bottom: 0.35rem;
}
.slab .field-label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
  font-style: italic;
}
.slab .output-row { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem; }
.slab .output-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  background: var(--bn-surf-2);
  color: var(--bn-text);
  padding: 0.35rem 0.6rem;
  border-radius: var(--bn-radius-md);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--bn-bdr);
}
.slab .copy-btn {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.72rem;
  font-family: var(--bn-font-body);
  font-weight: 700;
  background: var(--bn-acc);
  color: var(--bn-acc-on);
  border: none;
  border-radius: var(--bn-radius-md);
  cursor: pointer;
  transition: background var(--bn-transition), transform 0.1s;
  white-space: nowrap;
  min-height: 36px;
}
.slab .copy-btn:hover { background: var(--bn-acc-hover); }
.slab .copy-btn:active { transform: scale(0.95); }
.slab .copy-btn.copied { background: #16a34a; }

.slab .slider-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.45rem; }
.slab .slider-label {
  font-size: 0.72rem;
  color: var(--bn-text-muted);
  min-width: 82px;
  font-weight: 600;
  font-family: var(--bn-font-body);
}
.slab .slider-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--bn-acc);
  min-width: 42px;
  text-align: right;
  font-weight: 600;
}

/* Range inputs */
.slab input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--bn-bdr);
  outline: none; cursor: pointer;
}
.slab input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bn-acc);
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--bn-surf), 0 0 0 3px var(--bn-acc);
  transition: transform 0.12s;
}
.slab input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.slab input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bn-acc);
  border: 2px solid var(--bn-surf);
  cursor: pointer;
}

/* ── Interactive element orange border system ────────────────────── */
/* All typeable / clickable controls show an orange border at rest    */
/* so users immediately know what's interactive.                      */
.slab select,
.slab input[type="text"],
.slab input[type="number"],
.slab input[type="color"],
.slab .hex-input {
  border-color: #b68d1e !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.slab select:hover,
.slab input[type="text"]:hover,
.slab input[type="number"]:hover,
.slab input[type="color"]:hover,
.slab .hex-input:hover {
  border-color: #ffffff !important;
}
.slab select:focus,
.slab input[type="text"]:focus,
.slab input[type="number"]:focus,
.slab .hex-input:focus {
  outline: none;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
/* Range sliders: hover/focus glow in orange */
.slab input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25); }
.slab input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.32); }

/* Select */
.slab select {
  font-family: var(--bn-font-body);
  font-size: 0.85rem;
  background: var(--bn-surf-2);
  color: var(--bn-text);
  border: 1px solid;
  border-radius: var(--bn-radius-md);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  width: 100%;
}

/* Text/number inputs */
.slab input[type="text"],
.slab input[type="number"] {
  font-family: var(--bn-font-body);
  font-size: 0.85rem;
  background: var(--bn-surf-2);
  color: var(--bn-text);
  border: 1px solid;
  border-radius: var(--bn-radius-md);
  padding: 0.4rem 0.7rem;
  width: 100%;
}

/* RGB sliders */
.slab .rgb-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.slab .rgb-ch { font-size: 0.68rem; font-weight: 800; min-width: 12px; text-align: center; }
.slab .rgb-ch.r { color: #ef4444; }
.slab .rgb-ch.g { color: #16a34a; }
.slab .rgb-ch.b { color: #3b82f6; }
.slab .rgb-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--bn-text-muted);
  min-width: 26px;
  text-align: right;
}

.slab .divider { height: 1px; background: var(--bn-bdr); margin: 1rem 0; }
.slab .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.slab .g4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.6rem; }
.slab .mt-xs { margin-top: 0.35rem; }
.slab .mt-sm { margin-top: 0.65rem; }
.slab .mt-md { margin-top: 1rem; }
.slab .mb-sm { margin-bottom: 0.65rem; }

.slab .inner-card {
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.slab .inner-card-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bn-acc);
  font-family: var(--bn-font-body);
}
.slab .toggle-btn {
  padding: 0.38rem 0.7rem;
  font-size: 0.72rem;
  font-family: var(--bn-font-body);
  font-weight: 700;
  background: var(--bn-surf-2);
  color: var(--bn-text-muted);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 36px;
}
.slab .toggle-btn.active {
  background: var(--bn-acc-subtle);
  color: var(--bn-acc);
  border-color: var(--bn-acc);
}
.slab .toggle-group { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Color picker */
.slab input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 40px; border-radius: var(--bn-radius-md);
  border: 1px solid;
  cursor: pointer; padding: 2px;
  background: var(--bn-surf-2);
  flex-shrink: 0;
}
.slab input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.slab input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: none; }
.slab .hex-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  width: 88px;
  flex-shrink: 0;
  padding: 0.32rem 0.5rem;
  background: var(--bn-surf-2);
  color: var(--bn-text);
  border: 1px solid;
  border-radius: var(--bn-radius-md);
}
.slab .color-top-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }

/* =====================================================================
   FONT PICKER
===================================================================== */
.slab .font-picker { position: relative; }
.slab .font-search {
  font-family: var(--bn-font-body);
  font-size: 0.85rem;
  background: var(--bn-surf-2);
  color: var(--bn-text);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 0.45rem 0.7rem;
  width: 100%;
  transition: border-color var(--bn-transition);
}
.slab .font-search:focus { outline: none; border-color: var(--bn-acc); }
.slab .font-dropdown {
  position: absolute; z-index: 300;
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: none;
}
.slab .font-picker.open .font-dropdown { display: block; }

.slab .font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.52rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
}
.slab .font-option__label {
  flex: 1;
  font-family: var(--bn-font-body);
  font-size: 0.8rem;
  color: var(--bn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* "Aa" rendered in the actual font once lazy-loaded */
.slab .font-option__sample {
  font-size: 1.15rem;
  color: var(--bn-text-muted);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
  line-height: 1;
}
.slab .font-option:hover { background: var(--bn-acc-subtle); }
.slab .font-option:hover .font-option__label { color: var(--bn-acc); font-weight: 600; }
.slab .font-option:hover .font-option__sample { color: var(--bn-acc); }
.slab .font-option.selected { background: var(--bn-acc-subtle); }
.slab .font-option.selected .font-option__label { color: var(--bn-acc); font-weight: 700; }
.slab .font-option.selected .font-option__sample { color: var(--bn-acc); }

.slab .font-count {
  font-size: 0.65rem;
  color: var(--bn-text-muted);
  padding: 0.3rem 0.75rem 0.4rem;
  border-top: 1px solid var(--bn-bdr);
  font-style: italic;
}
.slab .font-loading {
  font-size: 0.72rem;
  color: var(--bn-text-muted);
  padding: 0.4rem 0.7rem;
  font-style: italic;
}

/* =====================================================================
   SECTION: FONT EXPLORER
===================================================================== */
.slab .font-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Side-by-side layout for font cards: controls on left, preview on right */
.slab .inner-card--font {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
/* Prevent grid cells from expanding past their column fraction */
.slab .inner-card--font > * {
  min-width: 0;
}
/* Font CSS snippet: show multiline output instead of truncating */
.slab .font-card-preview .output-value {
  white-space: pre;
  overflow: auto;
  max-height: 96px;
  text-overflow: initial;
  font-size: 0.7rem;
  line-height: 1.6;
}
/* Font card collapsible toggle */
.slab .font-card-wrap {
  padding: 0;
  overflow: hidden;
}
.slab .font-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--bn-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bn-text-muted);
  text-align: left;
  transition: color 0.15s;
}
.slab .font-card-header:hover { color: var(--bn-acc); }
.slab .font-card-name { flex: 1; }
.slab .font-card-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--bn-text-muted);
}
.slab .font-card-wrap.open .font-card-chevron {
  transform: rotate(180deg);
}
.slab .font-card-body {
  display: none;
  padding: 0 1.1rem 1.1rem;
}
.slab .font-card-wrap.open .font-card-body {
  display: grid;
}

.slab .font-card-controls,
.slab .font-card-preview {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ── Font category filter bar ────────────────────────────────────── */
.slab .font-cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.slab .font-cat-btn {
  font-family: var(--bn-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--bn-bdr);
  background: var(--bn-surf-2);
  color: var(--bn-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.slab .font-cat-btn:hover { border-color: var(--bn-acc); color: var(--bn-acc); }
.slab .font-cat-btn.active {
  background: var(--bn-acc-subtle);
  border-color: var(--bn-acc);
  color: var(--bn-acc);
}

/* ── Font picker loading state ───────────────────────────────────── */
.slab .font-picker--loading .font-search::placeholder {
  color: var(--bn-acc);
  animation: font-loading-pulse 1.2s ease-in-out infinite;
}
@keyframes font-loading-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Recently used / section headers in dropdown ────────────────── */
.slab .font-section-header {
  font-family: var(--bn-font-body);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bn-acc);
  padding: 0.45rem 0.75rem 0.2rem;
}
.slab .font-section-sep {
  height: 1px;
  background: var(--bn-bdr);
  margin: 0.35rem 0;
}

/* ── Keyboard focus in font dropdown ─────────────────────────────── */
.slab .font-option.kbd-focus {
  background: var(--bn-acc-subtle);
  outline: 2px solid var(--bn-acc);
  outline-offset: -2px;
}

/* ── Surprise Me button ──────────────────────────────────────────── */
.slab .font-surprise-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.4rem 1.1rem;
  background: none;
  border: none;
  border-top: 1px dashed rgba(249,115,22,0.45);
  border-bottom: 1px dashed rgba(249,115,22,0.45);
  font-family: var(--bn-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bn-acc);
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 0;
}
.slab .font-surprise-btn:hover { background: var(--bn-acc-subtle); }

/* ── Font pairing presets bar ────────────────────────────────────── */
.slab .font-pairings-bar {
  margin-bottom: 1.25rem;
}
.slab .font-pairings-label {
  font-family: var(--bn-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bn-text-muted);
  margin-bottom: 0.5rem;
}
.slab .font-pairings-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.slab .font-pairing-btn {
  font-family: var(--bn-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #b68d1e;
  background: var(--bn-surf-2);
  color: var(--bn-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.slab .font-pairing-btn:hover {
  border-color: var(--bn-acc);
  color: var(--bn-acc);
  background: var(--bn-acc-subtle);
}
.slab .font-pairing-btn.active {
  background: var(--bn-acc-subtle);
  border-color: var(--bn-acc);
  color: var(--bn-acc);
  font-weight: 700;
}

/* ── Preview theme toggle (dark/light per preview box) ───────────── */
.slab .preview-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.slab .preview-label-row .field-label { margin-bottom: 0; }
.slab .preview-theme-toggle {
  background: none;
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--bn-text-muted);
  transition: border-color 0.12s;
}
.slab .preview-theme-toggle:hover { border-color: var(--bn-acc); }

/* Dark preview mode */
.slab .font-preview-box.preview--dark {
  background: #1a1a1a;
  border-color: #333;
  color: #f0f0f0;
}

/* ── Preview text preset buttons ─────────────────────────────────── */
.slab .font-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}
.slab .font-preset-btn {
  font-family: var(--bn-font-body);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bn-bdr);
  background: var(--bn-surf-2);
  color: var(--bn-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.slab .font-preset-btn:hover { border-color: var(--bn-acc); color: var(--bn-acc); }

/* ── Accordion description text ──────────────────────────────────── */
.slab .accordion-desc {
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bn-text-muted);
  opacity: 0.8;
  margin-top: 0.15rem;
  font-family: var(--bn-font-body);
}
/* The accordion title+desc stack vertically */
.slab .accordion-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}
.slab .accordion-title-wrap .accordion-title { /* inherits existing styles */ }

/* ── Slider click-to-edit input ──────────────────────────────────── */
.slab .slider-edit-input {
  width: 48px;
  font-size: 0.72rem;
  font-family: var(--bn-font-body);
  padding: 0.1rem 0.25rem;
  border: 1px solid var(--bn-acc);
  border-radius: var(--bn-radius-md);
  background: var(--bn-surf-2);
  color: var(--bn-text);
  text-align: center;
  -moz-appearance: textfield;
}
.slab .slider-edit-input::-webkit-outer-spin-button,
.slab .slider-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Copy all fonts row ──────────────────────────────────────────── */
.slab .copy-all-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.slab .font-preview-box {
  min-height: 80px; padding: 1rem;
  background: var(--bn-bg);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  color: var(--bn-text);
  word-break: break-word;
  transition: all 0.15s;
  flex: 1;
}
.slab .combined-preview-box {
  background: var(--bn-bg);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 2rem 2.25rem;
}
.slab .combined-h1 {
  font-size: 2.2rem; font-weight: 700; line-height: 1.2;
  margin-bottom: 0.5rem; color: var(--bn-text);
  transition: font-family 0.15s; word-break: break-word;
}
.slab .combined-h2 {
  font-size: 1.25rem; font-weight: 600; line-height: 1.4;
  margin-bottom: 1rem; color: var(--bn-text-muted);
  transition: font-family 0.15s; word-break: break-word;
}
.slab .combined-body-text {
  font-size: 1rem; line-height: 1.7; color: var(--bn-text);
  transition: font-family 0.15s; word-break: break-word;
}
.slab .combined-preview-label {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--bn-text-muted); margin-bottom: 0.2rem;
}
.slab .combined-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; color: var(--bn-text-muted);
  opacity: 0.6; margin-right: 0.5rem;
}

/* =====================================================================
   SECTION: COLOR PALETTE
===================================================================== */
.slab .color-card {
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  overflow: hidden;
}
.slab .color-swatch {
  height: 110px; width: 100%;
  transition: background 0.1s;
  cursor: pointer;
}
.slab .color-sliders { padding: 0.75rem 0.85rem 0.5rem; }
.slab .color-outputs { padding: 0 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; }

/* =====================================================================
   SECTION: CORNER ROUNDING
===================================================================== */
.slab .br-preview {
  width: 200px; height: 140px;
  background: var(--bn-acc); opacity: 0.85;
  margin: 1rem auto;
  transition: border-radius 0.12s;
}

/* =====================================================================
   SECTION: SHADOWS
===================================================================== */
.slab .bs-preview {
  width: 200px; height: 140px;
  background: var(--bn-surf);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  margin: 1.25rem auto;
  transition: box-shadow 0.12s;
}

/* =====================================================================
   SECTION: SPACING
===================================================================== */
.slab .spacing-stage {
  height: 200px;
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0.75rem 0; overflow: hidden; position: relative;
}
.slab .margin-area {
  background: rgba(251,191,36,0.18);
  border: 2px dashed #d97706;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: all 0.12s;
  min-width: 60px; min-height: 40px;
}
.slab .padding-area {
  background: rgba(34,197,94,0.18);
  border: 2px solid #16a34a;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
  min-width: 30px; min-height: 20px;
}
.slab .content-area {
  background: var(--bn-acc); opacity: 0.7;
  border-radius: 3px;
  min-width: 30px; min-height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: var(--bn-acc-on);
}
.slab .spacing-legend { display: flex; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.slab .legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: var(--bn-text-muted); }
.slab .legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* =====================================================================
   SECTION: GRADIENT BUILDER
===================================================================== */
.slab .gradient-preview {
  height: 110px;
  border-radius: var(--bn-radius-md);
  margin: 0.75rem 0;
  transition: background 0.12s;
}
.slab .dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-bottom: 0.85rem; }
.slab .dir-btn {
  padding: 0.42rem 0.4rem; font-size: 0.68rem;
  font-family: var(--bn-font-body); font-weight: 700;
  background: var(--bn-surf-2); color: var(--bn-text-muted);
  border: 1px solid var(--bn-bdr); border-radius: var(--bn-radius-md);
  cursor: pointer; text-align: center;
  transition: all 0.15s; white-space: nowrap; min-height: 36px;
}
.slab .dir-btn:hover,
.slab .dir-btn.active { background: var(--bn-acc-subtle); color: var(--bn-acc); border-color: var(--bn-acc); }
.slab .grad-swatch { height: 32px; border-radius: var(--bn-radius-md); margin-top: 0.4rem; transition: background 0.1s; }
.slab .stop-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  margin-bottom: 0.4rem;
}
.slab .stop-remove {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--bn-bdr); background: var(--bn-surf);
  cursor: pointer; font-size: 0.75rem; color: #dc2626;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.slab .stop-remove:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.slab .add-stop-btn {
  width: 100%; padding: 0.45rem; font-size: 0.72rem;
  font-family: var(--bn-font-body); font-weight: 700;
  background: var(--bn-surf-2); color: var(--bn-text-muted);
  border: 1px dashed var(--bn-bdr); border-radius: var(--bn-radius-md);
  cursor: pointer; transition: all 0.15s; min-height: 36px;
}
.slab .add-stop-btn:hover { border-color: var(--bn-acc); color: var(--bn-acc); background: var(--bn-acc-subtle); }
.slab .grad-type-row { display: flex; gap: 0.4rem; margin-bottom: 0.85rem; }
.slab .grad-type-btn {
  flex: 1; padding: 0.42rem; font-size: 0.72rem;
  font-family: var(--bn-font-body); font-weight: 700;
  background: var(--bn-surf-2); color: var(--bn-text-muted);
  border: 1px solid var(--bn-bdr); border-radius: var(--bn-radius-md);
  cursor: pointer; transition: all 0.15s; min-height: 36px;
}
.slab .grad-type-btn.active { background: var(--bn-acc-subtle); color: var(--bn-acc); border-color: var(--bn-acc); }
.slab .deg-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; }

/* =====================================================================
   SECTION: READABILITY CHECKER
===================================================================== */
.slab .contrast-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.slab .contrast-preview {
  padding: 1.25rem 1.4rem;
  border-radius: var(--bn-radius-md);
  font-size: 1rem; font-weight: 600; text-align: center;
  transition: all 0.12s;
  border: 1px solid var(--bn-bdr);
  margin: 0.75rem 0;
}
.slab .contrast-results {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  margin-top: 0.85rem;
}
.slab .contrast-card {
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 0.75rem;
  text-align: center;
}
.slab .cc-label {
  font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--bn-text-muted);
  font-weight: 700; margin-bottom: 0.2rem;
}
.slab .cc-ratio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem; font-weight: 700; color: var(--bn-text);
}
.slab .badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: var(--bn-radius-full);
  font-size: 0.66rem; font-weight: 800; margin-top: 0.25rem;
}
.slab .badge-pass { background: rgba(22,163,74,0.15); color: #16a34a; }
.slab .badge-fail { background: rgba(220,38,38,0.15); color: #dc2626; }

/* =====================================================================
   SECTION: TEXT SHADOW
===================================================================== */
.slab .ts-preview {
  font-size: 2.5rem; font-weight: 800; text-align: center;
  padding: 1.5rem;
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  margin: 0.75rem 0;
  transition: text-shadow 0.12s;
  font-family: var(--bn-font-display);
  color: var(--bn-text);
}

/* =====================================================================
   SECTION: CSS TRANSFORM
===================================================================== */
.slab .tf-stage {
  height: 180px;
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0.75rem 0; overflow: hidden;
}
.slab .tf-box {
  width: 80px; height: 80px;
  background: var(--bn-acc);
  border-radius: var(--bn-radius-md); opacity: 0.85;
  transition: transform 0.15s;
  display: flex; align-items: center; justify-content: center;
  color: var(--bn-acc-on); font-size: 0.65rem; font-weight: 700;
}

/* =====================================================================
   SECTION: CSS FILTER
===================================================================== */
.slab .filter-preview {
  height: 140px;
  border-radius: var(--bn-radius-md);
  margin: 0.75rem 0;
  transition: filter 0.15s;
  overflow: hidden;
  background: linear-gradient(135deg, #B8860B 0%, #D4A017 35%, #E8B420 65%, #9A7009 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 700;
}

/* =====================================================================
   SECTION: TRANSITION BUILDER
===================================================================== */
.slab .trans-demo-wrap {
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-radius: var(--bn-radius-md);
  padding: 1.25rem; margin: 0.75rem 0;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.slab .trans-demo-box {
  width: 80px; height: 80px;
  background: var(--bn-acc);
  border-radius: var(--bn-radius-md); opacity: 0.85;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--bn-acc-on); font-size: 0.62rem; font-weight: 700; text-align: center;
}
.slab .trans-demo-note { font-size: 0.72rem; color: var(--bn-text-muted); }

/* =====================================================================
   SECTION: COLOR HARMONY
===================================================================== */
.slab .harmony-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.slab .harmony-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  flex: 1; min-width: 80px;
}
.slab .harmony-color {
  height: 70px; border-radius: var(--bn-radius-md);
  width: 100%; border: 1px solid var(--bn-bdr);
}
.slab .harmony-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: var(--bn-text-muted);
}
.slab .harmony-btn-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }
.slab .harmony-btn {
  padding: 0.42rem 0.75rem; font-size: 0.72rem;
  font-family: var(--bn-font-body); font-weight: 700;
  background: var(--bn-surf-2); color: var(--bn-text-muted);
  border: 1px solid var(--bn-bdr); border-radius: var(--bn-radius-md);
  cursor: pointer; transition: all 0.15s; min-height: 36px;
}
.slab .harmony-btn:hover,
.slab .harmony-btn.active { background: var(--bn-acc-subtle); color: var(--bn-acc); border-color: var(--bn-acc); }

/* =====================================================================
   SECTION HINTS (instruction text)
===================================================================== */
.slab-hint {
  font-family: var(--bn-font-body);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--bn-text-muted);
  background: var(--bn-surf-2);
  border: 1px solid var(--bn-bdr);
  border-left: 3px solid var(--bn-acc);
  border-radius: 0 var(--bn-radius-md) var(--bn-radius-md) 0;
  padding: 0.55rem 0.85rem;
  margin-bottom: 1rem;
}

/* ── Harmony base color swatch ──────────────────────────────────────── */
.slab .harmony-base-swatch {
  height: 52px;
  border-radius: var(--bn-radius-md);
  border: 1px solid var(--bn-bdr);
  margin-bottom: 0.65rem;
  transition: background 0.1s;
  background: #B8860B;
}

/* =====================================================================
   SECTION: TYPE SCALE
===================================================================== */
.slab .scale-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.75rem 0; }
.slab .scale-table th {
  text-align: left; padding: 0.4rem 0.65rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bn-text-muted); border-bottom: 1px solid var(--bn-bdr);
}
.slab .scale-table td {
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--bn-bdr);
  transition: background 0.1s;
}
.slab .scale-table tr:hover td { background: var(--bn-surf-2); }
.slab .scale-table td:nth-child(3) { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--bn-acc); }
.slab .scale-table td:nth-child(4) { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--bn-text-muted); }
.slab .scale-sample { font-weight: 700; color: var(--bn-text); line-height: 1; }
.slab .scale-base-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.slab .scale-base-row label { font-size: 0.72rem; color: var(--bn-text-muted); font-weight: 600; white-space: nowrap; }
.slab .scale-base-row input[type="number"] { width: 75px; }
.slab .scale-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   CTA SECTION (bottom of Style Lab page)
===================================================================== */
.lab-cta {
  padding: 64px 24px 80px;
  text-align: center;
  background: var(--bn-acc-subtle);
}

.lab-cta__inner {
  max-width: 560px;
  margin: 0 auto;
}

.lab-cta .rule {
  margin: 0 auto 20px;
}

.lab-cta__title {
  font-family: var(--bn-font-display);
  font-size: var(--bn-fs-h2);
  font-weight: var(--bn-fw-h2);
  line-height: var(--bn-lh-h2);
  letter-spacing: var(--bn-ls-h2);
  color: var(--bn-text);
  margin-bottom: 12px;
}

.lab-cta__sub {
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-body);
  line-height: 1.6;
  color: var(--bn-text-muted);
  margin-bottom: 28px;
}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 900px) {
  .slab .contrast-results { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .slab__inner { padding: 0 0.75rem 1.5rem; }
  .slab .accordion-body { padding: 1rem; }
  .slab__export-label { display: none; }
  .slab .g2 { grid-template-columns: 1fr; }
  .slab .inner-card--font { grid-template-columns: 1fr; }
  .slab .g4 { grid-template-columns: 1fr 1fr; }
  .slab .dir-grid { grid-template-columns: repeat(3, 1fr); }
  .slab .contrast-results { grid-template-columns: 1fr 1fr; }
  .slab .slider-label { min-width: 68px; font-size: 0.68rem; }
  .slab .slider-value { min-width: 36px; font-size: 0.68rem; }
  .slab .combined-h1 { font-size: 1.6rem; }
  .slab .combined-h2 { font-size: 1rem; }
  .slab .combined-body-text { font-size: 0.9rem; }
  .slab .combined-preview-box { padding: 1.25rem; }
  .slab .harmony-swatch { min-width: 60px; }
  .slab .scale-table-wrap { overflow-x: auto; }
  .slab .stop-row { flex-wrap: wrap; }
  .slab .ts-preview { font-size: 1.75rem; padding: 1rem; }
  .slab__tier-toggle { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .slab .contrast-results { grid-template-columns: 1fr 1fr; }
  .slab .g4 { grid-template-columns: 1fr 1fr; }
  .slab .accordion-title { font-size: 0.85rem; }
  .slab .combined-h1 { font-size: 1.35rem; }
  .slab .harmony-swatch { min-width: 50px; }
}