/* ==========================================================================
   webel.css — Component styles following Radix Themes patterns

   Uses CSS custom properties from the theme system (--gray-1..12, --accent-a3, etc.)
   injected on #shell by the SPA.

   Naming: .wb-{component}.wb-{variant}
   Accent: data-accent="accent|gray|red|green|amber|orange"
   ========================================================================== */

/* ==========================================================================
   Note: Radius tokens are now in radix-tokens.css (via data-radius attribute).
   ========================================================================== */

/* ==========================================================================
   Accent color mapping

   Maps the data-accent attribute to local --_ prefixed custom properties.
   Components reference --_9, --_a3, etc. so they work with any accent.
   Default (no data-accent or data-accent="accent") uses the accent scale.
   ========================================================================== */

[data-accent] {
  --_1: var(--accent-1); --_2: var(--accent-2); --_3: var(--accent-3);
  --_9: var(--accent-9); --_10: var(--accent-10); --_11: var(--accent-11); --_12: var(--accent-12);
  --_contrast: var(--accent-contrast);
  --_surface: var(--accent-surface);
  --_a2: var(--accent-a2); --_a3: var(--accent-a3); --_a4: var(--accent-a4);
  --_a5: var(--accent-a5); --_a6: var(--accent-a6);
  --_a7: var(--accent-a7); --_a8: var(--accent-a8); --_a11: var(--accent-a11);
}
[data-accent="gray"] {
  --_1: var(--gray-1); --_2: var(--gray-2); --_3: var(--gray-3);
  --_9: var(--gray-9); --_10: var(--gray-10); --_11: var(--gray-11); --_12: var(--gray-12);
  --_contrast: #ffffff;
  --_surface: var(--gray-surface);
  --_a2: var(--gray-a2); --_a3: var(--gray-a3); --_a4: var(--gray-a4);
  --_a5: var(--gray-a5); --_a6: var(--gray-a6);
  --_a7: var(--gray-a7); --_a8: var(--gray-a8); --_a11: var(--gray-a11);
}
[data-accent="red"] {
  --_1: var(--red-1); --_2: var(--red-2); --_3: var(--red-3);
  --_9: var(--red-9); --_10: var(--red-10); --_11: var(--red-11); --_12: var(--red-12);
  --_contrast: var(--red-contrast);
  --_surface: var(--red-surface);
  --_a2: var(--red-a2); --_a3: var(--red-a3); --_a4: var(--red-a4);
  --_a5: var(--red-a5); --_a6: var(--red-a6);
  --_a7: var(--red-a7); --_a8: var(--red-a8); --_a11: var(--red-a11);
}
[data-accent="green"] {
  --_1: var(--green-1); --_2: var(--green-2); --_3: var(--green-3);
  --_9: var(--green-9); --_10: var(--green-10); --_11: var(--green-11); --_12: var(--green-12);
  --_contrast: var(--green-contrast);
  --_surface: var(--green-surface);
  --_a2: var(--green-a2); --_a3: var(--green-a3); --_a4: var(--green-a4);
  --_a5: var(--green-a5); --_a6: var(--green-a6);
  --_a7: var(--green-a7); --_a8: var(--green-a8); --_a11: var(--green-a11);
}
[data-accent="amber"] {
  --_1: var(--amber-1); --_2: var(--amber-2); --_3: var(--amber-3);
  --_9: var(--amber-9); --_10: var(--amber-10); --_11: var(--amber-11); --_12: var(--amber-12);
  --_contrast: var(--amber-contrast);
  --_surface: var(--amber-surface);
  --_a2: var(--amber-a2); --_a3: var(--amber-a3); --_a4: var(--amber-a4);
  --_a5: var(--amber-a5); --_a6: var(--amber-a6);
  --_a7: var(--amber-a7); --_a8: var(--amber-a8); --_a11: var(--amber-a11);
}
[data-accent="orange"] {
  --_1: var(--orange-1); --_2: var(--orange-2); --_3: var(--orange-3);
  --_9: var(--orange-9); --_10: var(--orange-10); --_11: var(--orange-11); --_12: var(--orange-12);
  --_contrast: var(--orange-contrast);
  --_surface: var(--orange-surface);
  --_a2: var(--orange-a2); --_a3: var(--orange-a3); --_a4: var(--orange-a4);
  --_a5: var(--orange-a5); --_a6: var(--orange-a6);
  --_a7: var(--orange-a7); --_a8: var(--orange-a8); --_a11: var(--orange-a11);
}
[data-accent="blue"] {
  --_1: var(--blue-1); --_2: var(--blue-2); --_3: var(--blue-3);
  --_9: var(--blue-9); --_10: var(--blue-10); --_11: var(--blue-11); --_12: var(--blue-12);
  --_contrast: var(--blue-contrast);
  --_surface: var(--blue-surface);
  --_a2: var(--blue-a2); --_a3: var(--blue-a3); --_a4: var(--blue-a4);
  --_a5: var(--blue-a5); --_a6: var(--blue-a6);
  --_a7: var(--blue-a7); --_a8: var(--blue-a8); --_a11: var(--blue-a11);
}
[data-accent="bronze"] {
  --_1: var(--bronze-1); --_2: var(--bronze-2); --_3: var(--bronze-3);
  --_9: var(--bronze-9); --_10: var(--bronze-10); --_11: var(--bronze-11); --_12: var(--bronze-12);
  --_contrast: var(--bronze-contrast);
  --_surface: var(--bronze-surface);
  --_a2: var(--bronze-a2); --_a3: var(--bronze-a3); --_a4: var(--bronze-a4);
  --_a5: var(--bronze-a5); --_a6: var(--bronze-a6);
  --_a7: var(--bronze-a7); --_a8: var(--bronze-a8); --_a11: var(--bronze-a11);
}
[data-accent="brown"] {
  --_1: var(--brown-1); --_2: var(--brown-2); --_3: var(--brown-3);
  --_9: var(--brown-9); --_10: var(--brown-10); --_11: var(--brown-11); --_12: var(--brown-12);
  --_contrast: var(--brown-contrast);
  --_surface: var(--brown-surface);
  --_a2: var(--brown-a2); --_a3: var(--brown-a3); --_a4: var(--brown-a4);
  --_a5: var(--brown-a5); --_a6: var(--brown-a6);
  --_a7: var(--brown-a7); --_a8: var(--brown-a8); --_a11: var(--brown-a11);
}
[data-accent="crimson"] {
  --_1: var(--crimson-1); --_2: var(--crimson-2); --_3: var(--crimson-3);
  --_9: var(--crimson-9); --_10: var(--crimson-10); --_11: var(--crimson-11); --_12: var(--crimson-12);
  --_contrast: var(--crimson-contrast);
  --_surface: var(--crimson-surface);
  --_a2: var(--crimson-a2); --_a3: var(--crimson-a3); --_a4: var(--crimson-a4);
  --_a5: var(--crimson-a5); --_a6: var(--crimson-a6);
  --_a7: var(--crimson-a7); --_a8: var(--crimson-a8); --_a11: var(--crimson-a11);
}
[data-accent="cyan"] {
  --_1: var(--cyan-1); --_2: var(--cyan-2); --_3: var(--cyan-3);
  --_9: var(--cyan-9); --_10: var(--cyan-10); --_11: var(--cyan-11); --_12: var(--cyan-12);
  --_contrast: var(--cyan-contrast);
  --_surface: var(--cyan-surface);
  --_a2: var(--cyan-a2); --_a3: var(--cyan-a3); --_a4: var(--cyan-a4);
  --_a5: var(--cyan-a5); --_a6: var(--cyan-a6);
  --_a7: var(--cyan-a7); --_a8: var(--cyan-a8); --_a11: var(--cyan-a11);
}
[data-accent="gold"] {
  --_1: var(--gold-1); --_2: var(--gold-2); --_3: var(--gold-3);
  --_9: var(--gold-9); --_10: var(--gold-10); --_11: var(--gold-11); --_12: var(--gold-12);
  --_contrast: var(--gold-contrast);
  --_surface: var(--gold-surface);
  --_a2: var(--gold-a2); --_a3: var(--gold-a3); --_a4: var(--gold-a4);
  --_a5: var(--gold-a5); --_a6: var(--gold-a6);
  --_a7: var(--gold-a7); --_a8: var(--gold-a8); --_a11: var(--gold-a11);
}
[data-accent="grass"] {
  --_1: var(--grass-1); --_2: var(--grass-2); --_3: var(--grass-3);
  --_9: var(--grass-9); --_10: var(--grass-10); --_11: var(--grass-11); --_12: var(--grass-12);
  --_contrast: var(--grass-contrast);
  --_surface: var(--grass-surface);
  --_a2: var(--grass-a2); --_a3: var(--grass-a3); --_a4: var(--grass-a4);
  --_a5: var(--grass-a5); --_a6: var(--grass-a6);
  --_a7: var(--grass-a7); --_a8: var(--grass-a8); --_a11: var(--grass-a11);
}
[data-accent="indigo"] {
  --_1: var(--indigo-1); --_2: var(--indigo-2); --_3: var(--indigo-3);
  --_9: var(--indigo-9); --_10: var(--indigo-10); --_11: var(--indigo-11); --_12: var(--indigo-12);
  --_contrast: var(--indigo-contrast);
  --_surface: var(--indigo-surface);
  --_a2: var(--indigo-a2); --_a3: var(--indigo-a3); --_a4: var(--indigo-a4);
  --_a5: var(--indigo-a5); --_a6: var(--indigo-a6);
  --_a7: var(--indigo-a7); --_a8: var(--indigo-a8); --_a11: var(--indigo-a11);
}
[data-accent="iris"] {
  --_1: var(--iris-1); --_2: var(--iris-2); --_3: var(--iris-3);
  --_9: var(--iris-9); --_10: var(--iris-10); --_11: var(--iris-11); --_12: var(--iris-12);
  --_contrast: var(--iris-contrast);
  --_surface: var(--iris-surface);
  --_a2: var(--iris-a2); --_a3: var(--iris-a3); --_a4: var(--iris-a4);
  --_a5: var(--iris-a5); --_a6: var(--iris-a6);
  --_a7: var(--iris-a7); --_a8: var(--iris-a8); --_a11: var(--iris-a11);
}
[data-accent="jade"] {
  --_1: var(--jade-1); --_2: var(--jade-2); --_3: var(--jade-3);
  --_9: var(--jade-9); --_10: var(--jade-10); --_11: var(--jade-11); --_12: var(--jade-12);
  --_contrast: var(--jade-contrast);
  --_surface: var(--jade-surface);
  --_a2: var(--jade-a2); --_a3: var(--jade-a3); --_a4: var(--jade-a4);
  --_a5: var(--jade-a5); --_a6: var(--jade-a6);
  --_a7: var(--jade-a7); --_a8: var(--jade-a8); --_a11: var(--jade-a11);
}
[data-accent="lime"] {
  --_1: var(--lime-1); --_2: var(--lime-2); --_3: var(--lime-3);
  --_9: var(--lime-9); --_10: var(--lime-10); --_11: var(--lime-11); --_12: var(--lime-12);
  --_contrast: var(--lime-contrast);
  --_surface: var(--lime-surface);
  --_a2: var(--lime-a2); --_a3: var(--lime-a3); --_a4: var(--lime-a4);
  --_a5: var(--lime-a5); --_a6: var(--lime-a6);
  --_a7: var(--lime-a7); --_a8: var(--lime-a8); --_a11: var(--lime-a11);
}
[data-accent="mint"] {
  --_1: var(--mint-1); --_2: var(--mint-2); --_3: var(--mint-3);
  --_9: var(--mint-9); --_10: var(--mint-10); --_11: var(--mint-11); --_12: var(--mint-12);
  --_contrast: var(--mint-contrast);
  --_surface: var(--mint-surface);
  --_a2: var(--mint-a2); --_a3: var(--mint-a3); --_a4: var(--mint-a4);
  --_a5: var(--mint-a5); --_a6: var(--mint-a6);
  --_a7: var(--mint-a7); --_a8: var(--mint-a8); --_a11: var(--mint-a11);
}
[data-accent="pink"] {
  --_1: var(--pink-1); --_2: var(--pink-2); --_3: var(--pink-3);
  --_9: var(--pink-9); --_10: var(--pink-10); --_11: var(--pink-11); --_12: var(--pink-12);
  --_contrast: var(--pink-contrast);
  --_surface: var(--pink-surface);
  --_a2: var(--pink-a2); --_a3: var(--pink-a3); --_a4: var(--pink-a4);
  --_a5: var(--pink-a5); --_a6: var(--pink-a6);
  --_a7: var(--pink-a7); --_a8: var(--pink-a8); --_a11: var(--pink-a11);
}
[data-accent="plum"] {
  --_1: var(--plum-1); --_2: var(--plum-2); --_3: var(--plum-3);
  --_9: var(--plum-9); --_10: var(--plum-10); --_11: var(--plum-11); --_12: var(--plum-12);
  --_contrast: var(--plum-contrast);
  --_surface: var(--plum-surface);
  --_a2: var(--plum-a2); --_a3: var(--plum-a3); --_a4: var(--plum-a4);
  --_a5: var(--plum-a5); --_a6: var(--plum-a6);
  --_a7: var(--plum-a7); --_a8: var(--plum-a8); --_a11: var(--plum-a11);
}
[data-accent="purple"] {
  --_1: var(--purple-1); --_2: var(--purple-2); --_3: var(--purple-3);
  --_9: var(--purple-9); --_10: var(--purple-10); --_11: var(--purple-11); --_12: var(--purple-12);
  --_contrast: var(--purple-contrast);
  --_surface: var(--purple-surface);
  --_a2: var(--purple-a2); --_a3: var(--purple-a3); --_a4: var(--purple-a4);
  --_a5: var(--purple-a5); --_a6: var(--purple-a6);
  --_a7: var(--purple-a7); --_a8: var(--purple-a8); --_a11: var(--purple-a11);
}
[data-accent="ruby"] {
  --_1: var(--ruby-1); --_2: var(--ruby-2); --_3: var(--ruby-3);
  --_9: var(--ruby-9); --_10: var(--ruby-10); --_11: var(--ruby-11); --_12: var(--ruby-12);
  --_contrast: var(--ruby-contrast);
  --_surface: var(--ruby-surface);
  --_a2: var(--ruby-a2); --_a3: var(--ruby-a3); --_a4: var(--ruby-a4);
  --_a5: var(--ruby-a5); --_a6: var(--ruby-a6);
  --_a7: var(--ruby-a7); --_a8: var(--ruby-a8); --_a11: var(--ruby-a11);
}
[data-accent="sky"] {
  --_1: var(--sky-1); --_2: var(--sky-2); --_3: var(--sky-3);
  --_9: var(--sky-9); --_10: var(--sky-10); --_11: var(--sky-11); --_12: var(--sky-12);
  --_contrast: var(--sky-contrast);
  --_surface: var(--sky-surface);
  --_a2: var(--sky-a2); --_a3: var(--sky-a3); --_a4: var(--sky-a4);
  --_a5: var(--sky-a5); --_a6: var(--sky-a6);
  --_a7: var(--sky-a7); --_a8: var(--sky-a8); --_a11: var(--sky-a11);
}
[data-accent="teal"] {
  --_1: var(--teal-1); --_2: var(--teal-2); --_3: var(--teal-3);
  --_9: var(--teal-9); --_10: var(--teal-10); --_11: var(--teal-11); --_12: var(--teal-12);
  --_contrast: var(--teal-contrast);
  --_surface: var(--teal-surface);
  --_a2: var(--teal-a2); --_a3: var(--teal-a3); --_a4: var(--teal-a4);
  --_a5: var(--teal-a5); --_a6: var(--teal-a6);
  --_a7: var(--teal-a7); --_a8: var(--teal-a8); --_a11: var(--teal-a11);
}
[data-accent="tomato"] {
  --_1: var(--tomato-1); --_2: var(--tomato-2); --_3: var(--tomato-3);
  --_9: var(--tomato-9); --_10: var(--tomato-10); --_11: var(--tomato-11); --_12: var(--tomato-12);
  --_contrast: var(--tomato-contrast);
  --_surface: var(--tomato-surface);
  --_a2: var(--tomato-a2); --_a3: var(--tomato-a3); --_a4: var(--tomato-a4);
  --_a5: var(--tomato-a5); --_a6: var(--tomato-a6);
  --_a7: var(--tomato-a7); --_a8: var(--tomato-a8); --_a11: var(--tomato-a11);
}
[data-accent="violet"] {
  --_1: var(--violet-1); --_2: var(--violet-2); --_3: var(--violet-3);
  --_9: var(--violet-9); --_10: var(--violet-10); --_11: var(--violet-11); --_12: var(--violet-12);
  --_contrast: var(--violet-contrast);
  --_surface: var(--violet-surface);
  --_a2: var(--violet-a2); --_a3: var(--violet-a3); --_a4: var(--violet-a4);
  --_a5: var(--violet-a5); --_a6: var(--violet-a6);
  --_a7: var(--violet-a7); --_a8: var(--violet-a8); --_a11: var(--violet-a11);
}
[data-accent="yellow"] {
  --_1: var(--yellow-1); --_2: var(--yellow-2); --_3: var(--yellow-3);
  --_9: var(--yellow-9); --_10: var(--yellow-10); --_11: var(--yellow-11); --_12: var(--yellow-12);
  --_contrast: var(--yellow-contrast);
  --_surface: var(--yellow-surface);
  --_a2: var(--yellow-a2); --_a3: var(--yellow-a3); --_a4: var(--yellow-a4);
  --_a5: var(--yellow-a5); --_a6: var(--yellow-a6);
  --_a7: var(--yellow-a7); --_a8: var(--yellow-a8); --_a11: var(--yellow-a11);
}

