/*
 * WEPPcloud UI foundation
 * -----------------------
 * Shared CSS variables and light-weight element defaults that standardize
 * typography, colors, spacing, and core components when using Pure.css.
 * The goal is a neutral, low-maintenance visual baseline that can be layered
 * on top of existing templates without introducing new dependencies.
 *
 * IMPORTANT: Before modifying this file, review:
 * - docs/ui-docs/ui-style-guide.md — Component patterns, design tokens, spacing conventions
 * - docs/ui-docs/theme-system.md — Theme integration, adding VS Code themes, WCAG compliance
 *
 * THEME SYSTEM: The CSS variables below define the default "system" theme (light grayscale).
 * Users can select from 11 additional themes via the theme switcher. Themes override these
 * variables using :root[data-theme="..."] selectors loaded from static/css/themes/all-themes.css.
 * See theme-system.md for complete documentation on adding themes and configurable mapping.
 */

:root {
  /* Typography */
  --wc-font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wc-font-mono: "Source Code Pro", "SFMono-Regular", Menlo, Consolas, monospace;
  --wc-font-size-base: 16px;
  --wc-font-size-sm: 1rem;
  --wc-font-size-xs: 0.9rem;
  --wc-font-sm: var(--wc-font-size-sm);
  --wc-font-xs: var(--wc-font-size-xs);
  --wc-font-weight-semibold: 600;
  --wc-font-weight-normal: 400;
  --wc-line-height: 1.5;
  --wc-color-scheme: light;

  /* Light theme color palette (grayscale inspired) */
  --wc-color-page: #f6f8fa;
  --wc-color-surface: #ffffff;
  --wc-color-surface-alt: #eef1f4;
  --wc-color-border: #d0d7de;
  --wc-color-border-strong: #8b949e;
  --wc-color-text: #1f2328;
  --wc-color-text-muted: #4b5563;
  --wc-color-link: #1f6feb;
  --wc-color-link-hover: #0d4bcf;
  --wc-color-accent: #24292f;
  --wc-color-accent-soft: #e6e8eb;
  --wc-color-positive: #1a7f37;
  --wc-color-positive-soft: #e6f4ea;
  --wc-color-attention: #9a6700;
  --wc-color-attention-soft: #fceec7;
  --wc-color-critical: #cf222e;
  --wc-color-critical-soft: #fce0e2;
  --wc-color-primary: #1f6feb;
  --wc-color-primary-dark: #0d4bcf;
  --wc-color-on-primary: #ffffff;
  /* Status surfaces */
  --wc-status-text: var(--wc-color-text);
  --wc-status-text-muted: color-mix(in srgb, var(--wc-color-text) 80%, var(--wc-color-text-muted));
  --wc-info: var(--wc-color-accent);
  --wc-info-bg: color-mix(in srgb, var(--wc-color-surface) 88%, var(--wc-color-accent));
  --wc-info-text: var(--wc-status-text);
  --wc-info-fg: var(--wc-color-accent);
  --wc-success: var(--wc-color-positive);
  --wc-success-bg: color-mix(in srgb, var(--wc-color-surface) 88%, var(--wc-color-positive));
  --wc-success-text: var(--wc-status-text);
  --wc-success-fg: var(--wc-color-positive);
  --wc-warning: var(--wc-color-attention);
  --wc-warning-bg: color-mix(in srgb, var(--wc-color-surface) 88%, var(--wc-color-attention));
  --wc-warning-text: var(--wc-status-text);
  --wc-warning-fg: var(--wc-color-attention);
  --wc-error: var(--wc-color-critical);
  --wc-error-bg: color-mix(in srgb, var(--wc-color-surface) 88%, var(--wc-color-critical));
  --wc-error-text: var(--wc-status-text);
  --wc-error-fg: var(--wc-color-critical);

  /* Shadows & radii */
  --wc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --wc-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.12);
  --wc-radius-none: 0px;
  --wc-radius-xs: 2px;
  --wc-radius-sm: 4px;
  --wc-radius-md: 8px;
  --wc-radius-pill: 999px;

  /* Spacing scale */
  --wc-space-2xs: 0.125rem;
  --wc-space-xs: 0.25rem;
  --wc-space-sm: 0.5rem;
  --wc-space-md: 0.75rem;
  --wc-space-lg: 1rem;
  --wc-space-xl: 1.5rem;
  --wc-space-2xl: 2rem;

  /* Container widths */
  --wc-width-reading: 70ch;
  --wc-width-wide: 1200px;

  /* Form controls */
  --wc-select-padding-y: calc(var(--wc-space-xs) + 1px);
  --wc-select-padding-x: var(--wc-space-sm);
  --wc-select-chevron-color: var(--wc-color-text-muted);
  --wc-number-spin-color: var(--wc-color-text);
  --wc-button-padding-y: calc(var(--wc-space-xs) + 1px);
  --wc-button-padding-x: var(--wc-space-lg);
  --wc-button-primary-bg: var(--wc-color-primary);
  --wc-button-primary-bg-hover: var(--wc-color-primary-dark);
  --wc-button-primary-text: var(--wc-color-on-primary);
  --wc-button-secondary-bg: var(--wc-color-surface);
  --wc-button-secondary-bg-hover: var(--wc-color-surface-alt);
  --wc-button-secondary-border: var(--wc-color-border);
  --wc-button-secondary-text: var(--wc-color-text);
  --wc-button-link-color: var(--wc-color-link);
  --wc-button-link-hover: var(--wc-color-link-hover);
  --wc-button-disabled-bg: var(--wc-color-border);
  --wc-button-disabled-border: var(--wc-color-border);
  --wc-button-disabled-text: var(--wc-color-text);
  --wc-button-shadow: var(--wc-shadow-sm);
  --wc-button-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.16);
  --wc-run-header-offset: 0px;
  color-scheme: var(--wc-color-scheme);
}

html {
  font-size: var(--wc-font-size-base);
}

body {
  margin: 0;
  font-family: var(--wc-font-sans);
  line-height: var(--wc-line-height);
  color: var(--wc-color-text);
  background: var(--wc-color-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a:not(.pure-button):not(.wc-oauth-button),
a:visited:not(.pure-button):not(.wc-oauth-button) {
  color: var(--wc-color-link) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

a:hover:not(.pure-button):not(.wc-oauth-button),
a:focus-visible:not(.pure-button):not(.wc-oauth-button) {
  color: var(--wc-color-link-hover) !important;
  text-decoration: underline !important;
}

:is(select, .wc-select) {
  font: inherit;
  line-height: 1.4;
  color: var(--wc-color-text);
  background-color: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  padding: var(--wc-select-padding-y) var(--wc-select-padding-x);
  min-height: 2.5rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

:is(select, .wc-select):not([multiple]):not([size]),
:is(select, .wc-select)[size="1"] {
  padding-right: calc(var(--wc-select-padding-x) + var(--wc-space-xl) + 0.75rem);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wc-select-chevron-color) 50%),
    linear-gradient(135deg, var(--wc-select-chevron-color) 50%, transparent 50%);
  background-position:
    calc(100% - var(--wc-space-lg)) calc(50% - 0.35rem),
    calc(100% - var(--wc-space-lg) + 0.35rem) calc(50% - 0.35rem);
  background-size: 0.5rem 0.5rem;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

:is(select, .wc-select):hover:not(:disabled) {
  background-color: var(--wc-color-surface);
  border-color: var(--wc-color-border-strong);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

:is(select, .wc-select):focus {
  border-color: var(--wc-color-accent);
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
  outline: none;
}

:is(select, .wc-select):disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background-color: var(--wc-color-surface);
  color: var(--wc-color-text-muted);
}

:is(select, .wc-select)[multiple],
:is(select, .wc-select)[size]:not([size="0"]):not([size="1"]) {
  padding-right: var(--wc-select-padding-x);
  background-image: none;
  min-height: auto;
}

:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="image"]
  ),
  textarea
) {
  font: inherit;
  line-height: 1.4;
  color: var(--wc-color-text);
  background-color: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  padding: var(--wc-select-padding-y) var(--wc-select-padding-x);
  width: 100%;
  min-height: 2.5rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="image"]
  ),
  textarea
):hover:not(:disabled):not(:read-only) {
  background-color: var(--wc-color-surface);
  border-color: var(--wc-color-border-strong);
}

:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="image"]
  ),
  textarea
):focus-visible {
  outline: none;
  border-color: var(--wc-color-accent);
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
}

:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="image"]
  ),
  textarea
):disabled,
:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="file"],
    [type="submit"],
    [type="reset"],
    [type="button"],
    [type="image"]
  ),
  textarea
)[readonly] {
  background-color: var(--wc-color-surface);
  color: var(--wc-color-text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

:where(input, textarea)::placeholder {
  color: var(--wc-color-text-muted);
  color: color-mix(in srgb, var(--wc-color-text) 45%, transparent);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  color: var(--wc-number-spin-color);
  opacity: 1;
}

.pure-form :is(select, .wc-select),
select.form-control,
select.pure-input-1,
select.pure-input-2,
select.pure-input-3,
select.pure-input-1-2,
select.pure-input-1-3,
select.pure-input-2-3 {
  background-color: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: var(--wc-select-padding-y) var(--wc-select-padding-x);
}

input[type="file"] {
  font: inherit;
  line-height: 1.4;
  color: var(--wc-color-text);
  background-color: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  padding: var(--wc-select-padding-y) var(--wc-select-padding-x);
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="file"]:hover:not(:disabled) {
  background-color: var(--wc-color-surface);
  border-color: var(--wc-color-border-strong);
}

input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--wc-color-accent);
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
}

input[type="file"]:disabled {
  color: var(--wc-color-text-muted);
  background-color: var(--wc-color-surface);
  cursor: not-allowed;
  opacity: 0.65;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: var(--wc-space-sm);
  font: inherit;
  font-weight: 600;
  color: var(--wc-button-primary-text);
  background-color: var(--wc-button-primary-bg);
  border: 1px solid var(--wc-button-primary-bg);
  border-radius: var(--wc-radius-sm);
  padding: var(--wc-button-padding-y) var(--wc-space-lg);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
  box-shadow: var(--wc-button-shadow);
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--wc-button-primary-bg-hover);
  border-color: var(--wc-button-primary-bg-hover);
  box-shadow: var(--wc-button-shadow-hover);
}

