/* ==========================================================================
   theme-base.css - the WeVe look every page shares (packages/webtheme)

   The base of webel.css that a page without the webux shell needs too:
   the data font, the accent mapping (data-accent), buttons, icons in
   buttons, cards, inputs and selects, alert panels, typography. Load after
   radix-colors.css and radix-tokens.css, before webel.css (webux). The
   colours come from the theme attributes on #shell (webtheme).
   ========================================================================== */
/* ==========================================================================
   Data font: Ubuntu Sans Mono (Ubuntu Font Licence 1.0, see
   webfonts/ubuntu-sans-mono-LICENCE.txt), variable 400-700, in two subsets
   the browser fetches only when a page needs them. Tables use it through
   --font-data: every character is exactly 1ch wide, so column widths
   computed from character counts fit (webco/datagrid). Declared here, at
   document level - @font-face inside a shadow root is not honoured.
   ========================================================================== */

@font-face {
  font-family: "Ubuntu Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../webfonts/ubuntu-sans-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../webfonts/ubuntu-sans-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-data: "Ubuntu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   Semantic role aliases (the meaning layer).

   Radix Colors ships raw hue scales and deliberately leaves the
   meaning mapping to the app (https://www.radix-ui.com/colors/docs/overview/aliasing).
   These aliases are that mapping: pick a role by MEANING in markup
   (data-accent="warning" / "abort" / "debug"); the scale it resolves
   to lives here, in one place. Components only read --_*, so a role
   behaves identically to its scale. Multiple roles may share a scale
   (Radix-recommended); where no role fits, use the scale name directly.

     green  → success, start, continue, resume
     amber  → warning, warn, pause, stop      (caution / resumable)
     red    → danger, error, failure, abort    (terminal / destructive)
     blue   → info, running                    (running = in-progress)
     cyan   → debug
     gray   → neutral, trace, cancel           (cancel = dismiss / no-op)
     violet → scheduled                         (planned / upcoming)
     accent → primary  (the default; falls through to [data-accent])

   Goal: call sites pick a ROLE by meaning, never a raw scale name -
   add a role here rather than reaching for a bare scale.
   -------------------------------------------------------------------------- */
[data-accent="gray"],
[data-accent="neutral"],
[data-accent="trace"],
[data-accent="cancel"] {
  --_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"],
[data-accent="danger"],
[data-accent="error"],
[data-accent="failure"],
[data-accent="abort"] {
  --_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"],
[data-accent="success"],
[data-accent="start"],
[data-accent="continue"],
[data-accent="resume"] {
  --_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"],
[data-accent="warning"],
[data-accent="warn"],
[data-accent="pause"],
[data-accent="stop"] {
  --_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"],
[data-accent="info"],
[data-accent="running"] {
  --_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"],
[data-accent="debug"] {
  --_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"],
[data-accent="scheduled"] {
  --_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: calc(12px * var(--wb-font-scale, 1));
  line-height: 1;
  padding: 5px 9px;
  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;
}

/* -- Pressed glow -------------------------------------------------------
   While the pointer is physically held down (`:active`), every
   variant gets an accent-9 outline ring on top of its normal
   pressed-state styling. Pure CSS, no JS - the moment the operator
   releases or drags off the button, `:active` ends and the glow
   vanishes. Standard button semantics (drag-away cancels the click)
   are preserved.

   Outline (rather than box-shadow) so the glow doesn't conflict
   with the inset shadow that `wb-outline` and `wb-surface` use for
   their borders. Outline takes no layout space and reads clearly
   over every variant. */
.wb-btn:active:not([data-disabled]) {
  outline: 2px solid var(--_a9);
  outline-offset: 1px;
}

/* 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;
}
/* An icon alone (ui.icon_class: no more than one character of text): as
   much room on every side, never wider than high - square, or as wide as
   a wide icon makes it. */
.wb-btn.wb-icon-only {
  padding: 5px;
  min-width: calc(1em + 10px);
  aspect-ratio: 1;
}
/* 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;
}

/* ==========================================================================
   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;
}

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

.wb-input {
  padding: 6px 7px;
  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: calc(12px * var(--wb-font-scale, 1));
  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, the browser's own
   chevron; less room before the text than after it - the browser adds
   a few pixels of its own before the text, so the text stands as far in
   as an input's. */
.wb-select {
  padding: 6px 10px 6px 3px;
  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: calc(12px * var(--wb-font-scale, 1));
  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);
}

/* Surface select - looks like a surface button (.wb-btn.wb-surface) in the
   accent its `data-accent` sets: accent surface, accent-a7 border, accent
   text; the border strengthens on hover and while open. For a select that
   is a choice among coloured things (a Gruppe) rather than a form field. */
.wb-select.wb-surface {
  background-color: var(--_surface);
  box-shadow: inset 0 0 0 1px var(--_a7);
  color: var(--_a11);
  font-weight: 500;
}
@media (hover: hover) {
  .wb-select.wb-surface:hover { box-shadow: inset 0 0 0 1px var(--_a8); }
}
.wb-select.wb-surface:focus {
  box-shadow: inset 0 0 0 1px var(--_a8), 0 0 0 1px var(--_a8);
}
/* The open list keeps the page's colours, not the accent's. */
.wb-select.wb-surface option,
.wb-select.wb-surface optgroup {
  color: var(--color-text);
  background-color: var(--color-panel-solid);
  font-weight: normal;
}
/* HC surface: stronger border + text, as the surface button */
#shell[data-high-contrast="true"] .wb-select.wb-surface {
  box-shadow: inset 0 0 0 1px var(--_a7), inset 0 0 0 1px var(--gray-a11);
  color: var(--_12);
}
.wb-select.wb-surface:disabled {
  cursor: not-allowed;
  color: var(--gray-a8);
  background-color: var(--gray-a2);
  box-shadow: inset 0 0 0 1px var(--gray-a6);
}

/* ==========================================================================
   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);
}

/* ==========================================================================
   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;
}