/* ==========================================================================
   Buttons

   Variants (from Radix Themes):
     solid   — filled accent-9 background, contrast text
     soft    — tinted accent-a3 background, accent text, no border
     outline — transparent, accent-a8 border (box-shadow), accent text
     ghost   — transparent, no border, accent text, hover shows bg
     surface — accent-surface bg, accent-a7 border, accent text

   High contrast follows Radix pattern: per-component overrides,
   NOT global variable overrides.
   ========================================================================== */

.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  padding: 5px 14px;
  border-radius: var(--radius-2);
  border: none;
  outline: none;
  background: none;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 80ms, box-shadow 80ms, color 80ms, filter 80ms;
}
.wb-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* -- Solid -- */
.wb-btn.wb-solid {
  background-color: var(--_9);
  color: var(--_contrast);
}
@media (hover: hover) {
  .wb-btn.wb-solid:hover { background-color: var(--_10); }
}
.wb-btn.wb-solid:active:not([data-disabled]) {
  background-color: var(--_10);
  filter: brightness(0.92) saturate(1.1);
}
/* HC solid: accent-11 bg (keeps color distinguishable), contrast text */
#shell[data-high-contrast="true"] .wb-btn.wb-solid {
  background-color: var(--_11);
  color: var(--gray-1);
}
@media (hover: hover) {
  #shell[data-high-contrast="true"] .wb-btn.wb-solid:hover {
    filter: contrast(0.88) saturate(1.1) brightness(1.1);
  }
}
#shell[data-high-contrast="true"] .wb-btn.wb-solid:active:not([data-disabled]) {
  filter: contrast(0.82) saturate(1.2) brightness(1.16);
}