input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active {
  transform: translateY(1px);
}

input[type="file"]:focus-visible::file-selector-button,
input[type="file"]:focus-visible::-webkit-file-upload-button {
  box-shadow:
    0 0 0 3px var(--wc-color-accent-soft),
    var(--wc-button-shadow);
}

input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
  color: var(--wc-button-disabled-text);
  background-color: var(--wc-button-disabled-bg);
  border-color: var(--wc-button-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

:where(input[type="range"]) {
  width: 100%;
  height: 1.5rem;
  background: transparent;
  accent-color: var(--wc-button-primary-bg);
}

:where(input[type="range"])::-webkit-slider-runnable-track {
  height: 0.4rem;
  background: linear-gradient(
    to right,
    var(--wc-button-primary-bg),
    var(--wc-button-primary-bg)
  );
  border-radius: var(--wc-radius-pill);
}

:where(input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--wc-button-primary-bg);
  border: 2px solid var(--wc-color-surface);
  box-shadow: 0 0 0 1px var(--wc-button-primary-bg);
  margin-top: -0.3rem;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

:where(input[type="range"])::-moz-range-track {
  height: 0.4rem;
  background: var(--wc-button-primary-bg);
  border-radius: var(--wc-radius-pill);
}

:where(input[type="range"])::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--wc-button-primary-bg);
  border: 2px solid var(--wc-color-surface);
  box-shadow: 0 0 0 1px var(--wc-button-primary-bg);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

:where(input[type="range"])::-ms-track {
  height: 0.4rem;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

:where(input[type="range"])::-ms-fill-lower,
:where(input[type="range"])::-ms-fill-upper {
  background: var(--wc-button-primary-bg);
  border-radius: var(--wc-radius-pill);
}

:where(input[type="range"])::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--wc-button-primary-bg);
  border: 2px solid var(--wc-color-surface);
  box-shadow: 0 0 0 1px var(--wc-button-primary-bg);
}

:where(input[type="range"]):focus-visible::-webkit-slider-thumb,
:where(input[type="range"]):focus-visible::-moz-range-thumb,
:where(input[type="range"]):focus-visible::-ms-thumb {
  box-shadow:
    0 0 0 3px var(--wc-color-accent-soft),
    0 0 0 1px var(--wc-button-primary-bg);
}

:where(input[type="range"])::-webkit-slider-thumb:active,
:where(input[type="range"])::-moz-range-thumb:active,
:where(input[type="range"])::-ms-thumb:active {
  transform: scale(1.05);
}

.pure-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-space-xs);
  min-height: 2.5rem;
  padding: var(--wc-button-padding-y) var(--wc-button-padding-x);
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wc-button-primary-text, var(--wc-color-on-primary, #ffffff)) !important;
  background-color: var(--wc-button-primary-bg, var(--wc-color-primary, var(--wc-color-accent)));
  border: 1px solid transparent;
  border-color: var(--wc-button-primary-bg, var(--wc-color-primary, var(--wc-color-accent)));
  border-radius: var(--wc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.1s ease;
  box-shadow: var(--wc-button-shadow);
}

.pure-button:hover:not(:disabled):not(.pure-button-disabled),
.pure-button:focus-visible:not(:disabled):not(.pure-button-disabled) {
  background-color: var(--wc-button-primary-bg-hover, var(--wc-color-primary-dark, var(--wc-color-primary, var(--wc-color-accent))));
  border-color: var(--wc-button-primary-bg-hover, var(--wc-color-primary-dark, var(--wc-color-primary, var(--wc-color-accent))));
  color: var(--wc-button-primary-text, var(--wc-color-on-primary, #ffffff));
  box-shadow: var(--wc-button-shadow-hover);
}

.pure-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--wc-color-accent-soft),
    var(--wc-button-shadow);
}

.pure-button:active:not(:disabled):not(.pure-button-disabled) {
  transform: translateY(1px);
}

.pure-button:disabled,
.pure-button[disabled],
.pure-button.pure-button-disabled {
  background-color: var(--wc-button-disabled-bg);
  border-color: var(--wc-button-disabled-border);
  color: var(--wc-button-disabled-text) !important;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.pure-button.pure-button-secondary {
  background-color: var(--wc-button-secondary-bg);
  border-color: var(--wc-button-secondary-border);
  color: var(--wc-button-secondary-text) !important;
  box-shadow: none;
}

.pure-button.pure-button-secondary:hover:not(:disabled):not(.pure-button-disabled),
.pure-button.pure-button-secondary:focus-visible:not(:disabled):not(.pure-button-disabled) {
  background-color: var(--wc-button-secondary-bg-hover);
  border-color: var(--wc-color-border-strong);
  color: var(--wc-button-secondary-text) !important;
  box-shadow: none;
}

.pure-button.pure-button-link {
  background: none;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  color: var(--wc-button-link-color) !important;
  font-weight: 600;
}

.pure-button.pure-button-link:hover,
.pure-button.pure-button-link:focus-visible {
  color: var(--wc-button-link-hover) !important;
  text-decoration: underline;
  box-shadow: none;
}

.pure-button.pure-button-link:disabled,
.pure-button.pure-button-link[disabled],
.pure-button.pure-button-link.pure-button-disabled {
  color: var(--wc-button-disabled-text) !important;
  text-decoration: none;
  background: none;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

p,
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--wc-space-lg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--wc-space-lg);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }

pre,
code,
.kbd,
pre *,
code * {
  font-family: var(--wc-font-mono);
  font-size: 0.85rem;
}

/* Layout helpers */
.wc-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.wc-page__body {
  flex: 1 1 auto;
  padding: var(--wc-space-2xl) var(--wc-space-xl);
}

@media (max-width: 720px) {
  .wc-page__body {
    padding: var(--wc-space-xl) var(--wc-space-lg);
  }
}

.wc-container {
  margin: 0 auto;
  max-width: var(--wc-width-wide);
  width: 100%;
}

.wc-container--fluid {
  max-width: none;
  width: 100%;
}

.wc-reading {
  max-width: var(--wc-width-reading);
}

/* Layout utilities */
.wc-stack {
  display: grid;
  gap: var(--wc-space-sm);
}

/* Omni scenario layout */
.scenario-item__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--wc-space-sm);
}

.scenario-item__inputs {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(220px, 1fr));
  align-items: start;
  gap: var(--wc-space-sm);
}

.scenario-item__controls {
  display: contents;
}

.scenario-item__field,
.scenario-item__controls .wc-field {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}

.scenario-item select.wc-field__control {
  width: 100%;
  max-width: 100%;
}

.scenario-item__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: var(--wc-space-sm);
  align-self: stretch;
  justify-self: end;
}

.scenario-item__actions .pure-button {
  white-space: nowrap;
}

.scenario-item__selector {
  display: flex;
  align-items: center;
  padding-top: var(--wc-space-md);
}

.scenario-item__selector input[type="checkbox"] {
  margin: 0;
  transform: translateY(2px);
}

.omni-scenario-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wc-space-sm);
  justify-content: flex-start;
}

.omni-scenario-actions__buttons {
  display: flex;
  gap: var(--wc-space-sm);
  flex-wrap: wrap;
}

.gl-wepp-stat {
  margin: var(--wc-space-sm) 0 var(--wc-space-md);
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--wc-color-surface) 90%, transparent);
}

.gl-wepp-stat__label {
  font-weight: 600;
  color: var(--wc-color-text);
  margin-bottom: var(--wc-space-2xs);
}

.gl-wepp-stat__options {
  display: grid;
  gap: var(--wc-space-2xs);
}

.gl-wepp-stat__options label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--wc-space-2xs);
  align-items: center;
  color: var(--wc-color-text);
}

.wc-panel {
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  padding: var(--wc-space-2xl);
  min-height: 256px;
  margin-top: var(--wc-space-2xl);
  margin-bottom: var(--wc-space-2xl);
}

/* Alerts */
.wc-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-md);
  padding: var(--wc-space-md) var(--wc-space-lg);
  border-radius: var(--wc-radius-sm);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface-alt);
  color: var(--wc-status-text);
}

.wc-alert__body {
  flex: 1;
  margin: 0;
}

.wc-alert__dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 var(--wc-space-xs);
  line-height: 1;
}

.wc-alert--banner {
  margin: var(--wc-space-sm) var(--wc-space-lg);
}

.wc-alert--warning {
  background: var(--wc-warning-bg);
  border-color: var(--wc-warning);
  color: var(--wc-warning-text);
}

.wc-alert--info {
  background: var(--wc-info-bg);
  border-color: var(--wc-info);
  color: var(--wc-info-text);
}

.wc-alert--error {
  background: var(--wc-error-bg);
  border-color: var(--wc-error);
  color: var(--wc-error-text);
}

.wc-alert--success {
  background: var(--wc-success-bg);
  border-color: var(--wc-success);
  color: var(--wc-success-text);
}

/* Text utilities */
.wc-text-right {
  text-align: right;
}

.wc-text-center {
  text-align: center;
}

.wc-text-left {
  text-align: left;
}

.wc-text-italic {
  font-style: italic;
}

.wc-text-bold {
  font-weight: 600;
}

.wc-heading {
  margin: var(--wc-space-lg) 0 var(--wc-space-sm);
  font-weight: 600;
  line-height: 1.4;
}

.wc-heading--sm {
  font-size: 1.1rem;
}

.wc-heading--xs {
  font-size: 1rem;
}

h5 {
  margin-top: var(--wc-space-lg);
}

h5:first-child {
  margin-top: 0;
}

.wc-text-muted {
  color: var(--wc-color-text-muted);
  margin-top: var(--wc-space-sm);
  margin-bottom: 10px;
}

.wc-text-muted:first-child {
  margin-top: 0;
}

.unitizer-wrapper {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wc-space-2xs);
}

.unitizer-wrapper .unitizer {
  display: inline-block;
}

.wc-text-right .unitizer-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
}
.wc-text-right {
  text-align: right;
}

/* Header */
.wc-header {
  background: var(--wc-color-surface);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wc-space-lg);
  padding: var(--wc-space-md) var(--wc-space-xl);
}

.wc-header__nav {
  flex: 1;
  display: flex;
}

.wc-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--wc-space-sm);
}

.wc-theme-switcher {
  display: inline-flex;
  align-items: center;
}

