/* WorkBuddy visual adapter, upstream c215ba8.
 * Load AFTER the restored external frontend CSS. No DOM/content/URL changes.
 * Sources: web/app/globals.css; components/ui/{button,input,table}.tsx.
 * wb-* tokens isolate this adapter from existing plugins. Status/provider
 * palettes are deliberately not remapped. No fonts or other remote assets.
 */
:root {
  color-scheme: light;
  --wb-background: oklch(1 0 0);
  --wb-foreground: oklch(.141 .005 285.823);
  --wb-card: oklch(1 0 0);
  --wb-primary: oklch(.21 .006 285.885);
  --wb-on-primary: oklch(.985 0 0);
  --wb-muted: oklch(.967 .001 286.375);
  --wb-muted-foreground: oklch(.552 .016 285.938);
  --wb-border: oklch(.92 .004 286.32);
  --wb-input: oklch(.92 .004 286.32);
  --wb-ring: oklch(.705 .015 286.067);
  --wb-sidebar: rgb(249 250 251);
  --wb-sidebar-active: rgb(243 244 246);
  --wb-sidebar-border: transparent;
  --wb-radius: .625rem;
  --wb-input-fill: color-mix(in srgb, var(--wb-muted) 55%, transparent);
  --wb-font: Inter, "Noto Sans SC", "Segoe UI", "Microsoft YaHei UI", system-ui, sans-serif;
  /* Existing standalone homepage tokens -> official roles. */
  --canvas: var(--wb-background); --surface: var(--wb-card);
  --ink: var(--wb-foreground); --muted: var(--wb-muted-foreground);
  --border: var(--wb-border); --accent: var(--wb-primary);
  --accent-light: var(--wb-muted); --focus: var(--wb-primary);
}
:root.dark {
  color-scheme: dark;
  --wb-background: oklch(.141 .005 285.823);
  --wb-foreground: oklch(.985 0 0);
  --wb-card: oklch(.21 .006 285.885);
  --wb-primary: oklch(.92 .004 286.32);
  --wb-on-primary: oklch(.21 .006 285.885);
  --wb-muted: oklch(.274 .006 286.033);
  --wb-muted-foreground: oklch(.705 .015 286.067);
  --wb-border: oklch(1 0 0 / 10%);
  --wb-input: oklch(1 0 0 / 15%);
  --wb-ring: oklch(.552 .016 285.938);
  --wb-sidebar: rgb(31 41 55);
  --wb-sidebar-active: rgb(55 65 81);
  --wb-input-fill: rgb(255 255 255 / 4%);
}
:root:root body { background: var(--wb-background); color: var(--wb-foreground); font-family: var(--wb-font); }
:root :is(.text-gray-900,.text-gray-950,.text-gray-800,.text-gray-700,.text-dark-200,.text-dark-100) { color: var(--wb-foreground); }
:root :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-dark-300,.text-dark-400,.input-hint,.sidebar-section-title) { color: var(--wb-muted-foreground); }
:root :is(.bg-white,.bg-gray-50,.bg-gray-100) { background-color: var(--wb-card); }
:root :is(.bg-gray-50,.bg-gray-100) { background-color: var(--wb-muted); }
:root :is(.border-gray-100,.border-gray-200,.border-gray-300) { border-color: var(--wb-border); }
:root.dark :is([class~="dark:text-gray-400"],[class~="dark:text-gray-500"],[class~="dark:text-dark-200"],[class~="dark:text-dark-300"],[class~="dark:text-dark-400"],[class~="dark:text-dark-500"]) { color: var(--wb-muted-foreground); }
:root.dark :is([class~="dark:bg-dark-900"],[class~="dark:bg-dark-950"]) { background-color: var(--wb-background); }
:root.dark :is([class~="dark:bg-dark-800"],[class~="dark:bg-dark-800/50"],[class~="dark:bg-dark-800/70"]) { background-color: var(--wb-card); }
:root.dark :is([class~="dark:border-dark-700"],[class~="dark:border-dark-800"]) { border-color: var(--wb-border); }
/* Only the existing brand-primary utilities; green/yellow/red are untouched. */
:root :is(.text-primary-500,.text-primary-600,.text-primary-700,.text-primary-800,.text-primary-900) { color: var(--wb-primary); }
:root.dark :is([class~="dark:text-primary-100"],[class~="dark:text-primary-200"],[class~="dark:text-primary-300"],[class~="dark:text-primary-400"]) { color: var(--wb-primary); }
:root :is(.bg-primary-50,.bg-primary-100,[class~="bg-primary-50/70"]) { background-color: var(--wb-muted); }
:root.dark :is([class~="dark:bg-primary-500/10"],[class~="dark:bg-primary-500/20"]) { background-color: var(--wb-muted); }
:root :is(.border-primary-100,.border-primary-200) { border-color: var(--wb-border); }
:root :is(.bg-primary-500,.bg-primary-600,.from-primary-500,.from-primary-600) { background-image: none; background-color: var(--wb-primary); color: var(--wb-on-primary); box-shadow: none; }
:root :is(.bg-primary-500,.bg-primary-600,.from-primary-500,.from-primary-600):hover { background-color: color-mix(in srgb, var(--wb-primary) 90%, var(--wb-background)); }
:root:root .text-gradient { background: none; color: var(--wb-foreground); -webkit-text-fill-color: currentColor; }
/* AuthLayout's scoped gradient loads lazily; keep its decorative layers neutral. */
:root [data-v-86388737].bg-gradient-to-br { background: var(--wb-background); }
:root [data-v-86388737].pointer-events-none > [data-v-86388737] { background: transparent; }
:root [data-v-86388737].shadow-lg { box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
/* Existing component classes retain their dimensions, spacing and behavior. */
:root :is(.card,.card-glass,.stat-card,.modal-content) { background: var(--wb-card); color: var(--wb-foreground); border-color: var(--wb-border); border-radius: var(--wb-radius); box-shadow: 0 1px 2px rgb(0 0 0 / 5%); backdrop-filter: none; }
:root main section.shadow-card { border-radius: var(--wb-radius); }
:root :is(.card-header,.modal-header,.modal-footer) { border-color: var(--wb-border); background-color: var(--wb-card); }
:root .glass, :root .site-header::before { background: var(--wb-background); border-color: var(--wb-border); box-shadow: none; backdrop-filter: none; }
:root :is(.btn,.button,.header-cta) { border-radius: calc(var(--wb-radius) - 4px); box-shadow: none; }
:root :is(.btn-primary,.button-primary) { background: var(--wb-primary); color: var(--wb-on-primary); border-color: var(--wb-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
:root :is(.btn-primary,.button-primary):hover { background: color-mix(in srgb, var(--wb-primary) 90%, var(--wb-background)); box-shadow: none; }
:root :is(.btn-secondary,.button-secondary,.header-cta) { background: var(--wb-card); color: var(--wb-foreground); border-color: var(--wb-border); }
:root :is(.btn-secondary,.button-secondary,.btn-ghost,.header-cta):hover { background: var(--wb-muted); color: var(--wb-foreground); }
:root .btn-ghost { color: var(--wb-muted-foreground); }
:root :is(.input,select.input,textarea.input) { border-radius: .75rem; background: var(--wb-input-fill); color: var(--wb-foreground); border-color: transparent; box-shadow: none; }
:root .input::placeholder { color: var(--wb-muted-foreground); }
:root .input:hover { background: color-mix(in srgb, var(--wb-muted) 70%, var(--wb-background)); }
:root .input:focus { border-color: var(--wb-ring); background: var(--wb-muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-ring) 25%, transparent); }
:root .input:disabled { background: var(--wb-muted); }
/* Do not replace error borders/rings with a neutral focus treatment. */
:root :is(.input-error,[aria-invalid="true"]) { border-color: #ef4444; }
:root :is(.input-error,[aria-invalid="true"]):focus { border-color: #ef4444; box-shadow: 0 0 0 2px rgb(239 68 68 / 30%); }
:root .input-label { color: var(--wb-foreground); }
:root .sidebar { background: var(--wb-sidebar); color: var(--wb-foreground); border-color: var(--wb-sidebar-border); box-shadow: none; }
:root .sidebar-header { border-color: var(--wb-sidebar-border); }
:root .sidebar-link { color: var(--wb-muted-foreground); border-radius: calc(var(--wb-radius) - 4px); }
:root .sidebar-link:hover { background: var(--wb-sidebar-active); color: var(--wb-foreground); }
:root .sidebar-link-active, :root .sidebar-link-active:hover { background: var(--wb-sidebar-active); color: var(--wb-foreground); }
:root :is(.table-container,.table-wrapper) { border-color: var(--wb-border); border-radius: var(--wb-radius); }
:root .table th { color: var(--wb-muted-foreground); background: var(--wb-muted); border-color: var(--wb-border); }
:root .table td { color: var(--wb-foreground); border-color: var(--wb-border); }
:root .table tbody tr:hover { background: var(--wb-muted); }
/* Model/provider chips and price-group accents retain their own semantics. */
:root .plaza-pricing-table { color: var(--wb-foreground); }
:root .badge-gray { background: var(--wb-muted); color: var(--wb-muted-foreground); }
/* These two links already use inline-injected !important in the live frontend.
 * Match only their visual declarations; preserve labels, URLs and visibility. */
:root header a:is([data-xcm-price-entry="1"],[data-xcm-docs-entry="1"]) { background: var(--wb-muted) !important; color: var(--wb-foreground) !important; border-color: var(--wb-border) !important; }
:root header a:is([data-xcm-price-entry="1"],[data-xcm-docs-entry="1"]):hover { background: var(--wb-sidebar-active) !important; }
/* Standalone public homepage: reuse its tokens and actual class names. */
:root .page-shell :is(.nav-link,.hero-description,.feature-notes,.eyebrow,.model-logo,.ecosystem-label,.site-footer,.footer-note) { color: var(--wb-muted-foreground); }
:root .page-shell :is(.nav-link:hover,.nav-link.active,.headline-accent,.model-logo:hover) { color: var(--wb-foreground); }
:root :is(.gradient-model,.intro-enterprise,.intro-api,.headline-period) { background: none; color: var(--wb-foreground); -webkit-text-fill-color: currentColor; }
:root .page-shell .hero h1 { color: var(--wb-foreground); }
:root .intro-tagline { color: var(--wb-muted-foreground); }
:root .brand-intro::before { background: none; }
:root .code-line code, :root .code-window .c-purple { color: var(--wb-foreground); }
:root.dark .code-window .c-green { color: #6ee7b7; }
:root.dark .code-window .c-yellow { color: #fcd34d; }
:root .brand-icon { background: var(--wb-primary); color: var(--wb-on-primary); border-radius: var(--wb-radius); }
:root .code-window { background: var(--wb-card); color: var(--wb-foreground); border-color: var(--wb-border); border-radius: var(--wb-radius); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); backdrop-filter: none; }
:root :is(.code-header,.code-footer) { background: var(--wb-muted); border-color: var(--wb-border); color: var(--wb-muted-foreground); }
:root .code-body { background: var(--wb-card); color: var(--wb-foreground); }
:root .code-window :is(.file-name,.copy-button,.code-animation-toggle,.c-comment) { color: var(--wb-muted-foreground); }
:root .copy-button:hover { background: var(--wb-muted); }
:root dialog { background: var(--wb-card); color: var(--wb-foreground); border-color: var(--wb-border); border-radius: var(--wb-radius); }
:root .dialog-shell :is(p,li,.dialog-close) { color: var(--wb-muted-foreground); }
:root :is(.dialog-model,.dialog-code,.dialog-shell .dialog-tip) { background: var(--wb-muted); color: var(--wb-foreground); border-color: var(--wb-border); }
:root .service-notice { color: var(--wb-muted-foreground); }
/* Visible focus on either theme, without changing dimensions or hit targets. */
:root :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  :root :is(.btn,.button,.card,.stat-card,.sidebar,.sidebar-link,.input,.transition,.transition-all,.transition-colors) { transition-duration: .01ms; }
  :root :is(.code-line,.earth-network-flow,.earth-network-trail,.earth-network-halo,.cursor) { animation: none !important; }
  :root .code-line { opacity: 1; }
}
@media (forced-colors: active) {
  :root :is(.btn,.button,.input,.card,.modal-content,.table-container) { border: 1px solid CanvasText; }
  :root :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline-color: Highlight; }
}

/* Preserve provider colors while keeping price-unit labels readable at night. */
:root.dark .plaza-pricing-table .pz-unit { color: var(--pz-title, var(--wb-muted-foreground)); }

/* Desktop only: stop per-frame geometry changes. Keep existing timing,
 * color feedback and transforms; mobile drawer CSS is untouched. */
@media (min-width: 1024px) {
  :root .sidebar { transition-property: transform; }
  :root .sidebar .sidebar-header { transition-property: color, background-color, border-color; }
  :root .sidebar :is(.sidebar-brand, .sidebar-label) { transition-property: opacity, transform; }
  :root .sidebar .sidebar-link { transition-property: color, background-color, border-color, box-shadow, opacity, transform; }
  :root .relative.min-h-screen.transition-all:is(.lg\:ml-64, .lg\:ml-\[72px\]) {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  }
}