/* -- Soft -- */
.wb-btn.wb-soft {
  background-color: var(--_a3);
  color: var(--_a11);
}
@media (hover: hover) {
  .wb-btn.wb-soft:hover { background-color: var(--_a4); }
}
.wb-btn.wb-soft:active:not([data-disabled]) {
  background-color: var(--_a5);
}
/* HC soft: stronger text */
#shell[data-high-contrast="true"] .wb-btn.wb-soft {
  color: var(--_12);
}

/* -- Outline -- */
.wb-btn.wb-outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--_a8);
  color: var(--_a11);
}
@media (hover: hover) {
  .wb-btn.wb-outline:hover { background-color: var(--_a2); }
}
.wb-btn.wb-outline:active:not([data-disabled]) {
  background-color: var(--_a3);
}
/* HC outline: stronger border + text */
#shell[data-high-contrast="true"] .wb-btn.wb-outline {
  box-shadow: inset 0 0 0 1px var(--_a7), inset 0 0 0 1px var(--gray-a11);
  color: var(--_12);
}

/* -- Ghost -- */
.wb-btn.wb-ghost {
  background-color: transparent;
  color: var(--_a11);
}
@media (hover: hover) {
  .wb-btn.wb-ghost:hover { background-color: var(--_a3); }
}
.wb-btn.wb-ghost:active:not([data-disabled]) {
  background-color: var(--_a4);
}
/* HC ghost: stronger text */
#shell[data-high-contrast="true"] .wb-btn.wb-ghost {
  color: var(--_12);
}