.wc-theme-switcher__select {
  min-width: 9rem;
}

.invisible {
  display: none !important;
}

@media (max-width: 540px) {
  .wc-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .wc-header__tools {
    margin-left: 0;
  }
}

.wc-run-header {
  border-bottom: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
}

.wc-run-header--hideaway {
  position: sticky;
  top: 0;
  z-index: 1100;
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

.wc-run-header--hideaway.is-hidden {
  transform: translateY(-100%);
}

.wc-run-header--hideaway.is-elevated {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wc-run-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-lg);
  padding: var(--wc-space-lg) var(--wc-space-xl);
}

.wc-run-header__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--wc-space-sm);
  flex-wrap: wrap;
}

.wc-run-header__descriptor {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wc-color-text-muted);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.wc-run-header__descriptor:hover {
  color: var(--wc-color-text);
  text-decoration: underline;
}

.wc-run-header__version {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-2xs);
  padding: var(--wc-space-2xs) var(--wc-space-sm);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-color-surface-alt);
  color: var(--wc-color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wc-run-header__meta {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: var(--wc-space-2xs);
  font-size: 0.95rem;
  color: var(--wc-color-text-muted);
  white-space: nowrap;
}

.wc-run-header__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-lg);
  align-items: flex-end;
  justify-content: flex-start;
}

.wc-run-header__theme {
  display: flex;
  align-items: center;
}

.wc-run-header__right {
  margin-left: auto;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--wc-space-md);
}

.wc-run-header__fields {
  display: grid;
  gap: var(--wc-space-sm);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 360px;
}

.wc-run-header__field {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-xs);
  font-size: var(--wc-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wc-color-text-muted);
}

.wc-run-header__input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-page);
  color: var(--wc-color-text);
}

.wc-run-header__input:focus {
  outline: 2px solid var(--wc-color-accent);
  outline-offset: 2px;
}

.wc-run-header__actions {
  display: flex;
  gap: var(--wc-space-sm);
  flex-wrap: wrap;
}

.wc-run-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-xs);
  font-size: var(--wc-font-size-sm);
  color: var(--wc-color-text);
}

.wc-run-header__toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wc-color-accent);
}

.wc-run-header__menu {
  position: relative;
}

.wc-run-header__menu summary::-webkit-details-marker {
  display: none;
}

.wc-run-header__menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-xs);
  cursor: pointer;
}

.wc-run-header__menu-button::after {
  content: "▾";
  font-size: var(--wc-font-size-xs);
}

.wc-run-header__menu[open] .wc-run-header__menu-button::after {
  transform: rotate(180deg);
}

.wc-run-header__menu-content {
  position: absolute;
  top: calc(100% + var(--wc-space-xs));
  right: 0;
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  display: grid;
  gap: var(--wc-space-sm);
  min-width: 220px;
  box-shadow: var(--wc-shadow-sm);
  z-index: 1000;
}

.wc-run-header__menu-content .wc-run-header__toggle {
  font-size: 0.9rem;
  color: var(--wc-color-text);
}

.wc-run-header__menu-content .wc-run-header__toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wc-color-accent);
}

/* Navigation menu dropdown */
.wc-nav {
  display: flex;
  align-items: center;
  gap: var(--wc-space-md);
  flex: 1;
}

.wc-nav__link {
  color: var(--wc-color-text);
  text-decoration: none;
  font-weight: 600;
  padding: var(--wc-space-xs) var(--wc-space-sm);
}

.wc-nav__link:hover {
  color: var(--wc-color-link-hover);
}

.wc-nav__menu {
  position: relative;
  margin-left: auto;
}

.wc-nav__menu summary::-webkit-details-marker {
  display: none;
}

.wc-nav__menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-xs);
  cursor: pointer;
  font-weight: 600;
  color: var(--wc-color-text);
  padding: var(--wc-space-xs) var(--wc-space-sm);
}

.wc-nav__menu-button::after {
  content: "▾";
  font-size: var(--wc-font-size-xs);
}

.wc-nav__menu[open] .wc-nav__menu-button::after {
  transform: rotate(180deg);
}

.wc-nav__menu-content {
  position: absolute;
  top: calc(100% + var(--wc-space-xs));
  right: 0;
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
  display: grid;
  gap: var(--wc-space-sm);
  min-width: 180px;
  box-shadow: var(--wc-shadow-md);
  z-index: 1000;
}

.wc-nav__menu-content .pure-button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

@media (max-width: 960px) {
  .wc-run-header__inner {
    padding: var(--wc-space-lg);
  }

  .wc-run-header__content {
    flex-direction: column;
    align-items: stretch;
  }

  .wc-run-header__fields {
    max-width: none;
  }

  .wc-run-header__theme {
    margin-left: 0;
  }

  .wc-run-header__right {
    justify-content: flex-start;
    margin-left: 0;
    align-items: flex-start;
  }

  .wc-run-header__meta {
    margin-left: 0;
    white-space: normal;
  }
}

.wc-control {
  margin-bottom: var(--wc-space-xs);
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  box-shadow: var(--wc-shadow-sm);
}

.wc-control--collapsible {
  display: block;
}

.wc-control__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-md);
  padding: var(--wc-space-lg);
  border-bottom: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
  cursor: pointer;
}

.wc-control__summary-text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
  align-items: baseline;
}

.wc-control__summary--static {
  cursor: default;
}

.wc-control--static .wc-control__summary {
  cursor: default;
}

.wc-control--static .wc-control__summary-icon::before {
  content: none;
}

.wc-control__summary-icon::before {
  content: "▸";
  display: inline-block;
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
  transition: transform 0.2s ease;
}

.wc-control[open] .wc-control__summary-icon::before {
  transform: rotate(90deg);
}

.wc-control__form {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-lg);
}

.wc-control__surface {
  padding: var(--wc-space-xl);
}

.wc-control__header {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-sm);
  border-bottom: 1px solid var(--wc-color-border);
  padding-bottom: var(--wc-space-md);
}

.wc-control__description {
  color: var(--wc-color-text-muted);
  font-size: 0.95rem;
}

.wc-control__toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--wc-space-sm);
  flex-wrap: wrap;
}

.wc-control__toolbar :is(a, button) {
  margin: 0;
}

.wc-control__grid {
  display: grid;
  gap: var(--wc-space-lg);
  grid-template-columns: minmax(0, 1fr);
}

.wc-control__panels {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-control__panel {
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  box-shadow: var(--wc-shadow-sm);
}

.wc-control__panel-title {
  margin: 0 0 var(--wc-space-sm) 0;
  font-size: 1rem;
}

.wc-card {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
}

.wc-card--muted {
  background: var(--wc-color-surface);
  border-color: var(--wc-color-surface);
  box-shadow: none;
}

.wc-card--subtle {
  box-shadow: none;
}

.wc-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wc-space-sm);
  padding: var(--wc-space-md) var(--wc-space-lg);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.wc-card__meta {
  color: var(--wc-color-text-muted);
  font-size: 0.875rem;
}

.wc-card__description {
  margin: 0;
  padding: 0 var(--wc-space-lg) var(--wc-space-sm);
  color: var(--wc-color-text-muted);
  font-size: 0.95rem;
}

.wc-card__body {
  padding: var(--wc-space-lg);
}

.wc-card__body.wc-stack {
  gap: var(--wc-space-lg);
}

.wc-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--wc-space-sm);
  padding: var(--wc-space-md) var(--wc-space-lg);
  border-top: 1px solid var(--wc-color-border);
}

.wc-control__status-text {
  display: flex;
  gap: var(--wc-space-sm);
  font-family: var(--wc-font-mono);
  font-size: var(--wc-font-size-sm);
}

.wc-control__panel-summary {
  min-height: 2.5rem;
  font-size: var(--wc-font-size-base);
  color: var(--wc-color-text);
}

.wc-control__stacktrace {
  font-family: var(--wc-font-mono);
  font-size: var(--wc-font-size-sm);
  max-height: 12rem;
  overflow: auto;
}

.wc-status-panel {
  --wc-status-height: 12rem;
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-sm);
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
}

.wc-status-panel[data-variant="console"] {
  --wc-status-height: 20rem;
}

.wc-status-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-sm);
}

.wc-status-panel__title {
  font-size: 1rem;
  margin: 0;
}

.wc-status-panel__actions {
  display: inline-flex;
  gap: var(--wc-space-xs);
  flex-wrap: wrap;
}

.wc-status-panel__description,
.wc-status-panel__meta,
.wc-status-panel__slot,
.wc-status-panel__footer {
  font-size: 0.75rem;
  color: var(--wc-color-text-muted);
}

.wc-status-panel__meta,
.wc-status-panel__slot {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-2xs);
  font-family: var(--wc-font-mono);
}

.wc-status-panel__log {
  min-height: var(--wc-status-min-height, 12rem);
  max-height: var(--wc-status-height, 20rem);
  overflow-y: auto;
  padding: var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface-alt);
  font-family: var(--wc-font-mono);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.wc-stacktrace {
  display: block;
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
}

.wc-stacktrace__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-sm);
  cursor: pointer;
}

.wc-stacktrace__summary-text {
  font-weight: 600;
}

.wc-stacktrace__actions {
  display: inline-flex;
  gap: var(--wc-space-xs);
  flex-wrap: wrap;
}

.wc-stacktrace__description {
  margin: var(--wc-space-sm) 0;
  color: var(--wc-color-text-muted);
  font-size: 0.9rem;
}

.wc-stacktrace__body {
  max-height: 24rem;
  overflow: auto;
  padding: var(--wc-space-sm);
  margin: 0;
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface-alt);
  font-family: var(--wc-font-mono);
  font-size: var(--wc-font-size-xs);
  white-space: pre;
}

.wc-run-layout {
  display: grid;
  gap: var(--wc-space-xl);
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
}

.wc-run-layout__toc {
  position: sticky;
  top: calc(var(--wc-run-header-offset, 0px) + var(--wc-space-lg));
  align-self: start;
  max-height: calc(100vh - var(--wc-space-xl));
  overflow-y: auto;
  padding: var(--wc-space-md) var(--wc-space-lg);
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  box-shadow: var(--wc-shadow-sm);
  width: 280px;
  min-width: 220px;
  transition: top 160ms ease;
}