/* -- Surface -- */
.wb-btn.wb-surface {
  background-color: var(--_surface);
  box-shadow: inset 0 0 0 1px var(--_a7);
  color: var(--_a11);
}
@media (hover: hover) {
  .wb-btn.wb-surface:hover { box-shadow: inset 0 0 0 1px var(--_a8); }
}
.wb-btn.wb-surface:active:not([data-disabled]) {
  background-color: var(--_a3);
  box-shadow: inset 0 0 0 1px var(--_a8);
}
/* HC surface: stronger border + text */
#shell[data-high-contrast="true"] .wb-btn.wb-surface {
  box-shadow: inset 0 0 0 1px var(--_a7), inset 0 0 0 1px var(--gray-a11);
  color: var(--_12);
}

/* -- Disabled (all variants, overrides HC too) -- */
.wb-btn[data-disabled] {
  cursor: not-allowed;
  color: var(--gray-a8);
  background-color: var(--gray-a3);
  box-shadow: none;
  filter: none;
}

/* ==========================================================================
   Button group (segmented control)

   Matches the Radix SegmentedControl pattern exactly:
   - Root: --color-surface + gray-a3 overlay (translucent tinted surface)
   - Text: gray-12 (highest contrast)
   - Inactive items: transparent bg, text inherited from root
   - Active item (solid): opaque accent bg with contrast text
   - 1px gray-a4 separators between items
   ========================================================================== */

.wb-btn-group {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-2);
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--gray-a3), var(--gray-a3));
  color: var(--gray-12);
  overflow: hidden;
}
.wb-btn-group > .wb-btn {
  border-radius: 0;
  flex-shrink: 0;
}
.wb-btn-group > .wb-btn:first-child {
  border-radius: var(--radius-2) 0 0 var(--radius-2);
}
.wb-btn-group > .wb-btn:last-child {
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}
/* Inactive buttons in group: transparent bg, inherit root text color */
.wb-btn-group > .wb-btn.wb-soft,
.wb-btn-group > .wb-btn.wb-surface,
.wb-btn-group > .wb-btn.wb-outline {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}
@media (hover: hover) {
  .wb-btn-group > .wb-btn.wb-soft:hover,
  .wb-btn-group > .wb-btn.wb-surface:hover,
  .wb-btn-group > .wb-btn.wb-outline:hover {
    background-color: var(--gray-a2);
  }
}
.wb-btn-group > .wb-btn.wb-soft:active:not([data-disabled]),
.wb-btn-group > .wb-btn.wb-surface:active:not([data-disabled]),
.wb-btn-group > .wb-btn.wb-outline:active:not([data-disabled]) {
  background-color: var(--gray-a3);
}
/* Separators: 1px line between items */
.wb-btn-group > .wb-btn + .wb-btn {
  box-shadow: -1px 0 0 0 var(--gray-a4);
}
/* No separator next to a solid (active) button */
.wb-btn-group > .wb-btn.wb-solid {
  box-shadow: none;
}
.wb-btn-group > .wb-btn.wb-solid + .wb-btn {
  box-shadow: none;
}