.wc-run-layout__toc.is-header-hidden {
  top: var(--wc-space-lg);
}

/* ============================================================================
   TOC Preflight Emoji Indicators
   
   Emojis appear in first column when tasks complete. Visibility controlled by
   data-toc-emoji attribute set by preflight.js based on WebSocket updates.
   
   Architecture: docs/ui-docs/control-ui-styling/preflight_behavior.md
   ============================================================================ */
.wc-toc-with-emojis .wc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wc-toc-with-emojis .wc-toc-list li {
  margin-bottom: var(--wc-space-xs);
}

.wc-toc-with-emojis .nav-link {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--wc-space-sm);
  align-items: center;
  padding: var(--wc-space-xs) 0;
  text-decoration: none;
  color: var(--wc-color-text);
  transition: color 0.2s ease;
}

.wc-toc-with-emojis .nav-link:hover {
  color: var(--wc-color-primary);
}

/* Task emoji - hidden by default */
.wc-toc-with-emojis .nav-link::before {
  content: attr(data-toc-emoji-value);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show emoji when preflight task is complete */
.wc-toc-with-emojis .nav-link[data-toc-emoji]:not([data-toc-emoji=""])::before {
  opacity: 1;
}

.wc-run-layout__content {
  min-width: 0;
  display: grid;
  gap: var(--wc-space-xl);
}

@media (max-width: 1024px) {
  .wc-run-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .wc-run-layout__toc {
    position: static;
    max-height: none;
    width: 100%;
    min-width: 0;
  }
}

/* Field helpers */
.wc-field {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-sm);
  margin-bottom: var(--wc-space-xs);
  max-width: 750px;
  width: 100%;
}

.wc-field--number-inline {
  gap: var(--wc-space-xs);
}

.wc-field__label {
  font-weight: 600;
}

.wc-field__control,
.pure-form .wc-field__control {
  padding: var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  font: inherit;
  width: 100%;
  color: var(--wc-color-text);
  background-color: var(--wc-color-surface-alt);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-field__control:hover:not(:disabled):not(:read-only),
.pure-form .wc-field__control:hover:not(:disabled):not(:read-only) {
  background-color: var(--wc-color-surface);
  border-color: var(--wc-color-border-strong);
}

.wc-field__control:focus-visible,
.pure-form .wc-field__control:focus-visible {
  outline: none;
  border-color: var(--wc-color-accent);
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
}

.wc-field__control:disabled,
.wc-field__control[readonly],
.pure-form .wc-field__control:disabled,
.pure-form .wc-field__control[readonly] {
  background-color: var(--wc-color-surface);
  color: var(--wc-color-text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.wc-field__help {
  margin: 0;
  color: var(--wc-color-text-muted);
  font-size: 1rem;
}

.wc-field__message {
  margin: 0;
  font-size: var(--wc-font-size-sm);
}

.wc-field__message--error {
  color: var(--wc-color-critical);
}

.wc-field__message--success {
  color: var(--wc-color-positive);
}

.wc-field--error .wc-field__control {
  border-color: var(--wc-color-critical);
  box-shadow: 0 0 0 1px rgba(207, 34, 46, 0.15);
}

.wc-field--error .wc-choice-group {
  border-left: 3px solid var(--wc-color-critical);
  padding-left: var(--wc-space-sm);
}

.wc-field__inline-row {
  display: grid;
  grid-template-columns: minmax(260px, 320px) auto auto;
  align-items: center;
  gap: var(--wc-space-md);
}

@media (max-width: 768px) {
  .wc-field__inline-row {
    grid-template-columns: 1fr auto;
  }
}

.wc-field__input-row {
  display: flex;
  align-items: center;
  gap: var(--wc-space-sm);
  justify-content: flex-start;
}

.wc-field__control--number {
  width: 120px;
  min-width: 100px;
  flex: 0 0 auto;
}

.wc-field__control--textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

.wc-theme-lab__spin-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 3rem;
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background-color: var(--wc-color-surface-alt);
}

.wc-theme-lab__spin-icon {
  color: var(--wc-number-spin-color);
  font-size: 0.95rem;
  line-height: 1;
}

.wc-field__unit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  min-height: 2.5rem;
  width: 6rem;
  flex: 0 0 6rem;
  padding: 0;
  color: var(--wc-color-text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.wc-field__unit--spacer {
  visibility: hidden;
}

.wc-field--text-inline .wc-field__control--text {
  width: 240px;
  min-width: 240px;
  flex: 0 0 auto;
}

.wc-field__meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wc-color-text-muted);
}

.wc-field--checkbox {
  gap: var(--wc-space-xs);
}

.wc-choice-group {
  display: grid;
  gap: var(--wc-space-xs);
}

.wc-choice-group--horizontal {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.wc-choice-group--grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  column-gap: var(--wc-space-sm);
}

.wc-choice-group--wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
}

.wc-choice-group--wrap .wc-choice {
  flex: 0 1 auto;
  min-width: 8rem;
}

/* Grouped choice sections (e.g., Climate dataset categories) */
.wc-choice-group--grouped {
  gap: var(--wc-space-lg);
}

.wc-choice-group__section {
  display: grid;
  gap: var(--wc-space-xs);
}

.wc-choice-group__heading {
  margin: 0 0 var(--wc-space-2xs) 0;
  font-size: var(--wc-font-sm);
  font-weight: 600;
  color: var(--wc-color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--wc-color-border);
  padding-bottom: var(--wc-space-2xs);
}

.wc-choice-group__hint {
  margin: 0 0 var(--wc-space-xs) 0;
  font-size: var(--wc-font-xs);
  color: var(--wc-color-text-muted);
  font-style: italic;
}

/* Dataset hint message (shown for selected option in group) */
.wc-dataset-hint {
  margin-top: var(--wc-space-xs);
  padding: var(--wc-space-xs) var(--wc-space-sm);
  background: var(--wc-color-surface-alt, rgba(var(--wc-color-accent-rgb, 59, 130, 246), 0.08));
  border-left: 3px solid var(--wc-color-accent, #3b82f6);
  border-radius: var(--wc-radius-sm);
}

.wc-dataset-hint__text {
  margin: 0;
  font-size: var(--wc-font-xs);
  color: var(--wc-color-text);
  line-height: 1.4;
}

.wc-dataset-hint__meta {
  margin: var(--wc-space-2xs) 0 0 0;
  font-size: var(--wc-font-xs);
  color: var(--wc-color-text-muted);
  line-height: 1.4;
}

.wc-dataset-hint[hidden] {
  display: none;
}

/* =============================================================================
   README Editor
   ========================================================================== */

.wc-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wc-space-md);
  min-height: 0;
}

.wc-editor-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wc-editor-textarea {
  width: 100%;
  min-height: 600px;
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-none);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  resize: vertical;
  background: var(--wc-color-surface);
  color: var(--wc-color-text);
}

.wc-editor-textarea:focus {
  outline: none;
  border-color: var(--wc-color-accent);
  box-shadow: 0 0 0 1px var(--wc-color-accent);
}

.wc-editor-preview {
  width: 100%;
  min-height: 600px;
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-none);
  background: var(--wc-color-surface);
  overflow-y: auto;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .wc-editor-grid {
    grid-template-columns: 1fr;
  }
  
  .wc-editor-textarea,
  .wc-editor-preview {
    min-height: 400px;
  }
}

/* =============================================================================
   Authentication pages
   ========================================================================== */

.wc-auth-card {
  max-width: 28rem;
  margin: var(--wc-space-2xl) auto;
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-none);
  box-shadow: var(--wc-shadow-md);
}

.wc-auth-card__header {
  padding: var(--wc-space-2xl) var(--wc-space-2xl) var(--wc-space-lg);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-auth-card__header h1 {
  margin: 0 0 var(--wc-space-sm);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-auth-card__header p {
  margin: 0;
  color: var(--wc-color-text-muted);
  font-size: 0.95rem;
}

.wc-auth-card__body {
  padding: var(--wc-space-2xl);
}

.wc-auth-form {
  margin: 0;
}

.wc-auth-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.wc-auth-form .pure-control-group {
  margin-bottom: var(--wc-space-lg);
}

.wc-auth-form .pure-control-group label {
  width: 100%;
  text-align: left;
  margin-bottom: var(--wc-space-xs);
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-auth-form .pure-control-group input[type="text"],
.wc-auth-form .pure-control-group input[type="email"],
.wc-auth-form .pure-control-group input[type="password"] {
  width: 100%;
  max-width: none;
  padding: var(--wc-space-sm) var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-none);
  font-size: 1rem;
}

.wc-auth-form .pure-control-group input[type="text"]:focus,
.wc-auth-form .pure-control-group input[type="email"]:focus,
.wc-auth-form .pure-control-group input[type="password"]:focus {
  outline: 2px solid var(--wc-color-accent);
  outline-offset: 0;
  border-color: var(--wc-color-accent);
}

.wc-auth-form .pure-controls {
  margin-top: var(--wc-space-xl);
  padding: 0;
  margin-left: 0;
}

.wc-auth-form .pure-button {
  width: 100%;
  padding: var(--wc-space-md) var(--wc-space-lg);
  font-size: 1rem;
  font-weight: 600;
}

.wc-auth-password {
  display: flex;
  gap: var(--wc-space-sm);
  align-items: stretch;
}

.wc-auth-password input {
  flex: 1;
  min-width: 0;
}

.wc-auth-password .wc-password-toggle {
  flex: 0 0 auto;
  width: auto;
  padding: var(--wc-space-sm) var(--wc-space-md);
  white-space: nowrap;
}

.wc-auth-checkbox {
  margin-top: var(--wc-space-md);
  margin-bottom: var(--wc-space-lg);
}

.wc-auth-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--wc-space-sm);
  font-weight: normal;
  cursor: pointer;
}

.wc-auth-checkbox input[type="checkbox"] {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--wc-color-accent);
}

.wc-auth-separator {
  margin: var(--wc-space-xl) 0;
  text-align: center;
  color: var(--wc-color-text-muted);
  font-size: 0.875rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wc-space-md);
}

.wc-auth-separator::before,
.wc-auth-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wc-color-border);
}

.wc-auth-separator--inline {
  margin: var(--wc-space-lg) 0;
}

.wc-auth-messages {
  margin-bottom: var(--wc-space-lg);
}

.wc-auth-message {
  padding: var(--wc-space-md);
  border-left: 3px solid var(--wc-color-border);
  background: var(--wc-color-surface-alt);
  margin-bottom: var(--wc-space-sm);
}

.wc-auth-message:last-child {
  margin-bottom: 0;
}

.wc-auth-message[data-category="error"] {
  border-left-color: var(--wc-color-critical);
  background: var(--wc-color-critical-soft);
  color: var(--wc-color-critical);
}

.wc-auth-message[data-category="info"] {
  border-left-color: var(--wc-color-accent);
  background: var(--wc-color-accent-soft);
}

.wc-auth-message[data-category="success"] {
  border-left-color: var(--wc-color-positive);
  background: var(--wc-color-positive-soft);
  color: var(--wc-color-positive);
}

/* OAuth buttons */
.wc-oauth-container {
  margin-bottom: var(--wc-space-2xl);
}

.wc-oauth-intro {
  margin: 0 0 var(--wc-space-lg);
  color: var(--wc-color-text-muted);
  font-size: 0.95rem;
}

.wc-oauth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-md);
}

.wc-oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wc-space-md);
  padding: var(--wc-space-md) var(--wc-space-lg);
  width: 100%;
  border: 1px solid var(--wc-color-border);
  border-radius: 4px;
  background: var(--wc-color-surface) !important;
  color: var(--wc-color-text) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.wc-oauth-button:hover {
  background: var(--wc-color-surface-alt) !important;
  border-color: var(--wc-color-border-strong);
  transform: none;
  text-decoration: none !important;
}

.wc-oauth-button--secondary {
  background: var(--wc-color-accent) !important;
  color: var(--wc-color-surface) !important;
  border-color: var(--wc-color-accent);
}

.wc-oauth-button--secondary:hover {
  background: var(--wc-color-link-hover) !important;
  border-color: var(--wc-color-link-hover);
  color: var(--wc-color-surface) !important;
  text-decoration: none !important;
}

.wc-oauth-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.wc-oauth-icon {
  display: inline-flex;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.wc-oauth-icon svg {
  width: 100%;
  height: 100%;
}

.wc-oauth-label {
  flex: 1;
  text-align: center;
}

/* Auth footer menu */
.wc-auth-menu {
  margin-top: var(--wc-space-2xl);
  margin-left: var(--wc-space-2xl);
  margin-right: var(--wc-space-2xl);
  padding-top: var(--wc-space-lg);
  border-top: 1px solid var(--wc-color-border);
}

.wc-auth-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wc-space-sm) var(--wc-space-lg);
}

.wc-auth-menu li {
  margin: 0;
  text-align: center;
}

.wc-auth-menu a {
  color: var(--wc-color-link);
  text-decoration: none;
  font-size: 0.95rem;
}

.wc-auth-menu a:hover {
  text-decoration: underline;
  color: var(--wc-color-link-hover);
}

.wc-auth-links {
  list-style: none;
  margin: var(--wc-space-md) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-sm);
}

.wc-auth-links a {
  color: var(--wc-color-link);
  text-decoration: none;
  font-weight: 600;
}

.wc-auth-links a:hover {
  color: var(--wc-color-link-hover);
  text-decoration: underline;
}

.wc-auth-footer {
  padding: var(--wc-space-xl) var(--wc-space-2xl);
  border-top: 1px solid var(--wc-color-border);
}

.wc-auth-footer .pure-button {
  width: 100%;
}

/* Responsive adjustments */
@media (max-width: 35.5em) {
  .wc-auth-card {
    margin: var(--wc-space-lg) var(--wc-space-md);
  }

  .wc-auth-card__header,
  .wc-auth-card__body {
    padding: var(--wc-space-lg);
  }

  .wc-auth-password {
    flex-direction: column;
  }

  .wc-auth-password .wc-password-toggle {
    width: 100%;
  }

  .wc-auth-menu {
    margin-left: var(--wc-space-lg);
    margin-right: var(--wc-space-lg);
  }

  .wc-auth-menu ul {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   User Profile page
   ========================================================================== */

.wc-profile {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-2xl);
}

.wc-profile__heading {
  margin: 0 0 var(--wc-space-lg);
  font-size: 1.5rem;
  font-weight: 600;
}

.wc-profile__subheading {
  margin: 0 0 var(--wc-space-sm);
  font-size: 1.25rem;
  font-weight: 600;
}

.wc-profile-details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-md);
}

.wc-profile-details__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--wc-space-md);
  padding-bottom: var(--wc-space-md);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-profile-details__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wc-profile-details__label {
  margin: 0;
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-profile-details__value {
  margin: 0;
  color: var(--wc-color-text);
}

.wc-profile-details__value--muted {
  color: var(--wc-color-text-muted);
  font-style: italic;
}

.wc-profile__actions {
  padding-top: var(--wc-space-md);
  border-top: 1px solid var(--wc-color-border);
}

.wc-profile__action {
  color: var(--wc-color-link);
  text-decoration: none;
  font-weight: 600;
}

.wc-profile__action:hover {
  color: var(--wc-color-link-hover);
  text-decoration: underline;
}

.wc-profile-providers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-md);
}

.wc-profile-providers__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-md);
  padding: var(--wc-space-md);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
}

.wc-profile-providers__meta {
  display: flex;
  align-items: center;
  gap: var(--wc-space-md);
  flex: 1;
}

.wc-profile-providers__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.wc-profile-providers__icon svg {
  width: 100%;
  height: 100%;
}

.wc-profile-providers__icon--fallback {
  background: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
}

.wc-profile-providers__initials {
  font-size: var(--wc-font-size-xs);
  font-weight: 600;
  color: var(--wc-color-text-muted);
}

.wc-profile-providers__text {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-2xs);
}

.wc-profile-providers__name {
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-profile-providers__email {
  font-size: 0.875rem;
  color: var(--wc-color-text-muted);
}

.wc-profile-providers__form {
  margin: 0;
}

.wc-profile-providers__button {
  min-width: 7rem;
}

.wc-profile-providers__empty {
  margin: 0;
  padding: var(--wc-space-lg);
  color: var(--wc-color-text-muted);
  text-align: center;
  font-style: italic;
  background: var(--wc-color-surface-alt);
  border: 1px solid var(--wc-color-border);
}

.wc-profile-dev {
  padding: var(--wc-space-xl) 0;
  border-top: 1px solid var(--wc-color-border);
}

.wc-profile-dev p {
  margin: 0 0 var(--wc-space-md);
  color: var(--wc-color-text-muted);
  font-size: 0.95rem;
}

.wc-profile-dev__control {
  display: flex;
  align-items: center;
  gap: var(--wc-space-sm);
}

.wc-profile-dev__control input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wc-color-accent);
}

.wc-profile-dev__control label {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 35.5em) {
  .wc-profile-details__row {
    grid-template-columns: 1fr;
    gap: var(--wc-space-xs);
  }

  .wc-profile-providers__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .wc-profile-providers__button {
    width: 100%;
  }
}

/* =============================================================================
   Home page / Landing page components
   ========================================================================== */

.wc-banner {
  padding: var(--wc-space-2xl);
  background: var(--wc-color-surface-alt);
  border-left: 3px solid var(--wc-color-accent);
}

.wc-banner__lead {
  margin: 0 0 var(--wc-space-lg);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-banner__links {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-md);
}

.wc-banner__links a {
  display: flex;
  align-items: center;
  gap: var(--wc-space-sm);
  color: var(--wc-color-link);
  text-decoration: none;
}

.wc-banner__links a:hover {
  color: var(--wc-color-link-hover);
  text-decoration: underline;
}

.wc-banner__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.wc-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wc-space-xl);
}

.wc-feature__media {
  width: 100%;
}

.wc-feature__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--wc-radius-md);
}

.wc-feature__media {
  display: block;
}

.wc-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-md);
}

.wc-feature__body h2,
.wc-feature__body h3 {
  margin: 0;
}

.wc-feature__body p {
  margin: 0;
  line-height: 1.6;
  max-width: min(var(--wc-width-reading), 100%);
}

.wc-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
}

.wc-feature__metrics {
  font-size: var(--wc-font-size-base);
  color: var(--wc-color-text-muted);
  padding-top: var(--wc-space-sm);
  border-top: 1px solid var(--wc-color-border);
}

.wc-context-menu {
  position: fixed;
  z-index: 1000;
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  box-shadow: var(--wc-shadow-md);
  padding: var(--wc-space-md);
  min-width: 12rem;
}

.wc-context-menu[aria-hidden="true"] {
  display: none;
}

.wc-context-menu__title {
  margin: 0 0 var(--wc-space-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-context-menu__actions {
  display: flex;
  gap: var(--wc-space-sm);
}

@media (min-width: 48em) {
  .wc-feature {
    grid-template-columns: 20rem 1fr;
  }

  .wc-banner__links {
    flex-direction: row;
    gap: var(--wc-space-xl);
  }
}

@media (max-width: 48em) {
  .wc-stack {
    padding-left: var(--wc-space-md);
    padding-right: var(--wc-space-md);
  }

  .wc-feature__media {
    display: none;
  }

  .wc-panel {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: var(--wc-space-lg) var(--wc-space-md);
  }

  .wc-feature__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wc-feature__actions .pure-button {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .wc-feature__body {
    width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (max-width: 840px) {
  .wc-choice-group--horizontal {
    grid-auto-flow: row;
  }
}

.wc-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--wc-space-xs);
  font-weight: 600;
}

.wc-choice__body {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-xs);
}

.wc-choice__label {
  font-weight: 600;
}

.wc-choice__description {
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
}

.wc-choice input[type="radio"],
.wc-choice--checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 0.95rem;
  height: 0.95rem;
  appearance: auto;
  accent-color: var(--wc-color-accent);
}

.wc-choice--checkbox {
  align-items: center;
}

.wc-choice--checkbox .wc-choice__body {
  flex-direction: row;
}

.wc-choice.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wc-choice.is-disabled input {
  pointer-events: none;
}

.wc-choice-help {
  margin-top: var(--wc-space-sm);
  padding: var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface-alt);
  display: grid;
  gap: var(--wc-space-sm);
}

.wc-choice-help__panel {
  margin: 0;
  font-size: 0.9rem;
}

.wc-field--display .wc-text-display {
  margin-bottom: var(--wc-space-sm);
}