/* Icon buttons — buttons with icon + text children.
   Inherits all .wb-btn variant styles. Adds wider gap for icon spacing.
   Icons inherit the button text color. */
.wb-btn.wb-icon-btn {
  gap: 6px;
}
/* Icons in buttons: ensure duotone layers use the button text color as base.
   The natural duotone shading (primary 100 %, secondary 40 %) is preserved. */
.wb-btn .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
}
/* Icons in tab bars / navigation: no override — FA defaults apply. */

/* ==========================================================================
   Badges

   Variants:
     soft  — tinted background, colored text, subtle border (Radix "soft")
     solid — filled background, contrast text
   ========================================================================== */

.wb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.wb-badge.wb-soft {
  background-color: var(--_a3);
  color: var(--_a11);
  box-shadow: inset 0 0 0 1px var(--_a6);
}

.wb-badge.wb-solid {
  background-color: var(--_9);
  color: var(--_contrast);
}

/* ==========================================================================
   Cards

   Follows Radix Card "surface" variant:
   semi-transparent background + subtle border via box-shadow.
   ========================================================================== */

.wb-card {
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
  border-radius: var(--radius-3);
  padding: 12px;
}

/* ==========================================================================
   Panels (sidebar, toolbar)
   ========================================================================== */

.wb-panel {
  background-color: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
  border-radius: var(--radius-3);
  padding: 12px;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.wb-input {
  padding: 6px 10px;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: none;
  box-shadow: inset 0 0 0 1px var(--gray-a7);
  border-radius: var(--radius-2);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: box-shadow 80ms;
}
.wb-input:focus {
  box-shadow: inset 0 0 0 1px var(--accent-a8), 0 0 0 1px var(--accent-a8);
}
.wb-input::placeholder {
  color: var(--color-text-sub);
}

/* Select dropdown — same visual treatment as input */
.wb-select {
  padding: 6px 10px;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: none;
  box-shadow: inset 0 0 0 1px var(--gray-a7);
  border-radius: var(--radius-2);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: box-shadow 80ms;
}
.wb-select:focus {
  box-shadow: inset 0 0 0 1px var(--accent-a8), 0 0 0 1px var(--accent-a8);
}

/* ==========================================================================
   Alert panels (error, warning, info)
   ========================================================================== */

.wb-alert {
  padding: 12px;
  border-radius: var(--radius-3);
  font-size: 12px;
}
.wb-alert.wb-error {
  background-color: var(--red-a3);
  color: var(--red-a11);
  box-shadow: inset 0 0 0 1px var(--red-a6);
}
.wb-alert.wb-warning {
  background-color: var(--amber-a3);
  color: var(--amber-a11);
  box-shadow: inset 0 0 0 1px var(--amber-a6);
}
.wb-alert.wb-info {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
  box-shadow: inset 0 0 0 1px var(--accent-a6);
}

/* ==========================================================================
   Status indicator (dot + label)
   ========================================================================== */

.wb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.wb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--_9);
  flex-shrink: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.wb-text         { color: var(--color-text); }