.wc-text-display {
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
  padding: var(--wc-space-md);
  border-radius: var(--wc-radius-sm);
}

.wc-text-display--info {
  border-color: var(--wc-color-accent);
  background: var(--wc-color-accent-soft);
}

.wc-text-display--success {
  border-color: var(--wc-color-positive);
  background: var(--wc-color-positive-soft);
}

.wc-text-display--warning {
  border-color: var(--wc-color-attention);
  background: var(--wc-color-attention-soft);
}

.wc-text-display__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
  margin-top: var(--wc-space-xs);
}

.wc-dynamic-slot {
  min-height: 10rem;
  border: 1px dashed var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface-alt);
}

.wc-field--dynamic {
  gap: var(--wc-space-sm);
}

.wc-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-sm);
}

.wc-tabs__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--wc-space-xs);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-tabs__tab {
  border: 1px solid transparent;
  border-radius: var(--wc-radius-sm) var(--wc-radius-sm) 0 0;
  background: var(--wc-color-surface);
  color: var(--wc-color-text-muted);
  padding: var(--wc-space-xs) var(--wc-space-md);
  font-size: var(--wc-font-size-base);
  cursor: pointer;
}

.wc-tabs__tab:hover,
.wc-tabs__tab:focus {
  color: var(--wc-color-text);
}

.wc-tabs__tab.is-active {
  color: var(--wc-color-text);
  border-color: var(--wc-color-border) var(--wc-color-border) var(--wc-color-surface);
  background: var(--wc-color-surface);
}

.wc-tabs__tab[aria-selected="false"] {
  border-bottom-color: transparent;
}

.wc-tabs__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--wc-space-xs);
}

.wc-tabs__label {
  font-size: var(--wc-font-size-base);
  font-weight: 600;
}

.wc-tabs__panels {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
}

.wc-tabs__panel {
  padding: var(--wc-space-md);
  display: none;
}

.wc-tabs__panel.is-active {
  display: block;
}

.wc-color-scale {
  display: grid;
  gap: var(--wc-space-xs);
}

.wc-color-scale__label {
  font-weight: 600;
}

.wc-color-scale__range {
  width: 100%;
}

.wc-color-scale__units {
  font-size: var(--wc-font-size-sm);
  color: var(--wc-color-text-muted);
}

.wc-color-scale__bar {
  width: 100%;
  height: 32px;
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-color-scale__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.wc-color-scale__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--wc-font-size-sm);
  color: var(--wc-color-text-muted);
}

.wc-color-scale__help {
  font-size: var(--wc-font-size-sm);
  color: var(--wc-color-text-muted);
}

.wc-button-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
}

.wc-button-row .pure-button {
  margin: 0;
}

#sbs_mode1_controls {
  gap: var(--wc-space-xs);
}

#sbs_mode1_controls .wc-button-row {
  margin-bottom: 0;
}

#sbs_mode1_controls .wc-button-row .pure-button {
  width: 240px;
  min-height: 2.75rem;
  padding: var(--wc-space-sm) var(--wc-space-xl);
  justify-content: center;
}

#sbs_mode1_controls .wc-job-hint:empty {
  display: none;
}

.wc-baer-classify {
  display: grid;
  gap: var(--wc-space-lg);
}

.wc-baer-classify h5 {
  margin: 0;
  font-weight: 600;
}

.wc-baer-classify__table {
  width: 100%;
  max-width: 450px;
}

.wc-baer-classify__table--breaks {
  max-width: 600px;
}

.wc-baer-classify__table th {
  text-align: left;
}

.wc-baer-classify__table th.wc-text-right {
  text-align: right;
}

.wc-baer-classify__table td.wc-text-right {
  text-align: right;
}

.wc-baer-classify__table td.wc-text-right .unitizer-wrapper {
  margin-left: auto;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--wc-space-2xs);
}

.wc-baer-classify__table td.wc-text-right .unitizer {
  text-align: right;
}

.wc-baer-classify__input {
  width: 100%;
  max-width: 11rem;
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background-color: var(--wc-color-surface);
  font: inherit;
}

.wc-baer-classify__input:focus {
  outline: 2px solid var(--wc-color-focus, var(--wc-color-accent));
  outline-offset: 1px;
}

.wc-baer-classify__select {
  width: 100%;
  max-width: 14rem;
}

.wc-baer-classify__swatch {
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border-radius: var(--wc-radius-xs);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-baer-swatch, transparent);
}

.wc-baer-classify__details {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-md);
  padding: var(--wc-space-sm) var(--wc-space-md);
  background: var(--wc-color-surface-alt);
}

.wc-baer-classify__details > .wc-collapse__content {
  margin-top: var(--wc-space-sm);
}

/* ============================================
   Legend Components
   ============================================ */

.wc-legend {
  display: grid;
  gap: var(--wc-space-xs);
  font-size: var(--wc-font-size-sm);
}

.wc-legend-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--wc-space-sm);
  align-items: center;
}

.wc-legend-item__swatch {
  display: block;
  width: 3rem;
  height: 1.5rem;
  border-radius: var(--wc-radius-xs);
  border: 1px solid var(--wc-color-border);
  background: var(--legend-color, transparent);
}

.wc-legend-item__label {
  line-height: 1.4;
  font-size: var(--wc-font-size-base);
  color: var(--wc-color-text);
}

.wc-map-legend__header {
  font-weight: var(--wc-font-weight-semibold);
  margin-bottom: var(--wc-space-sm);
  font-size: calc(var(--wc-font-size-base) * 1.15);
}

.wc-map-legend__image {
  display: flex;
  justify-content: center;
  margin-top: var(--wc-space-sm);
}

.wc-map-legend__image img {
  max-width: 100%;
  height: auto;
}

.wc-observed {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-observed .wc-button-row {
  justify-content: flex-start;
}

.wc-rap-ts {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-rap-ts .wc-button-row {
  justify-content: flex-start;
}

.wc-debris-flow {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-debris-flow .wc-button-row {
  justify-content: flex-start;
}

.wc-dss-export {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-dss-export__orders {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-md);
}

.wc-dss-export .wc-button-row {
  justify-content: flex-start;
}

.wc-rangeland {
  display: grid;
  gap: var(--wc-space-lg);
}

.wc-rangeland__heading {
  margin: var(--wc-space-md) 0 var(--wc-space-sm);
  font-size: 1rem;
  font-weight: 600;
}

.wc-rangeland__grid {
  display: grid;
  gap: var(--wc-space-md);
}

@media (min-width: 720px) {
  .wc-rangeland__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wc-rangeland__rap-year {
  max-width: 18rem;
}

.wc-map-layout {
  display: grid;
  gap: var(--wc-space-lg);
}

@media (min-width: 960px) {
  .wc-map-layout {
    grid-template-columns: var(--wc-map-layout-left, minmax(0, 2.15fr)) minmax(0, 1fr);
    align-items: start;
  }
}

.wc-map-layout__canvas {
  display: grid;
  gap: var(--wc-space-md);
  justify-items: start;
  align-items: start;
}

.wc-map {
  position: relative;
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
  overflow: hidden;
  resize: none;
  min-width: 320px;
  min-height: 320px;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}

.wc-map__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.wc-map__canvas.leaflet-container {
  width: 100%;
  height: 100%;
}

/* Override Leaflet zoom control background for better visibility */
.leaflet-control-zoom.leaflet-bar {
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  box-shadow: var(--wc-shadow-sm);
}

.leaflet-control-zoom.leaflet-bar a {
  color: var(--wc-color-text);
  background: transparent;
}

.leaflet-control-zoom.leaflet-bar a:hover,
.leaflet-control-zoom.leaflet-bar a:focus-visible {
  background: var(--wc-color-surface-alt);
  color: var(--wc-color-text);
}

.leaflet-control-zoom.leaflet-bar a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
}

.wc-map--invert-base .leaflet-pane.leaflet-tile-pane {
  filter: hue-rotate(180deg) saturate(0.8) contrast(0.95) brightness(0.5);
}

.wc-map__resize-handle {
  position: absolute;
  right: var(--wc-space-sm);
  bottom: var(--wc-space-sm);
  width: 28px;
  height: 28px;
  border-radius: var(--wc-radius-sm);
  border: 1px solid rgba(31, 35, 40, 0.2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18);
  cursor: nwse-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--wc-color-border-strong);
  z-index: 1002;
  touch-action: none;
}

.wc-map__resize-handle:focus-visible {
  outline: 2px solid var(--wc-color-primary);
  outline-offset: 2px;
}

.wc-map__resize-grip {
  display: block;
  width: 70%;
  height: 70%;
  background:
    linear-gradient(135deg, transparent 0, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%, transparent 100%),
    linear-gradient(135deg, transparent 0, transparent 65%, currentColor 65%, currentColor 75%, transparent 75%, transparent 100%);
  opacity: 0.7;
}

.wc-map-layer-control {
  position: absolute;
  top: var(--wc-space-sm);
  right: var(--wc-space-sm);
  z-index: 1003;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wc-space-xs);
  pointer-events: auto;
}

.wc-map-layer-control__toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--wc-radius-sm);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
  box-shadow: var(--wc-shadow-sm);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wc-color-text);
}

.wc-map-layer-control__toggle:hover,
.wc-map-layer-control__toggle:focus-visible {
  background: var(--wc-color-surface-alt);
  border-color: var(--wc-color-border-strong);
}

.wc-map-layer-control__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--wc-color-accent-soft);
}

.wc-map-layer-control__icon {
  width: 20px;
  height: 20px;
  display: block;
}

.wc-map-layer-control__panel {
  min-width: 190px;
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  box-shadow: var(--wc-shadow-sm);
  padding: var(--wc-space-sm);
  display: grid;
  gap: var(--wc-space-sm);
}

.wc-map-layer-control__section {
  display: grid;
  gap: var(--wc-space-xs);
}

.wc-map-layer-control__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wc-color-text);
}

.wc-map-layer-control__list {
  display: grid;
  gap: var(--wc-space-xs);
}

.wc-map-layer-control__item {
  display: flex;
  align-items: center;
  gap: var(--wc-space-xs);
  font-size: 0.85rem;
  color: var(--wc-color-text);
  cursor: pointer;
}

.wc-map-layer-control__item input {
  margin: 0;
}

.wc-map-layer-control__item input:focus-visible {
  outline: 2px solid var(--wc-color-accent-soft);
  outline-offset: 2px;
}

.wc-map-layer-control__panel[hidden] {
  display: none;
}

.wc-map .deck-widget-button-group {
  display: inline-flex;
  flex-direction: row;
  background: var(--wc-color-surface);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  box-shadow: var(--wc-shadow-sm);
  overflow: hidden;
  pointer-events: auto;
}

.wc-map .deck-widget-button-group.vertical {
  flex-direction: column;
}

.wc-map .deck-widget-icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--wc-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wc-map .deck-widget-icon-button:hover,
.wc-map .deck-widget-icon-button:focus-visible {
  background: var(--wc-color-surface-alt);
}

.wc-map .deck-widget-icon-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--wc-color-accent-soft);
}

.wc-map .deck-widget-icon-button + .deck-widget-icon-button {
  border-left: 1px solid var(--wc-color-border);
}

.wc-map .deck-widget-button-group.vertical .deck-widget-icon-button + .deck-widget-icon-button {
  border-left: 0;
  border-top: 1px solid var(--wc-color-border);
}

.wc-map .deck-widget-icon {
  width: 12px;
  height: 12px;
  position: relative;
  display: block;
}

.wc-map .deck-widget-icon::before,
.wc-map .deck-widget-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
}

.wc-map .deck-widget-icon::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.wc-map .deck-widget-icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.wc-map .deck-widget-zoom-out .deck-widget-icon::after {
  content: none;
}

.wc-map-layout__inspector {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-map-panel__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--wc-space-sm);
}

.wc-map-panel__subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  margin: var(--wc-space-md) 0 var(--wc-space-sm);
}

.wc-map-status {
  display: block;
  width: 100%;
  font-size: var(--wc-font-size-base);
  color: var(--wc-color-text);
  justify-self: stretch;
}

.wc-map-status .wc-summary-pane {
  max-width: none;
  margin-bottom: 0;
}

.wc-map-status__spacer {
  flex: 1 1 auto;
  min-width: var(--wc-space-md);
}

.wc-map-controls {
  display: grid;
  gap: var(--wc-space-sm);
}

.wc-map-controls__row--inputs {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  grid-template-areas: "label input actions go";
  gap: var(--wc-space-sm);
  align-items: center;
  margin-bottom: var(--wc-space-xl);
}


.wc-map-controls__label {
  grid-area: label;
  font-weight: 700;
  color: var(--wc-color-text);
  margin: 0;
}

.wc-map-controls__input {
  grid-area: input;
  min-width: 260px;
  width: 100%;
}

.wc-map-controls__input-field {
  width: 100%;
}

.wc-map-controls__actions {
  grid-area: actions;
  display: inline-flex;
  gap: var(--wc-space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.wc-map-controls__go {
  grid-area: go;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


@media (max-width: 960px) {
  .wc-map-controls__row--inputs {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "input"
      "actions"
      "go";
  }

  .wc-map-controls__go {
    justify-content: flex-start;
  }
}

.wc-map-form {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-map-legend {
  display: grid;
  gap: var(--wc-space-xs);
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
}

.wc-map-scale {
  margin-top: var(--wc-space-md);
}

.wc-map-grid {
  display: grid;
  gap: var(--wc-space-md);
}

.wc-map-grid--split {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .wc-map-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wc-landuse-report {
  display: block;
  width: 100%;
}

.wc-landuse-report__table {
  width: 100%;
}

.wc-landuse-report__col--actions {
  width: 3.75rem;
  text-align: center;
}

.wc-landuse-report__col--mapping {
  width: 55%;
}

.wc-landuse-report__col--coverage {
  text-align: right;
  white-space: nowrap;
}

.wc-landuse-report__cell {
  vertical-align: middle;
}

.wc-landuse-report__cell--numeric {
  text-align: right;
  white-space: nowrap;
}

.wc-landuse-report__summary > td {
  padding-bottom: var(--wc-space-lg);
}

.wc-landuse-report__summary {
  background: var(--wc-color-surface);
}

.wc-landuse-report__summary:last-of-type > td {
  padding-bottom: 0;
}

.wc-landuse-report__toggle {
  --wc-button-primary-text: var(--wc-color-text);
  padding: var(--wc-space-2xs) var(--wc-space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-color-surface);
  color: var(--wc-color-text);
  border: 1px solid var(--wc-color-border);
  min-width: 2.25rem;
  min-height: 2.25rem;
  box-shadow: none;
}

.wc-landuse-report__toggle:hover,
.wc-landuse-report__toggle:focus-visible {
  background: var(--wc-color-surface-alt);
  border-color: var(--wc-color-border-strong);
  color: var(--wc-color-text);
}

.wc-landuse-report__toggle .wc-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.wc-landuse-report__toggle .wc-icon--wrench {
  -webkit-mask-image: url("../open-iconic/png/wrench-2x.png");
  mask-image: url("../open-iconic/png/wrench-2x.png");
}

.wc-landuse-report__select {
  min-width: 12rem;
  max-width: 100%;
}

.wc-landuse-report__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wc-space-sm);
  padding: var(--wc-space-sm) var(--wc-space-md);
  background: inherit;
}

.wc-landuse-report__details-row {
  display: none;
  background: inherit;
}

.wc-landuse-report__details-row.is-open {
  display: table-row;
}

.wc-landuse-report__details-cell {
  padding: 0;
  border-top: none;
  background: inherit;
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-landuse-report__collapse {
  border: none;
  box-shadow: none;
  display: block;
  margin: 0;
  background: inherit;
}
.wc-landuse-report__collapse > .wc-collapse__summary,
.wc-landuse-report__collapse::before,
.wc-landuse-report__collapse::after {
  display: none !important;
}

.wc-landuse-report__control {
  display: flex;
  align-items: center;
  gap: var(--wc-space-xs);
  flex-wrap: wrap;
  margin-right: var(--wc-space-lg);
}

.wc-landuse-report__control-label {
  font-weight: 600;
}

.wc-landuse-report__value {
  font-weight: 500;
}

.wc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.wc-soil-report__table {
  width: 100%;
}

.wc-soil-report__cell--numeric {
  text-align: right;
  white-space: nowrap;
}

.wc-soil-report__table tbody tr > td {
  padding-bottom: var(--wc-space-lg);
}

.wc-soil-report__table tbody tr:last-of-type > td {
  padding-bottom: 0;
}

.wc-link--file {
  color: var(--wc-color-primary);
  text-decoration: underline;
  font-weight: 600;
}

.wc-link--file:hover,
.wc-link--file:focus {
  color: var(--wc-color-primary-dark);
  text-decoration: none;
}

.wc-fieldset {
  border: 1px solid var(--wc-color-border);
  padding: var(--wc-space-md);
  margin: 0 0 var(--wc-space-lg) 0;
}

.wc-fieldset__legend {
  font-weight: 600;
}

.wc-fieldset__description {
  margin-top: 0;
  color: var(--wc-color-text-muted);
  font-size: 0.9rem;
}

.wc-collapse {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  padding: var(--wc-space-sm) var(--wc-space-md);
  margin-bottom: var(--wc-space-lg);
}

.wc-collapse + .wc-collapse {
  margin-top: var(--wc-space-md);
}

.wc-collapse__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wc-space-sm);
  cursor: pointer;
  font-weight: 600;
}

.wc-collapse__summary::-webkit-details-marker {
  display: none;
}

.wc-collapse__title {
  font-size: 1rem;
}

.wc-collapse__icon::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.2s ease;
}

.wc-collapse[open] .wc-collapse__icon::before {
  transform: rotate(90deg);
}

.wc-collapse__description {
  margin: var(--wc-space-sm) 0;
  color: var(--wc-color-text-muted);
  font-size: 0.9rem;
}

.wc-collapse__content {
  margin-top: var(--wc-space-sm);
  display: grid;
  gap: var(--wc-space-sm);
}

body.wc-modal-open {
  overflow: hidden;
}

.wc-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wc-space-2xl);
  z-index: 2000;
}

.wc-modal[hidden] {
  display: none;
}

.wc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 35, 40, 0.55);
}

.wc-modal__dialog {
  position: relative;
  background: var(--wc-color-surface);
  border-radius: var(--wc-radius-md);
  box-shadow: var(--wc-shadow-md);
  width: min(720px, 100%);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2001;
}

.wc-modal__header,
.wc-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wc-space-sm);
  padding: var(--wc-space-lg);
  background: var(--wc-color-surface);
}

.wc-modal__header {
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-modal__footer {
  border-top: 1px solid var(--wc-color-border);
  justify-content: flex-end;
}

.wc-modal__body {
  padding: 0 var(--wc-space-lg) var(--wc-space-lg);
  overflow-y: auto;
}

.wc-modal__title {
  margin: 0;
  font-size: 1.5rem;
}

.wc-modal__close {
  background: none;
  border: 0;
  color: var(--wc-color-text-muted);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.wc-modal__close:hover,
.wc-modal__close:focus {
  color: var(--wc-color-text);
}

@media (max-width: 640px) {
  .wc-modal {
    padding: var(--wc-space-lg);
  }

  .wc-modal__dialog {
    max-height: calc(100vh - 2rem);
  }
}

.wc-unitizer {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-xl);
}

.wc-unitizer__global {
  display: grid;
  gap: var(--wc-space-sm);
}

.wc-unitizer__heading {
  margin: 0;
  font-size: 1.125rem;
}

.wc-unitizer__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
}

.wc-unitizer__details {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-md);
  background: var(--wc-color-surface-alt);
  overflow: hidden;
}

.wc-unitizer__summary {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-xs);
  padding: var(--wc-space-md);
  cursor: pointer;
  outline: none;
  list-style: none;
}

.wc-unitizer__summary::-webkit-details-marker {
  display: none;
}

.wc-unitizer__summary-title {
  font-weight: 600;
}

.wc-unitizer__summary-hint {
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
}

.wc-unitizer__panel {
  padding: 0 var(--wc-space-md) var(--wc-space-md);
}

.wc-unitizer__scroll {
  max-height: 18rem;
  overflow-y: auto;
  display: grid;
  gap: var(--wc-space-lg);
  padding-right: var(--wc-space-sm);
}