.wb-text-muted   { color: var(--color-text-muted); }
.wb-text-sub     { color: var(--color-text-sub); }

.wb-panel-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-sub);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wb-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  font-size: 11px;
  min-height: 28px;
  box-sizing: border-box;
}

.wb-toolbar-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-toolbar-spacer {
  flex: 1;
}

.wb-section-header {
  font-size: 11px;
  color: var(--color-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.wb-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-sub);
  font-size: 12px;
}

/* ==========================================================================
   Scrollbars — Radix-inspired thin scrollbars

   Uses standard scrollbar-width/scrollbar-color (Firefox) and
   ::-webkit-scrollbar (Chrome, Safari, Edge) for cross-browser support.
   Track is transparent, thumb uses gray-a8 with hover at gray-a9.
   ========================================================================== */

/* Firefox / standard */
#shell,
#shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-a8) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
#shell ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#shell ::-webkit-scrollbar-track {
  background: transparent;
}
#shell ::-webkit-scrollbar-thumb {
  background-color: var(--gray-a8);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
@media (hover: hover) {
  #shell ::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-a9);
  }
}
#shell ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==========================================================================
   Tab close button — larger hit area with hover feedback
   ========================================================================== */

.tab-close:hover {
  background: var(--gray-a4);
  color: var(--color-text);
}

/* ==========================================================================
   VTab sidebar icons — button-style selection + hover
   ========================================================================== */

.vtab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 16px;
}

.vtab-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-2);
  background: transparent;
  transition: background 80ms, color 80ms;
}

.vtab-icon:hover .vtab-icon-inner {
  background: var(--accent-a4);
}

.vtab-active .vtab-icon-inner {
  background: var(--accent-a3);
}

.vtab-active:hover .vtab-icon-inner {
  background: var(--accent-a5);
}

/* Gray tab icons */
#shell[data-tab-icon-color="gray"] .vtab-icon:hover .vtab-icon-inner {
  background: var(--gray-a4);
}
#shell[data-tab-icon-color="gray"] .vtab-active .vtab-icon-inner {
  background: var(--gray-a3);
}
#shell[data-tab-icon-color="gray"] .vtab-active:hover .vtab-icon-inner {
  background: var(--gray-a5);
}