.wc-unitizer__category {
  display: grid;
  gap: var(--wc-space-sm);
  padding-bottom: var(--wc-space-sm);
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-unitizer__category:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wc-unitizer__category-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .wc-unitizer__scroll {
    max-height: none;
  }
}

/* =============================================================================
   Toolbar utilities
   ========================================================================== */

.wc-toolbar {
  display: flex;
  align-items: center;
  gap: var(--wc-space-md);
  padding: var(--wc-space-md) 0;
}

.wc-toolbar--end {
  justify-content: flex-end;
}

/* =============================================================================
   Table components
   ========================================================================== */

.wc-table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: var(--wc-color-surface);
}

.wc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.wc-table th,
.wc-table td {
  padding: var(--wc-space-sm) var(--wc-space-md);
  text-align: left;
  vertical-align: top;
  position: relative;
}

.wc-table thead th {
  font-weight: 700 !important;
  background: var(--wc-color-surface-alt);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--wc-color-border);
  color: var(--wc-color-text);
}

.sortable-header {
  cursor: pointer;
  user-select: none;
  padding-right: calc(var(--wc-space-md) + 0.5rem);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sortable-header .wc-server-sort {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--wc-space-xs);
  width: 100%;
  padding: var(--wc-space-xs) 0;
  color: inherit;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.sortable-header .wc-server-sort:hover {
  color: var(--wc-color-text);
}

.sortable-header .wc-server-sort:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--wc-color-accent-soft);
  border-radius: var(--wc-radius-sm);
}

.sortable-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--wc-color-accent-soft);
}

.sortable-header .sortable-indicator {
  color: var(--wc-color-text-muted);
  font-size: var(--wc-font-size-xs);
  margin-left: var(--wc-space-xs);
  opacity: 0.85;
}

.sortable-header[data-sort-direction="asc"],
.sortable-header[data-sort-direction="desc"] {
  color: var(--wc-color-primary);
  background-color: color-mix(in srgb, var(--wc-color-accent-soft) 65%, transparent);
}

.sortable-header[data-sort-direction="asc"] .sortable-indicator,
.sortable-header[data-sort-direction="desc"] .sortable-indicator {
  color: var(--wc-color-primary);
  opacity: 1;
}

.sortable-header[data-sort-direction="desc"] .sortable-indicator {
  transform: translateY(1px);
}

.wc-table tbody td {
  font-weight: var(--wc-font-weight-normal);
}
.wc-table td.wc-text-right,
.wc-table th.wc-text-right {
  display: table-cell;
  text-align: right;
}

/* Border under units row instead of header */
.wc-table tbody tr[data-sort-position="top"] {
  border-bottom: 1px solid #000;
}

/* Striped rows for better readability */
.wc-table--striped tbody tr:nth-child(even) {
  background: var(--wc-color-surface-alt);
}

.wc-table--striped thead th {
  background: color-mix(in srgb, var(--wc-color-surface-alt) 80%, var(--wc-color-surface) 20%);
}

/* Dense spacing variant */
.wc-table--dense th,
.wc-table--dense td {
  padding: var(--wc-space-xs) var(--wc-space-sm);
}

/* Compact width variant - table sizes to content */
.wc-table--compact {
  width: auto;
  min-width: 0;
}

.wc-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wc-color-accent);
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.wc-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Table column width utilities */
.wc-col-shrink {
  width: 1%;
  white-space: nowrap;
}

/* =============================================================================
   Summary pane components
   ========================================================================== */

.wc-summary-pane {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  padding: var(--wc-space-md);
  margin-bottom: var(--wc-space-lg);
  max-width: 650px;
  font-size: 1rem;
}

.wc-summary-pane__list {
  display: grid;
  gap: var(--wc-space-sm);
  margin: 0;
}

.wc-summary-pane__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2fr;
  gap: var(--wc-space-md);
  align-items: baseline;
  padding: var(--wc-space-xs) 0;
  border-bottom: 1px solid var(--wc-color-border);
}

.wc-summary-pane__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wc-summary-pane__term {
  font-weight: 600;
  color: var(--wc-color-text);
  font-size: 1rem;
}

.wc-summary-pane__definition {
  color: var(--wc-color-text);
  margin: 0;
  font-size: 1rem;
}

.wc-summary-pane__link {
  color: var(--wc-color-primary);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid var(--wc-color-primary);
  border-radius: var(--wc-radius-sm);
  padding: var(--wc-space-2xs) var(--wc-space-xs);
  background: var(--wc-color-surface);
  transition: all 0.15s ease;
  display: inline-block;
  margin-top: var(--wc-space-xs);
  font-size: 1rem;
}

.wc-summary-pane__link:hover,
.wc-summary-pane__link:focus {
  color: var(--wc-color-surface);
  background: var(--wc-color-primary);
  text-decoration: none;
  outline: 2px solid var(--wc-color-primary);
  outline-offset: 2px;
}

.wc-summary-pane__link:active {
  transform: translateY(1px);
}

.wc-summary-pane__note {
  font-style: italic;
  color: var(--wc-color-text-muted);
  margin-bottom: var(--wc-space-xs);
  font-size: 1rem;
}

.wc-summary-pane__actions {
  margin-top: var(--wc-space-sm);
  padding-top: var(--wc-space-sm);
  border-top: 1px solid var(--wc-color-border);
}

/* Legacy support for existing dl-horizontal */
.dl-horizontal {
  margin: 0;
}

.dl-horizontal dt {
  font-weight: 600;
  color: var(--wc-color-text);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: var(--wc-space-xs);
}

.dl-horizontal dd {
  color: var(--wc-color-text);
  margin: 0 0 var(--wc-space-sm) 0;
  font-size: 0.9rem;
}

.dl-horizontal dd:last-child {
  margin-bottom: 0;
}

/* =============================================================================
   Pattern Support Classes
   
   Minimal, token-driven styles for UI Style Guide patterns. Grayscale palette
   respects Zero-Aesthetic/Calm Utility philosophy while enabling copy-paste
   agent workflows.
   
   Documentation: docs/ui-docs/ui-style-guide.md
   ========================================================================== */

/* Advanced Options (Pattern #3) - Collapsible details sections */
.wc-advanced-options {
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  margin-bottom: var(--wc-space-md);
}

.wc-advanced-options__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wc-space-md);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

.wc-advanced-options__summary::-webkit-details-marker {
  display: none;
}

.wc-advanced-options__summary::after {
  content: "▸";
  font-size: var(--wc-font-size-sm);
  color: var(--wc-color-text-muted);
  transition: transform 0.2s ease;
}

.wc-advanced-options[open] .wc-advanced-options__summary::after {
  transform: rotate(90deg);
}

.wc-advanced-options__summary:hover {
  background: var(--wc-color-surface-alt);
}

.wc-advanced-options__content {
  padding: 0 var(--wc-space-md) var(--wc-space-md);
  border-top: 1px solid var(--wc-color-border);
}

/* Pagination (Pattern #5) - Multi-page navigation */
.wc-pagination {
  display: flex;
  align-items: center;
  gap: var(--wc-space-xs);
  flex-wrap: wrap;
  margin: var(--wc-space-md) 0;
}

.wc-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  border-radius: var(--wc-radius-sm);
  background: var(--wc-color-surface);
  color: var(--wc-color-text);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s ease;
}

.wc-pagination__link:hover,
.wc-pagination__link:focus {
  background: var(--wc-color-surface-alt);
  border-color: var(--wc-color-border-strong);
  text-decoration: none;
}

.wc-pagination__link--current {
  background: var(--wc-color-accent);
  color: var(--wc-color-surface);
  border-color: var(--wc-color-accent);
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.wc-pagination__link:disabled,
.wc-pagination__link[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Status Chips (Pattern #7) - Job state indicators */
.wc-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wc-space-xs);
  padding: var(--wc-space-xs) var(--wc-space-sm);
  border-radius: var(--wc-radius-pill);
  font-size: var(--wc-font-size-sm);
  font-weight: 600;
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface);
  color: var(--wc-color-text);
}

.wc-status-chip[data-state="success"],
.wc-status-chip[data-state="completed"] {
  background: color-mix(in srgb, var(--wc-color-surface) 94%, var(--wc-color-positive));
  border-color: var(--wc-color-positive);
  color: var(--wc-color-positive);
}

.wc-status-chip[data-state="error"],
.wc-status-chip[data-state="failed"],
.wc-status-chip[data-state="critical"] {
  background: color-mix(in srgb, var(--wc-color-surface) 94%, var(--wc-color-critical));
  border-color: var(--wc-color-critical);
  color: var(--wc-color-critical);
}

.wc-status-chip[data-state="warning"],
.wc-status-chip[data-state="queued"],
.wc-status-chip[data-state="attention"] {
  background: color-mix(in srgb, var(--wc-color-surface) 94%, var(--wc-color-attention));
  border-color: var(--wc-color-attention);
  color: var(--wc-color-attention);
}

.wc-status-chip[data-state="info"],
.wc-status-chip[data-state="running"] {
  background: color-mix(in srgb, var(--wc-color-surface) 94%, var(--wc-color-accent));
  border-color: var(--wc-color-accent);
  color: var(--wc-color-accent);
}

.wc-status-chip__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

/* Upload Progress (Pattern #9) - File upload indicators */
.wc-upload-progress {
  display: grid;
  gap: var(--wc-space-sm);
  margin-top: var(--wc-space-md);
  max-width: 32rem;
}

.wc-pre {
  margin: 0;
  padding: var(--wc-space-sm);
  border: 1px solid var(--wc-color-border);
  background: var(--wc-color-surface-alt);
  font-family: var(--wc-font-mono);
  font-size: var(--wc-font-size-sm);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 320px;
}

.wc-upload-progress__bar {
  display: block;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-color-surface-alt);
  overflow: hidden;
  border: 1px solid var(--wc-color-border);
}

.wc-upload-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--wc-color-accent);
  transition: width 0.2s ease;
}

.wc-upload-progress__status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--wc-color-text-muted);
}
#baer-opacity-controls {
  display: flex;
  flex-direction: column;
  gap: var(--wc-space-xs);
  padding-top: var(--wc-space-lg);
}

#baer-opacity-controls p {
  margin: 0;
  font-weight: var(--wc-font-weight-semibold);
  font-size: var(--wc-font-size-base);
}