/* AUTO-GENERATED — synced from gdo-design@2.0.0 (sha 2d0ac6c207f21322). DO NOT EDIT. */
/* AUTO-GENERATED by build-tokens.mjs from src/scss/gdo-base.scss + gdo-components.scss + gdo-tui.scss — do not edit dist/ */
/* gdo-design base layer — global element theming shared by every gdo surface. */
/* */
/* Scrollbars, text selection, and a couple of base resets, all keyed to the */
/* brand tokens so gdo-client, gdo-api and gdo-extension share the same chrome. */
/* Emitted at the TOP of dist/components.css by build-tokens.mjs, so any surface */
/* that loads the component bundle automatically gets this base. */

/* --- Scrollbars ------------------------------------------------------------- */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gdo-color-purple-600) transparent;
}

/* WebKit / Chromium / Electron / WebView2 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gdo-color-mauve-500), var(--gdo-color-purple-600));
  border-radius: var(--gdo-radius-pill, 9999px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gdo-color-purple-600);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* --- Text selection --------------------------------------------------------- */
::selection {
  background: var(--gdo-color-mauve-500);
  color: #ffffff;
}

/* --- Focus visibility (brand ring, never an invisible default outline) ------ */
:focus-visible {
  outline: none;
  box-shadow: var(--gdo-focus-ring, 0 0 0 2px rgba(157, 90, 109, 0.5));
}

/* --- App page scaffold ------------------------------------------------------- */
/* Canonical root for padded, scrollable domain apps (lists/dashboards). Apps */
/* add it next to their namespace class: <div class="gdo-mcp gdo-app-page">. */
/* Full-bleed IDE-style apps (code, canvas) manage their own root instead. */
.gdo-app-page {
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-3);
  padding: var(--gdo-space-3);
  height: 100%;
  overflow-y: auto;
  background: var(--gdo-bg-page);
  color: var(--gdo-text-primary);
  font-family: var(--gdo-type-family-sans);
}

/* --- App toolbar --------------------------------------------------------------- */
/* Canonical title + actions row at the top of a domain app. */
.gdo-app-toolbar {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-2);
  flex-wrap: wrap;
}
.gdo-app-toolbar__title {
  font-size: var(--gdo-type-size-lg);
  font-weight: var(--gdo-type-weight-semibold);
  margin-right: var(--gdo-space-2);
}
.gdo-app-toolbar__spacer { flex: 1; }


/* gdo-design component styles — SCSS companion for Odoo web.assets_backend */
/* AUTO-GENERATED by scripts/build-components-css.mjs from component and analytic-instrument CSS blocks. */
/* DO NOT EDIT BY HAND — edit the component's CSS const and re-run the generator. */
/* */
/* Usage in Odoo __manifest__.py: */
/*   'assets': { */
/*     'web.assets_backend': [ */
/*       'gdo_foundation/static/lib/gdo-design/gdo-components.scss', */
/*       'gdo_foundation/static/lib/gdo-design/gdo-design.iife.js', */
/*     ], */
/*   } */
/* */
/* When using the SCSS/CSS bundle, call GdoDesign.setCSSFromBundle(true) before */
/* mounting to disable runtime CSS injection (avoids duplicate <style> tags). */

/* === GdoActionPanel === */
.gdo-action-panel {
  flex: none;
  padding: var(--gdo-space-2);
  border: thin solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  background: var(--gdo-bg-surface-raised);
}
.gdo-action-panel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  align-items: start;
  gap: var(--gdo-space-2);
}
.gdo-action-panel__fields > * { min-width: 0; }
.gdo-action-panel__actions { display: flex; align-items: center; gap: var(--gdo-space-1); padding-top: calc(var(--gdo-type-size-xs) * var(--gdo-type-line-height) + var(--gdo-space-0)); }
.gdo-action-panel__support { margin-top: var(--gdo-space-1); color: var(--gdo-text-secondary); font-size: var(--gdo-type-size-xs); }

/* === GdoAlert === */
.gdo-alert {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-1) var(--gdo-space-3);
  border-radius: var(--gdo-radius-2);
  border: 1px solid;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  line-height: var(--gdo-type-line-height);
  position: relative;
  overflow: hidden;
  transition: opacity var(--gdo-motion-normal);
}
.gdo-alert--compact {
  padding: var(--gdo-space-0) var(--gdo-space-1);
  gap: var(--gdo-space-0);
}
.gdo-alert--dismissed {
  opacity: 0;
  pointer-events: none;
}
.gdo-alert--info {
  background: var(--gdo-status-info-bg);
  border-color: var(--gdo-status-info-border);
  color: var(--gdo-status-info);
}
.gdo-alert--success {
  background: var(--gdo-status-success-bg);
  border-color: var(--gdo-status-success-border);
  color: var(--gdo-status-success);
}
.gdo-alert--warning {
  background: var(--gdo-status-warning-bg);
  border-color: var(--gdo-status-warning-border);
  color: var(--gdo-status-warning);
}
.gdo-alert--danger {
  background: var(--gdo-status-danger-bg);
  border-color: var(--gdo-status-danger-border);
  color: var(--gdo-status-danger);
}
.gdo-alert__icon {
  font-style: normal;
  flex-shrink: 0;
  font-size: 1em;
  line-height: var(--gdo-type-line-height);
  display: none;
}
.gdo-alert:not(.gdo-alert--compact) .gdo-alert__icon {
  display: inline;
}
.gdo-alert__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gdo-alert__title {
  font-weight: var(--gdo-type-weight-medium);
  margin-bottom: 0.15rem;
}
.gdo-alert__actions {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  flex-shrink: 0;
  margin-left: auto;
}
.gdo-alert__action-btn {
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--gdo-radius-1);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  padding: 0.15em 0.6em;
  transition: background var(--gdo-motion-fast), opacity var(--gdo-motion-fast);
  opacity: 0.8;
  white-space: nowrap;
}
.gdo-alert__action-btn:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.gdo-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: 1rem;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity var(--gdo-motion-fast);
}
.gdo-alert__close:hover { opacity: 1; }
/* Auto-dismiss progress bar */
.gdo-alert__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left;
}

/* === GdoAppStatusBar === */
.gdo-app-statusbar-wrap {
  flex-shrink: 0;
  position: relative;
}

.gdo-app-statusbar {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0 var(--gdo-space-3);
  height: 1.875rem;
  border-bottom: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface-raised);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  flex-shrink: 0;
  cursor: default;
  transition: height var(--gdo-motion-fast);
}
.gdo-app-statusbar--collapsed {
  height: 4px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.gdo-app-statusbar--collapsed:hover {
  height: 1rem;
}

/* Left: status + label + sublabel */
.gdo-app-statusbar__context {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.gdo-app-statusbar__label {
  color: var(--gdo-text-secondary);
  font-weight: var(--gdo-type-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.gdo-app-statusbar__sep {
  color: var(--gdo-text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

.gdo-app-statusbar__sublabel {
  color: var(--gdo-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Middle: breadcrumb / extra context items */
.gdo-app-statusbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  min-width: 0;
  overflow: hidden;
  flex-shrink: 1;
  color: var(--gdo-text-muted);
}

.gdo-app-statusbar__spacer {
  flex: 1;
  min-width: 0;
}

/* Right: actions */
.gdo-app-statusbar__actions {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  flex-shrink: 0;
}

/* Error/warning badge */
.gdo-app-statusbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--gdo-radius-pill);
  font-size: var(--gdo-type-size-4xs);
  font-weight: var(--gdo-type-weight-semibold);
  line-height: 1;
  flex-shrink: 0;
}
.gdo-app-statusbar__badge--error {
  background: var(--gdo-status-danger);
  color: #ffffff;
}
.gdo-app-statusbar__badge--warning {
  background: var(--gdo-status-warning);
  color: #ffffff;
}
.gdo-app-statusbar__badge--info {
  background: var(--gdo-bg-action);
  color: #ffffff;
}

/* Progress bar (bottom edge of the bar) */
.gdo-app-statusbar__progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--gdo-bg-action);
  transition: width 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.gdo-app-statusbar__progress-bar--success { background: var(--gdo-status-success); }
.gdo-app-statusbar__progress-bar--danger  { background: var(--gdo-status-danger); }

/* Collapse toggle button */
.gdo-app-statusbar__collapse-btn {
  padding: 0 2px;
  background: none; border: none;
  color: var(--gdo-text-muted); cursor: pointer;
  font-size: var(--gdo-type-size-5xs); line-height: 1;
  flex-shrink: 0;
  opacity: 0.5;
}
.gdo-app-statusbar__collapse-btn:hover { opacity: 1; }

/* === GdoBadge === */
.gdo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.55em;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  border-radius: var(--gdo-radius-pill);
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
}
.gdo-badge--default { background: var(--gdo-bg-surface-raised);      color: var(--gdo-text-secondary); }
.gdo-badge--success { background: var(--gdo-status-success-bg);  color: var(--gdo-status-success); }
.gdo-badge--warning { background: var(--gdo-status-warning-bg);  color: var(--gdo-status-warning); }
.gdo-badge--danger  { background: var(--gdo-status-danger-bg);   color: var(--gdo-status-danger); }
.gdo-badge--info    { background: var(--gdo-status-info-bg);     color: var(--gdo-status-info); }
.gdo-badge--brand   { background: var(--gdo-bg-action-soft);    color: var(--gdo-bg-action-alt); }

/* Outline variants */
.gdo-badge--outline {
  background: transparent;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* Dot-only variant (no text, just a colored circle) */
.gdo-badge--dot {
  padding: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--gdo-radius-full);
  flex-shrink: 0;
}

/* Size variants */
.gdo-badge--sm {
  font-size: 0.65rem;
  padding: 0.05em 0.4em;
}
.gdo-badge--lg {
  font-size: var(--gdo-type-size-sm);
  padding: 0.2em 0.7em;
}

/* Clickable badge */
.gdo-badge--clickable {
  cursor: pointer;
  transition: opacity var(--gdo-motion-fast);
}
.gdo-badge--clickable:hover {
  opacity: 0.8;
}
.gdo-badge--clickable:active {
  transform: scale(0.95);
}

/* Icon inside badge */
.gdo-badge__icon {
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}

/* Pulse animation for live/active states */
.gdo-badge--pulse {
  animation: gdo-pulse-gentle 2s ease-in-out infinite;
}

/* === GdoBreadcrumb === */
.gdo-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-muted);
  line-height: var(--gdo-type-line-height-tight);
}
.gdo-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--gdo-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  transition: color var(--gdo-motion-fast);
  text-decoration: none;
}
.gdo-breadcrumb__link:hover {
  color: var(--gdo-text-primary);
}
.gdo-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--gdo-text-primary);
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-breadcrumb__sep {
  color: var(--gdo-text-muted);
  user-select: none;
}
.gdo-breadcrumb__icon {
  font-style: normal;
  flex-shrink: 0;
  line-height: 1;
}
/* Ellipsis collapse button */
.gdo-breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-xs);
  cursor: pointer;
  padding: 0 0.35em;
  line-height: 1.5;
  font-family: inherit;
  transition: color var(--gdo-motion-fast), background var(--gdo-motion-fast);
}
.gdo-breadcrumb__ellipsis:hover {
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-surface-raised);
}
/* Copy button */
.gdo-breadcrumb__copy {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--gdo-text-muted);
  cursor: pointer;
  padding: 0 0.2em;
  font-size: 0.9em;
  font-family: inherit;
  transition: color var(--gdo-motion-fast);
  margin-left: var(--gdo-space-0);
}
.gdo-breadcrumb__copy:hover {
  color: var(--gdo-text-primary);
}
.gdo-breadcrumb__copy--copied {
  color: var(--gdo-status-success);
}

/* === GdoBriefing === */
.gdo-briefing { font-family: var(--gdo-type-family-base-sans); font-size: var(--gdo-type-size-base); line-height: var(--gdo-type-line-height); color: var(--gdo-text-primary); background: var(--gdo-bg-page); padding: var(--gdo-space-4); }
.gdo-briefing * { box-sizing: border-box; }
.gdo-briefing h2 { font-family: var(--gdo-type-family-heading); font-size: var(--gdo-type-size-2xl); margin: 0; }
.gdo-briefing h3 { font-family: var(--gdo-type-family-heading); font-weight: var(--gdo-type-weight-medium); font-size: var(--gdo-type-size-sm); margin: 0; }
.gdo-briefing h4 { font-size: var(--gdo-type-size-base); margin: 0; }
.gdo-briefing p { margin: var(--gdo-space-1) 0; }
.gdo-briefing a { color: var(--gdo-link); }
.gdo-briefing__meta { color: var(--gdo-text-secondary); font-size: var(--gdo-type-size-sm); overflow-wrap: anywhere; }
.gdo-briefing__notice { border-inline-start: 3px solid var(--gdo-status-warning); padding: var(--gdo-space-2); background: var(--gdo-status-warning-bg); border-radius: var(--gdo-radius-2); margin: var(--gdo-space-3) 0; }
.gdo-briefing__controls { margin: var(--gdo-space-3) 0; padding: var(--gdo-space-2) var(--gdo-space-3); border: 1px solid var(--gdo-border); border-radius: var(--gdo-radius-2); background: var(--gdo-bg-surface); }
.gdo-briefing__controls:not([open]) ~ .gdo-briefing__grid .gdo-briefing__move { display: none; }
.gdo-briefing__trace { margin: var(--gdo-space-2) 0; }
.gdo-briefing__trace summary { cursor: pointer; color: var(--gdo-text-secondary); font-size: var(--gdo-type-size-sm); }
.gdo-briefing__trace summary:focus-visible { box-shadow: var(--gdo-focus-ring); }
.gdo-briefing__identity { font-family: var(--gdo-type-family-mono); font-size: var(--gdo-type-size-xs); overflow-wrap: anywhere; }
.gdo-briefing__controls summary { cursor: pointer; padding: var(--gdo-space-2) 0; }
.gdo-briefing__controls summary:focus-visible { box-shadow: var(--gdo-focus-ring); }
.gdo-briefing__settings { display: flex; flex-wrap: wrap; align-items: end; gap: var(--gdo-space-3); }
.gdo-briefing__settings > label { min-width: 12em; }
.gdo-briefing fieldset { border: 1px solid var(--gdo-border); padding: var(--gdo-space-2); margin: var(--gdo-space-2) 0; }
.gdo-briefing__choices { display: flex; flex-wrap: wrap; gap: var(--gdo-space-3); }
.gdo-briefing__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gdo-space-4); }
.gdo-briefing[data-layout="board"] .gdo-briefing__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr)); align-items: start; }
.gdo-briefing__section { min-width: 0; background: var(--gdo-bg-surface); border: 1px solid var(--gdo-border); border-radius: var(--gdo-radius-3); padding: var(--gdo-space-3); box-shadow: var(--gdo-shadow-1); }
.gdo-briefing__section[data-section="attention"], .gdo-briefing__section[data-section="dissent"] { border-top: 3px solid var(--gdo-status-warning); }
.gdo-briefing__section[data-section="decisions"] { border-top: 3px solid var(--gdo-status-info); }
.gdo-briefing__heading { display: flex; flex-wrap: wrap; gap: var(--gdo-space-2); align-items: center; justify-content: space-between; }
.gdo-briefing__item { border-top: 1px solid var(--gdo-border); margin-top: var(--gdo-space-3); padding-top: var(--gdo-space-3); overflow-wrap: anywhere; break-inside: avoid; }
.gdo-briefing__body { white-space: pre-wrap; }
.gdo-briefing__gradient { border-inline-start: 2px solid var(--gdo-border); padding-inline-start: var(--gdo-space-2); margin-top: var(--gdo-space-2); }
.gdo-briefing[data-density="compact"] .gdo-briefing__item { margin-top: var(--gdo-space-2); padding-top: var(--gdo-space-2); }
.gdo-briefing[data-density="compact"] .gdo-briefing__section { padding: var(--gdo-space-2); }
@media print { .gdo-briefing__controls, .gdo-briefing__move { display: none; } .gdo-briefing { padding: 0; } .gdo-briefing[data-layout="board"] .gdo-briefing__grid { display: block; } .gdo-briefing__section { margin-bottom: var(--gdo-space-3); } }

/* === GdoButton === */
.gdo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gdo-space-0);
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
  border-radius: var(--gdo-radius-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--gdo-motion-fast);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.gdo-btn:focus-visible {
  outline: none;
  box-shadow: var(--gdo-focus-ring);
}
.gdo-btn:disabled,
.gdo-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.gdo-btn--primary {
  background: var(--gdo-bg-action);
  color: #ffffff;
  border-color: var(--gdo-bg-action);
}
.gdo-btn--primary:hover {
  background: var(--gdo-bg-action-hover);
  border-color: var(--gdo-bg-action-hover);
  box-shadow: var(--gdo-shadow-brand-hover);
}
.gdo-btn--secondary {
  background: transparent;
  color: var(--gdo-link);
  border-color: var(--gdo-bg-action);
}
.gdo-btn--secondary:hover {
  background: var(--gdo-bg-surface);
}
.gdo-btn--danger {
  background: var(--gdo-status-danger);
  color: #ffffff;
  border-color: var(--gdo-status-danger);
}
.gdo-btn--danger:hover {
  opacity: 0.85;
  box-shadow: var(--gdo-shadow-2);
}
.gdo-btn--ghost {
  background: transparent;
  color: var(--gdo-text-primary);
  border-color: transparent;
}
.gdo-btn--ghost:hover {
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-primary);
}
.gdo-btn--sm {
  padding: 0.15rem var(--gdo-space-1);
  font-size: var(--gdo-type-size-sm);
}
.gdo-btn--lg {
  padding: var(--gdo-space-1) var(--gdo-space-4);
  font-size: var(--gdo-type-size-base);
}

/* Full-width variant */
.gdo-btn--full {
  width: 100%;
}

/* Loading state */
.gdo-btn--loading {
  color: transparent !important;
  cursor: wait;
  pointer-events: none;
}
.gdo-btn__spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: gdo-spin 0.6s linear infinite;
}
.gdo-btn--ghost.gdo-btn--loading .gdo-btn__spinner,
.gdo-btn--secondary.gdo-btn--loading .gdo-btn__spinner {
  border-color: rgba(89,61,108,0.25);
  border-top-color: var(--gdo-bg-action);
}

/* Icon slot */
.gdo-btn__icon {
  flex-shrink: 0;
  line-height: 1;
}

/* Button group: connected buttons with shared border */
.gdo-btn-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  overflow: hidden;
}
.gdo-btn-group .gdo-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--gdo-border);
}
.gdo-btn-group .gdo-btn:last-child {
  border-right: none;
}
/* Canonical active/selected state — filter pills and segmented toggles */
.gdo-btn--active,
.gdo-btn-group .gdo-btn.gdo-btn--active {
  background: var(--gdo-bg-action-soft);
  color: var(--gdo-link);
}
.gdo-btn-group .gdo-btn:first-child {
  border-radius: var(--gdo-radius-2) 0 0 var(--gdo-radius-2);
}
.gdo-btn-group .gdo-btn:last-child {
  border-radius: 0 var(--gdo-radius-2) var(--gdo-radius-2) 0;
}
.gdo-btn-group .gdo-btn:only-child {
  border-radius: var(--gdo-radius-2);
  border-right: none;
}

/* Active/pressed visual */
.gdo-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* Confirm variant — two-stage confirm button */
.gdo-btn--confirming {
  background: var(--gdo-status-danger) !important;
  border-color: var(--gdo-status-danger) !important;
  color: #ffffff !important;
  animation: gdo-pulse-fast 0.6s ease-in-out 2;
}

/* === GdoCard === */
.gdo-card {
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3);
  padding: var(--gdo-space-3);
  box-shadow: var(--gdo-shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-1);
}
.gdo-card--raised {
  box-shadow: var(--gdo-shadow-2);
}
.gdo-card--brand {
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-shadow-brand);
}
.gdo-card--flat {
  box-shadow: none;
}
.gdo-card--compact {
  padding: var(--gdo-space-1);
  gap: var(--gdo-space-0);
}
.gdo-card--lg {
  padding: var(--gdo-space-4);
  gap: var(--gdo-space-3);
}

/* Clickable card */
.gdo-card--clickable {
  cursor: pointer;
  transition: box-shadow var(--gdo-motion-fast), transform var(--gdo-motion-fast), border-color var(--gdo-motion-fast);
  text-decoration: none;
  color: inherit;
}
.gdo-card--clickable:hover {
  box-shadow: var(--gdo-shadow-2);
  border-color: var(--gdo-bg-action);
  transform: translateY(-1px);
}
.gdo-card--clickable:active {
  transform: translateY(0);
  box-shadow: var(--gdo-shadow-1);
}
.gdo-card--selected {
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}

/* Card anatomy */
.gdo-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gdo-space-1);
  padding-bottom: var(--gdo-space-1);
  border-bottom: 1px solid var(--gdo-border);
  min-height: 0;
}
.gdo-card__title {
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  font-family: var(--gdo-type-family-heading);
  line-height: var(--gdo-type-line-height-tight);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gdo-card__actions {
  display: flex;
  gap: var(--gdo-space-0);
  flex-shrink: 0;
}
.gdo-card__body {
  flex: 1;
  min-height: 0;
}
.gdo-card__footer {
  padding-top: var(--gdo-space-1);
  border-top: 1px solid var(--gdo-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gdo-space-1);
}

/* Loading diagonal-wave overlay (default card loading language). */
.gdo-card--loading {
  position: relative;
  isolation: isolate;
  pointer-events: none;
}
.gdo-card--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent 35%,
    color-mix(in srgb, var(--gdo-bg-surface-raised) 85%, var(--gdo-text-primary) 15%) 48%,
    color-mix(in srgb, var(--gdo-bg-surface-raised) 75%, white 25%) 52%,
    transparent 65%
  );
  background-size: 280% 280%;
  background-position: -140% -140%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gdo-card-loading-wave 1.45s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.95;
}
@keyframes gdo-card-loading-wave {
  0% {
    background-position: -140% -140%;
    opacity: 0;
  }
  20% {
    opacity: 0.95;
  }
  100% {
    background-position: 140% 140%;
    opacity: 0;
  }
}

/* === GdoChartFrame === */
.gdo-chart { margin:0; display:grid; gap:var(--gdo-space-0); min-width:0; font-family:var(--gdo-type-family-sans); color:var(--gdo-text-primary); }
.gdo-chart__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--gdo-space-1); }
.gdo-chart__title { margin:0; font-size:var(--gdo-type-size-sm); font-weight:var(--gdo-type-weight-semibold); }
.gdo-chart__toggle { font:inherit; font-size:var(--gdo-type-size-xs); color:var(--gdo-link); background:transparent; border:0; padding:var(--gdo-space-0); min-height:24px; cursor:pointer; text-decoration:underline; }
.gdo-chart__toggle:focus-visible { outline:2px solid var(--gdo-link); outline-offset:2px; }
.gdo-chart__body { min-width:0; }
.gdo-chart__body svg { display:block; width:100%; height:auto; overflow:visible; }
.gdo-chart__caption { font-size:var(--gdo-type-size-xs); color:var(--gdo-text-secondary); }
.gdo-chart__table { width:100%; border-collapse:collapse; font-size:var(--gdo-type-size-xs); }
.gdo-chart__table th, .gdo-chart__table td { padding:0 var(--gdo-space-0); text-align:end; border-bottom:thin solid var(--gdo-border); font-weight:normal; }
.gdo-chart__table th:first-child, .gdo-chart__table td:first-child { text-align:start; }
.gdo-chart__table thead th { color:var(--gdo-text-secondary); }
.gdo-chart__scroll { max-height:12rem; }

/* === GdoCheckbox === */
.gdo-checkbox {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  user-select: none;
}
.gdo-checkbox__row {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
  cursor: pointer;
}
.gdo-checkbox:has(.gdo-checkbox__input:disabled) .gdo-checkbox__row {
  opacity: 0.6;
  cursor: not-allowed;
}
.gdo-checkbox__group-label {
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.1rem;
}
.gdo-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  background: var(--gdo-bg-page);
  cursor: pointer;
  transition: all var(--gdo-motion-fast);
  flex-shrink: 0;
  position: relative;
}
/* Size variants */
.gdo-checkbox--sm .gdo-checkbox__input {
  width: 0.75rem;
  height: 0.75rem;
}
.gdo-checkbox--lg .gdo-checkbox__input {
  width: 1.25rem;
  height: 1.25rem;
}
.gdo-checkbox__input:checked {
  background: var(--gdo-bg-action);
  border-color: var(--gdo-bg-action);
}
.gdo-checkbox__input:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
/* Indeterminate state */
.gdo-checkbox__input--indeterminate {
  background: var(--gdo-bg-action);
  border-color: var(--gdo-bg-action);
}
.gdo-checkbox__input--indeterminate::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='white' x='3' y='7.25' width='10' height='1.5' rx='0.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
/* Error state */
.gdo-checkbox--error .gdo-checkbox__input {
  border-color: var(--gdo-status-danger);
}
.gdo-checkbox__error {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-status-danger);
  margin-top: 0.1rem;
}
/* Active/keydown feedback */
.gdo-checkbox__input--pressing {
  transform: scale(0.9);
}
.gdo-checkbox__input:focus-visible {
  outline: none;
  box-shadow: var(--gdo-focus-ring);
}
.gdo-checkbox__input:disabled {
  cursor: not-allowed;
  background: var(--gdo-bg-surface);
}

/* === GdoCodeBlock === */
.gdo-code-block {
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  overflow: hidden;
}
.gdo-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gdo-space-0) var(--gdo-space-3);
  background: var(--gdo-bg-surface-raised);
  border-bottom: 1px solid var(--gdo-border);
  gap: var(--gdo-space-1);
}
.gdo-code-block__lang {
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-transform: lowercase;
}
.gdo-code-block__filename {
  font-family: var(--gdo-type-family-code);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
  flex: 1;
}
.gdo-code-block__header-right {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  flex-shrink: 0;
}
.gdo-code-block__lang-badge {
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-link-hover);
  background: color-mix(in srgb, var(--gdo-bg-action-alt) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gdo-bg-action-alt) 25%, transparent);
  border-radius: var(--gdo-radius-pill);
  padding: 0 0.45rem;
  line-height: 1.6;
  text-transform: lowercase;
}
.gdo-code-block__copy,
.gdo-code-block__wrap-btn,
.gdo-code-block__download {
  background: none;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  transition: color var(--gdo-motion-fast), border-color var(--gdo-motion-fast);
}
.gdo-code-block__copy:hover,
.gdo-code-block__wrap-btn:hover,
.gdo-code-block__download:hover {
  color: var(--gdo-text-primary);
  border-color: var(--gdo-bg-action);
}
.gdo-code-block__copy--copied {
  color: var(--gdo-status-success);
  border-color: var(--gdo-status-success);
}
.gdo-code-block__wrap-btn--active {
  color: var(--gdo-link-hover);
  border-color: var(--gdo-bg-action-alt);
}
.gdo-code-block__body {
  display: flex;
  overflow-x: auto;
  background: var(--gdo-code-bg);
}
.gdo-code-block__nums {
  padding: var(--gdo-space-3) var(--gdo-space-1) var(--gdo-space-3) var(--gdo-space-3);
  font-family: var(--gdo-type-family-code);
  font-size: var(--gdo-type-size-sm);
  line-height: 1.6;
  color: var(--gdo-text-muted);
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--gdo-border);
  flex-shrink: 0;
  opacity: 0.5;
}
.gdo-code-block__nums span {
  display: block;
}
.gdo-code-block__content {
  flex: 1;
  padding: var(--gdo-space-3);
  font-family: var(--gdo-type-family-code);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-code-text);
  background: var(--gdo-code-bg);
  line-height: 1.6;
  white-space: pre;
  margin: 0;
  overflow: visible;
  min-width: 0;
}
.gdo-code-block__content--wrapped {
  white-space: pre-wrap;
  word-break: break-all;
}
.gdo-code-block__line {
  display: block;
}
.gdo-code-block__line--highlighted {
  background: color-mix(in srgb, var(--gdo-bg-action-alt) 14%, transparent);
  margin-left: calc(-1 * var(--gdo-space-3));
  padding-left: var(--gdo-space-3);
  margin-right: calc(-1 * var(--gdo-space-3));
  padding-right: var(--gdo-space-3);
}
.gdo-code-block__expand {
  display: flex;
  justify-content: center;
  padding: var(--gdo-space-0) var(--gdo-space-3);
  border-top: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface-raised);
}
.gdo-code-block__expand-btn {
  background: none;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  cursor: pointer;
  padding: 0.2rem 0.75rem;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
  transition: color var(--gdo-motion-fast), border-color var(--gdo-motion-fast);
}
.gdo-code-block__expand-btn:hover {
  color: var(--gdo-text-primary);
  border-color: var(--gdo-bg-action);
}

/* === GdoCompass === */
.gdo-compass { display: inline-flex; flex-direction: column; align-items: center; gap: var(--gdo-space-05); font-family: var(--gdo-type-family-sans); color: var(--gdo-text-primary); min-width: 0; }
.gdo-compass__label { font-weight: var(--gdo-type-weight-semibold); font-size: var(--gdo-type-size-sm); letter-spacing: var(--gdo-type-letter-spacing); text-align: center; }
.gdo-compass__svg { width: 8rem; height: auto; overflow: visible; }
.gdo-compass--sm .gdo-compass__svg { width: 6.5rem; }
.gdo-compass__ring { fill: none; stroke: var(--gdo-border); stroke-width: 2; }
.gdo-compass__arrow { stroke: var(--gdo-bg-action); stroke-width: 4; stroke-linecap: round; }
.gdo-compass__head { fill: var(--gdo-bg-action); }
.gdo-compass__hub { fill: var(--gdo-bg-action-alt); stroke: var(--gdo-bg-page); stroke-width: 2; stroke-linejoin: round; }
.gdo-compass__pole { fill: var(--gdo-text-secondary); font-size: var(--gdo-type-size-xs); font-family: var(--gdo-type-family-sans); }
.gdo-compass__question { fill: var(--gdo-text-muted); font-size: var(--gdo-type-size-lg); font-family: var(--gdo-type-family-mono); }
.gdo-compass__shape { fill: none; stroke: none; }
.gdo-compass__shape--accent { stroke: var(--gdo-bg-action); }
.gdo-compass__shape--success { stroke: var(--gdo-status-success-text); }
.gdo-compass__shape--warning { stroke: var(--gdo-status-warning-text); }
.gdo-compass__shape--danger { stroke: var(--gdo-status-danger-text); }
.gdo-compass__shape--muted { stroke: var(--gdo-text-secondary); }
circle.gdo-compass__shape--muted { fill: var(--gdo-text-secondary); stroke: none; }
.gdo-compass--unknown .gdo-compass__ring, .gdo-compass--unknown .gdo-compass__arrow { stroke: var(--gdo-text-muted); stroke-dasharray: 4 5; }
.gdo-compass--unknown .gdo-compass__arrow { stroke-width: 2; }
.gdo-compass--unknown .gdo-compass__head { fill: var(--gdo-text-muted); }
.gdo-compass__value { font-family: var(--gdo-type-family-mono); font-size: var(--gdo-type-size-sm); }
.gdo-compass--unknown .gdo-compass__value { color: var(--gdo-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--gdo-type-size-xs); }
.gdo-compass__caption { font-size: var(--gdo-type-size-xs); color: var(--gdo-text-muted); text-align: center; max-width: 12rem; }
.gdo-compass-layers { display: inline-flex; flex-wrap: wrap; gap: var(--gdo-space-0); align-items: center; font-family: var(--gdo-type-family-sans); font-size: var(--gdo-type-size-xs); color: var(--gdo-text-secondary); }
.gdo-compass-layers button { font: inherit; min-height: 1.75rem; padding: 0 var(--gdo-space-1); border-radius: var(--gdo-radius-pill); border: thin solid var(--gdo-border); background: transparent; color: var(--gdo-text-primary); cursor: pointer; }
.gdo-compass-layers button[aria-pressed="true"] { background: var(--gdo-bg-action-soft); border-color: var(--gdo-bg-action); color: var(--gdo-link); }
.gdo-compass-layers button:focus-visible { outline: none; box-shadow: var(--gdo-focus-ring); }

/* === GdoConfirmAction === */
.gdo-confirm-action { display: inline-flex; align-items: center; gap: var(--gdo-space-0); }
.gdo-confirm-action__prompt {
  font-size: var(--gdo-type-size-xs);
  font-family: var(--gdo-type-family-sans);
  color: var(--gdo-text-secondary);
  white-space: nowrap;
}
.gdo-confirm-action__yes { color: var(--gdo-status-danger); }

/* === GdoContextHelp === */
.gdo-context-help { display: inline-flex; }
.gdo-context-help__trigger { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: help; text-align: inherit; }
.gdo-context-help__trigger:focus-visible { outline: none; box-shadow: var(--gdo-focus-ring); }
.gdo-context-help__content { position: fixed; visibility: hidden; width: min(28rem, calc(100vw - 2rem)); box-sizing: border-box; padding: var(--gdo-space-2); border: thin solid var(--gdo-border); border-radius: var(--gdo-radius-2); background: var(--gdo-bg-surface); color: var(--gdo-text-primary); box-shadow: var(--gdo-shadow-2); z-index: var(--gdo-z-tooltip); font-family: var(--gdo-type-family-sans); font-size: var(--gdo-type-size-sm); font-weight: var(--gdo-type-weight-normal); line-height: var(--gdo-type-line-height); white-space: normal; overflow-wrap: anywhere; overflow-y: auto; }

/* === GdoDecisionStudy === */
.gdo-decision-study { color: var(--gdo-text-primary); background: var(--gdo-bg-page); font-family: var(--gdo-type-family-sans); padding: var(--gdo-space-4); border: 1px solid var(--gdo-border); }
.gdo-decision-study * { box-sizing: border-box; }
.gdo-decision-study h3 { font-family: var(--gdo-type-family-serif); font-size: var(--gdo-type-size-2xl); margin: 0; }
.gdo-decision-study h4 { font-size: var(--gdo-type-size-base); margin: 0 0 var(--gdo-space-2); }
.gdo-decision-study p { margin: var(--gdo-space-1) 0; }
.gdo-decision-study__meta { font-size: var(--gdo-type-size-xs); color: var(--gdo-text-secondary); overflow-wrap: anywhere; }
.gdo-decision-study__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--gdo-space-3); margin: var(--gdo-space-4) 0; }
.gdo-decision-study__controls label { flex: 1; min-width: 12em; }
.gdo-decision-study__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: var(--gdo-space-5); }
.gdo-decision-study__grid > * { min-width: 0; }
.gdo-decision-study__input { padding: var(--gdo-space-2) 0; border-top: 1px solid var(--gdo-border); break-inside: avoid; }
.gdo-decision-study__input label { display: block; margin-bottom: var(--gdo-space-1); }
.gdo-decision-study__table { width: 100%; border-collapse: collapse; font-size: var(--gdo-type-size-sm); table-layout: fixed; }
.gdo-decision-study__table th, .gdo-decision-study__table td { text-align: left; vertical-align: top; padding: var(--gdo-space-2); border-bottom: 1px solid var(--gdo-border); overflow-wrap: anywhere; }
.gdo-decision-study__table th[scope="row"] { font-weight: var(--gdo-type-weight-medium); }
.gdo-decision-study__table output { font-family: var(--gdo-type-family-mono); }
.gdo-decision-study__wire { padding: var(--gdo-space-2); margin-top: var(--gdo-space-2); border-inline-start: 3px solid var(--gdo-border); break-inside: avoid; }
.gdo-decision-study__wire[data-state="TRIPPED"] { border-color: var(--gdo-status-danger); }
.gdo-decision-study__wire[data-state="CLEAR"] { border-color: var(--gdo-status-success); }
.gdo-decision-study__notice { padding: var(--gdo-space-2); border: 1px solid var(--gdo-border); background: var(--gdo-bg-surface); }
.gdo-decision-study__drawing { margin: 0 0 var(--gdo-space-4); }
.gdo-decision-study__drawing-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; gap: var(--gdo-space-2); margin-top: var(--gdo-space-1); }
.gdo-decision-study__drawing-row > div { overflow-wrap: anywhere; }
.gdo-decision-study__drawing svg { display: block; width: 100%; height: auto; color: var(--gdo-text-secondary); }
.gdo-decision-study__assembly { fill: var(--gdo-bg-surface); stroke: currentColor; stroke-width: 1; }
.gdo-decision-study__bay { fill: var(--gdo-bg-page); stroke: currentColor; stroke-width: 1; }
.gdo-decision-study__drawing-row[data-basis="assumed"] rect, .gdo-decision-study__drawing-row[data-basis="unknown"] rect { stroke-dasharray: 4 3; }
.gdo-decision-study a { color: var(--gdo-link); }
@media (max-width: 48em) { .gdo-decision-study__grid { grid-template-columns: minmax(0, 1fr); } .gdo-decision-study { padding: var(--gdo-space-2); } }
@media print { .gdo-decision-study__controls { display: none; } .gdo-decision-study { padding: 0; border: none; } .gdo-decision-study__input { break-inside: avoid; } .gdo-decision-study__grid { display: block; } .gdo-decision-study__drawing { break-inside: avoid; } }

/* === GdoDiffViewer === */
.gdo-diff { font-family: var(--gdo-type-family-mono); font-size: var(--gdo-type-size-xs);
  line-height: 1.5; border: 1px solid var(--gdo-border-subtle); border-radius: var(--gdo-radius-1);
  overflow: auto; max-height: 50vh; background: var(--gdo-bg-surface); }
/* width:max-content + min-width:100% so the +/- background spans the FULL line
   when horizontally scrolled, not just the initially-visible portion. */
.gdo-diff__line { display: flex; white-space: pre; width: max-content; min-width: 100%; }
.gdo-diff__gutter { width: 1.5em; text-align: center; user-select: none; color: var(--gdo-text-muted); flex: none; }
.gdo-diff__text { flex: 1; padding-right: var(--gdo-space-2); }
.gdo-diff__line--add { background: color-mix(in srgb, var(--gdo-status-success) 14%, transparent); }
.gdo-diff__line--add .gdo-diff__gutter { color: var(--gdo-status-success); }
.gdo-diff__line--del { background: color-mix(in srgb, var(--gdo-status-danger) 14%, transparent); }
.gdo-diff__line--del .gdo-diff__gutter { color: var(--gdo-status-danger); }
.gdo-diff__empty { padding: var(--gdo-space-2); color: var(--gdo-text-muted); }
.gdo-diff__sep { color: var(--gdo-text-muted); text-align: center; user-select: none; }

/* === GdoDropdown === */
.gdo-dropdown {
  position: relative;
  display: inline-block;
}
.gdo-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  min-width: 10rem;
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  box-shadow: var(--gdo-shadow-2);
  padding: var(--gdo-space-0) 0;
  animation: gdo-slide-in-up var(--gdo-motion-fast) ease;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.gdo-dropdown__menu--right {
  left: auto;
  right: 0;
}
.gdo-dropdown__search {
  padding: var(--gdo-space-0) var(--gdo-space-1);
  border-bottom: 1px solid var(--gdo-border);
  flex-shrink: 0;
}
.gdo-dropdown__search input {
  width: 100%;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  background: var(--gdo-bg-surface);
  color: var(--gdo-text-primary);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  padding: 2px var(--gdo-space-0);
  outline: none;
}
.gdo-dropdown__search input:focus {
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-dropdown__list {
  flex: 1;
  overflow-y: auto;
}
.gdo-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--gdo-motion-fast);
  white-space: nowrap;
}
.gdo-dropdown__item:hover,
.gdo-dropdown__item--focused {
  background: var(--gdo-bg-surface);
}
.gdo-dropdown__item--danger {
  color: var(--gdo-status-danger);
}
.gdo-dropdown__item--danger:hover {
  background: var(--gdo-status-danger-bg);
}
.gdo-dropdown__item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gdo-dropdown__item--selected {
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-dropdown__item__check {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--gdo-link);
  flex-shrink: 0;
}
.gdo-dropdown__item__checkbox {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--gdo-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--gdo-motion-fast), border-color var(--gdo-motion-fast);
}
.gdo-dropdown__item__checkbox--checked {
  background: var(--gdo-bg-action);
  border-color: var(--gdo-bg-action);
  color: #ffffff;
  font-size: var(--gdo-type-size-4xs);
}
.gdo-dropdown__divider {
  height: 1px;
  background: var(--gdo-border);
  margin: var(--gdo-space-0) 0;
  flex-shrink: 0;
}
.gdo-dropdown__label {
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gdo-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gdo-space-3);
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-sm);
  font-family: var(--gdo-type-family-sans);
  gap: var(--gdo-space-0);
}
.gdo-dropdown__empty {
  padding: var(--gdo-space-1) var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-muted);
  text-align: center;
}

/* === GdoEmptyState === */
.gdo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gdo-space-6) var(--gdo-space-4);
  font-family: var(--gdo-type-family-sans);
  gap: var(--gdo-space-1);
}
.gdo-empty-state--compact {
  padding: var(--gdo-space-4) var(--gdo-space-3);
  gap: var(--gdo-space-0);
}
.gdo-empty-state--fill {
  flex: 1;
  min-height: 200px;
}
.gdo-empty-state--inline {
  flex-direction: row;
  text-align: left;
  padding: var(--gdo-space-3);
  gap: var(--gdo-space-3);
  justify-content: flex-start;
}

.gdo-empty-state__icon {
  font-size: var(--gdo-type-size-3xl);
  color: var(--gdo-text-muted);
  line-height: 1;
  margin-bottom: var(--gdo-space-0);
  opacity: 0.7;
  flex-shrink: 0;
}
.gdo-empty-state--compact .gdo-empty-state__icon {
  font-size: 1.5rem;
  margin-bottom: 0;
}
.gdo-empty-state--inline .gdo-empty-state__icon {
  font-size: 1.75rem;
  margin-bottom: 0;
}

/* Illustration slot (larger, above icon) */
.gdo-empty-state__illustration {
  margin-bottom: var(--gdo-space-1);
}

.gdo-empty-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-empty-state--inline .gdo-empty-state__content {
  align-items: flex-start;
}

.gdo-empty-state__title {
  font-size: var(--gdo-type-size-base);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  font-family: var(--gdo-type-family-heading);
  line-height: var(--gdo-type-line-height-tight);
}
.gdo-empty-state--compact .gdo-empty-state__title {
  font-size: var(--gdo-type-size-sm);
}

.gdo-empty-state__message {
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-secondary);
  max-width: 28rem;
  line-height: var(--gdo-type-line-height);
}
.gdo-empty-state--compact .gdo-empty-state__message {
  font-size: var(--gdo-type-size-xs);
  max-width: 20rem;
}

.gdo-empty-state__actions {
  margin-top: var(--gdo-space-1);
  display: flex;
  gap: var(--gdo-space-1);
  flex-wrap: wrap;
  justify-content: center;
}
.gdo-empty-state--inline .gdo-empty-state__actions {
  justify-content: flex-start;
  margin-top: var(--gdo-space-0);
}
.gdo-empty-state--compact .gdo-empty-state__actions {
  margin-top: var(--gdo-space-0);
}

/* Loading state */
.gdo-empty-state--loading .gdo-empty-state__icon {
  animation: gdo-pulse-gentle 1.5s ease-in-out infinite;
}
.gdo-empty-state__loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.gdo-empty-state__loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gdo-text-muted);
  animation: gdo-pulse-gentle 1.2s ease-in-out infinite;
}
.gdo-empty-state__loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.gdo-empty-state__loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* === GdoFlyout === */
.gdo-flyout {
  position: relative;
  display: inline-block;
}
.gdo-flyout__content {
  position: absolute;
  z-index: 200;
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3);
  box-shadow: var(--gdo-shadow-2);
  padding: var(--gdo-space-3);
  animation: gdo-fade-in 0.1s ease;
}

/* Placement variants */
.gdo-flyout__content--bottom {
  top: calc(100% + 8px);
  left: 0;
}
.gdo-flyout__content--bottom.gdo-flyout__content--align-right {
  left: auto;
  right: 0;
}
.gdo-flyout__content--top {
  bottom: calc(100% + 8px);
  left: 0;
}
.gdo-flyout__content--top.gdo-flyout__content--align-right {
  left: auto;
  right: 0;
}
.gdo-flyout__content--left {
  right: calc(100% + 8px);
  top: 0;
}
.gdo-flyout__content--right {
  left: calc(100% + 8px);
  top: 0;
}

/* Arrow pointer */
.gdo-flyout__arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.gdo-flyout__content--bottom .gdo-flyout__arrow {
  top: -5px;
  left: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--gdo-border);
}
.gdo-flyout__content--bottom .gdo-flyout__arrow::after {
  content: '';
  position: absolute;
  top: 1px;
  left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--gdo-bg-page);
}
.gdo-flyout__content--top .gdo-flyout__arrow {
  bottom: -5px;
  left: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gdo-border);
}
.gdo-flyout__content--top .gdo-flyout__arrow::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gdo-bg-page);
}
.gdo-flyout__content--left .gdo-flyout__arrow {
  right: -5px;
  top: 12px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--gdo-border);
}
.gdo-flyout__content--left .gdo-flyout__arrow::after {
  content: '';
  position: absolute;
  top: -5px;
  right: 1px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--gdo-bg-page);
}
.gdo-flyout__content--right .gdo-flyout__arrow {
  left: -5px;
  top: 12px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--gdo-border);
}
.gdo-flyout__content--right .gdo-flyout__arrow::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 1px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--gdo-bg-page);
}

/* === GdoFormGroup === */
.gdo-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-sans);
}

/* Inline layout: label + field side by side */
.gdo-form-group--inline {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gdo-space-3);
}
.gdo-form-group--inline .gdo-form-group__label-wrap {
  width: 8rem;
  flex-shrink: 0;
  padding-top: 0.35rem; /* align with input */
}
.gdo-form-group--inline .gdo-form-group__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-0);
}

/* Compact (minimal gap) */
.gdo-form-group--compact {
  gap: 2px;
}

.gdo-form-group__label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gdo-space-0);
}

.gdo-form-group__label {
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  line-height: var(--gdo-type-line-height-tight);
  cursor: default;
}

.gdo-form-group__required {
  color: var(--gdo-status-danger);
  margin-left: 0.15em;
}

/* Optional badge */
.gdo-form-group__optional {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  font-weight: var(--gdo-type-weight-normal);
  margin-left: 0.35em;
}

/* Character counter — right-aligned beside label or below field */
.gdo-form-group__counter {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  flex-shrink: 0;
}
.gdo-form-group__counter--warning {
  color: var(--gdo-status-warning);
}
.gdo-form-group__counter--danger {
  color: var(--gdo-status-danger);
}

/* Tooltip icon on label */
.gdo-form-group__tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border-radius: var(--gdo-radius-full);
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-muted);
  font-size: 0.7em;
  cursor: help;
  flex-shrink: 0;
  user-select: none;
}

/* Validation states — applied via .gdo-form-group--error / --success / --warning */
.gdo-form-group--error .gdo-form-group__label {
  color: var(--gdo-status-danger);
}
.gdo-form-group--success .gdo-form-group__label {
  color: var(--gdo-status-success);
}

.gdo-form-group__error {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-status-danger);
  line-height: var(--gdo-type-line-height-tight);
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.gdo-form-group__error::before {
  content: '⚠';
  font-size: 0.9em;
}

.gdo-form-group__success {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-status-success);
  line-height: var(--gdo-type-line-height-tight);
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.gdo-form-group__success::before {
  content: '✓';
  font-size: 0.9em;
}

.gdo-form-group__hint {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  line-height: var(--gdo-type-line-height-tight);
}

/* Loading state — field slot area is dimmed */
.gdo-form-group--loading .gdo-form-group__body {
  opacity: 0.6;
  pointer-events: none;
}

/* === GdoGraphViewport === */
.gdo-gvp {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gdo-bg-page);
  font-family: var(--gdo-type-family-sans);
  outline: none;
  position: relative;
}
.gdo-gvp:focus { outline: none; }
.gdo-gvp__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface);
  flex-shrink: 0;
}
.gdo-gvp__toolbar-label {
  font-size: var(--gdo-type-size-2xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gdo-gvp__focus-badge {
  background: var(--gdo-bg-surface-raised);
  border: 1px solid var(--gdo-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-primary);
  font-family: var(--gdo-type-family-mono, monospace);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gdo-gvp__depth-btn {
  background: none;
  border: 1px solid var(--gdo-border);
  border-radius: 4px;
  color: var(--gdo-text-secondary);
  cursor: pointer;
  font-size: var(--gdo-type-size-xs);
  padding: 2px 7px;
  line-height: 1;
}
.gdo-gvp__depth-btn:hover { background: var(--gdo-bg-surface-raised); color: var(--gdo-text-primary); }
.gdo-gvp__depth-val {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-primary);
  min-width: 14px;
  text-align: center;
}
.gdo-gvp__body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}
.gdo-gvp__canvas {
  flex: 1;
  overflow: auto;
  position: relative;
}
.gdo-gvp__minimap-wrap {
  width: 180px;
  flex-shrink: 0;
  border-left: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
}
.gdo-gvp__minimap-label {
  font-size: var(--gdo-type-size-3xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.gdo-gvp__dpad {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(3, 28px);
  gap: 2px;
  justify-content: center;
}
.gdo-gvp__dpad-btn {
  background: var(--gdo-bg-surface-raised);
  border: 1px solid var(--gdo-border);
  border-radius: 4px;
  color: var(--gdo-text-secondary);
  cursor: pointer;
  font-size: var(--gdo-type-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 80ms, transform 80ms;
}
.gdo-gvp__dpad-btn:hover  { background: var(--gdo-bg-surface-raised); color: var(--gdo-text-primary); }
.gdo-gvp__dpad-btn:active { transform: scale(0.92); background: var(--gdo-bg-action); color: #fff; }
.gdo-gvp__dpad-btn--center {
  background: var(--gdo-bg-surface);
  cursor: default;
  font-size: var(--gdo-type-size-3xs);
  color: var(--gdo-text-muted);
}
.gdo-gvp__hud {
  position: absolute;
  bottom: 8px;
  left: 12px;
  pointer-events: none;
}
.gdo-gvp__hud-tag {
  font-size: var(--gdo-type-size-3xs);
  color: var(--gdo-text-muted);
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: 3px;
  padding: 2px 6px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.gdo-gvp__hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gdo-bg-action);
}
.gdo-gvp__hint {
  font-size: var(--gdo-type-size-2xs);
  color: var(--gdo-text-muted);
  padding: 12px;
  text-align: center;
}

/* === GdoHeatmap === */
.gdo-heatmap__cell { cursor:pointer; }
.gdo-heatmap__cell:focus-visible { outline:none; }
.gdo-heatmap__cell:focus-visible rect, .gdo-heatmap__cell[aria-pressed="true"] rect { stroke:var(--gdo-link); stroke-width:2; }
.gdo-heatmap__cell rect { stroke:var(--gdo-bg-page); stroke-width:1; }
.gdo-heatmap__cell text, .gdo-heatmap__static text { fill:var(--gdo-text-primary); font-size:var(--gdo-type-size-xs); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.gdo-heatmap__row { fill:var(--gdo-text-secondary); font-size:var(--gdo-type-size-xs); text-anchor:end; dominant-baseline:central; }
.gdo-heatmap__col { fill:var(--gdo-text-secondary); font-size:var(--gdo-type-size-xs); text-anchor:middle; }

/* === GdoHistogram === */
.gdo-histogram__bar { cursor:pointer; }
.gdo-histogram__bar:focus-visible { outline:none; }
.gdo-histogram__bar:focus-visible .gdo-histogram__ring, .gdo-histogram__bar[aria-pressed="true"] .gdo-histogram__ring { stroke:var(--gdo-link); stroke-width:2; }
.gdo-histogram__ring { fill:transparent; stroke:transparent; }
.gdo-histogram__hit { fill:transparent; }
.gdo-histogram__legend { display:flex; flex-wrap:wrap; gap:0 var(--gdo-space-2); margin:0; padding:0; list-style:none; font-size:var(--gdo-type-size-xs); color:var(--gdo-text-secondary); }
.gdo-histogram__swatch { display:inline-block; width:10px; height:10px; margin-inline-end:4px; border-radius:2px; }
.gdo-histogram__axis { stroke:var(--gdo-border); }
.gdo-histogram__tick { fill:var(--gdo-text-secondary); font-size:var(--gdo-type-size-xs); text-anchor:middle; }
.gdo-histogram__marker { stroke:var(--gdo-text-primary); stroke-dasharray:3 2; }
.gdo-histogram__marker-label { fill:var(--gdo-text-primary); font-size:var(--gdo-type-size-xs); text-anchor:middle; }

/* === GdoIconButton === */
/* Canonical icon button — square, dense chrome control (panel close ✕, layer
   visibility, zoom +/-, row actions, toolbar tools). The atom the per-app
   TODO(gdo-icon-btn) sites converge on. Markup-only adoption is supported:
   <button class="gdo-icon-btn gdo-icon-btn--sm" aria-label="…">✕</button>. */
.gdo-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--gdo-radius-1);
  color: var(--gdo-text-secondary);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--gdo-motion-fast), color var(--gdo-motion-fast);
}
.gdo-icon-btn:hover {
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-primary);
}
.gdo-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--gdo-focus-ring-alt);
}
.gdo-icon-btn:disabled {
  opacity: var(--gdo-state-disabled-opacity);
  cursor: not-allowed;
}
.gdo-icon-btn:disabled:hover {
  background: transparent;
  color: var(--gdo-text-secondary);
}

/* Active/selected (pressed tool, toggled state) */
.gdo-icon-btn--active,
.gdo-icon-btn[aria-pressed="true"] {
  background: var(--gdo-bg-action-soft);
  color: var(--gdo-link);
}

/* Variants */
.gdo-icon-btn--danger:hover {
  background: var(--gdo-status-danger-bg);
  color: var(--gdo-status-danger);
}
.gdo-icon-btn--primary {
  background: var(--gdo-bg-action);
  color: var(--gdo-text-on-action);
}
.gdo-icon-btn--primary:hover {
  background: var(--gdo-bg-action-hover);
  color: var(--gdo-text-on-action);
}

/* On-gradient chrome (topbar / IDE statusbar): inherit the bar's ink */
.gdo-icon-btn--chrome {
  color: var(--gdo-topbar-text-muted);
}
.gdo-icon-btn--chrome:hover {
  background: var(--gdo-topbar-hover-bg);
  color: var(--gdo-topbar-text);
}

/* Sizes */
.gdo-icon-btn--sm {
  width: 22px;
  height: 22px;
  font-size: var(--gdo-type-size-sm);
}
.gdo-icon-btn--lg {
  width: 34px;
  height: 34px;
  font-size: var(--gdo-type-size-lg);
}

/* === GdoInput === */
.gdo-input-wrap {
  display: block;
  width: 100%;
  font-family: var(--gdo-type-family-sans);
}
.gdo-input-field {
  position: relative;
  display: flex;
  align-items: center;
}
.gdo-input {
  display: block;
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-1);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  transition: border-color var(--gdo-motion-fast), box-shadow var(--gdo-motion-fast);
  line-height: 1.5;
  min-width: 0;
}
.gdo-input:focus {
  outline: none;
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-input::placeholder {
  color: var(--gdo-text-muted);
}
.gdo-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--gdo-bg-surface);
}
.gdo-input--error {
  border-color: var(--gdo-status-danger);
}
.gdo-input--error:focus {
  box-shadow: 0 0 0 0.25rem var(--gdo-focus-ring-alt);
}
.gdo-input--success {
  border-color: var(--gdo-status-success);
}
.gdo-input--sm {
  padding: 0.15rem var(--gdo-space-0);
  font-size: var(--gdo-type-size-xs);
}
.gdo-input--lg {
  padding: var(--gdo-space-1) var(--gdo-space-3);
  font-size: var(--gdo-type-size-base);
}
/* Prefix / suffix padding adjustments */
.gdo-input--has-prefix {
  padding-left: calc(var(--gdo-space-1) + 1.5em + var(--gdo-space-0));
}
.gdo-input--has-suffix {
  padding-right: calc(var(--gdo-space-1) + 1.5em + var(--gdo-space-0));
}
/* Prefix / suffix adornments */
.gdo-input-adornment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-sm);
  pointer-events: none;
  line-height: 1;
}
.gdo-input-adornment--prefix {
  left: var(--gdo-space-1);
}
.gdo-input-adornment--suffix {
  right: var(--gdo-space-1);
  pointer-events: auto;
}
/* Password toggle button */
.gdo-input__pw-toggle {
  position: absolute;
  right: var(--gdo-space-0);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-base);
  line-height: 1;
  padding: var(--gdo-space-0);
  border-radius: var(--gdo-radius-1);
  transition: color var(--gdo-motion-fast), background var(--gdo-motion-fast);
}
.gdo-input__pw-toggle:hover {
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-surface);
}
/* Success icon */
.gdo-input__success-icon {
  position: absolute;
  right: var(--gdo-space-1);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gdo-status-success);
  font-size: var(--gdo-type-size-sm);
  pointer-events: none;
  line-height: 1;
}
/* Below-input row */
.gdo-input-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gdo-space-0);
  margin-top: 0.25rem;
  font-size: var(--gdo-type-size-xs);
}
.gdo-input-error {
  color: var(--gdo-status-danger);
  flex: 1;
}
.gdo-input-helper {
  color: var(--gdo-text-muted);
  flex: 1;
}
.gdo-input-counter {
  color: var(--gdo-text-muted);
  flex-shrink: 0;
  margin-left: auto;
}
.gdo-input-counter--near-limit {
  color: var(--gdo-status-danger);
  font-weight: var(--gdo-type-weight-bold);
}
/* Auto-grow textarea */
.gdo-input--textarea {
  resize: none;
  overflow: hidden;
  min-height: 4rem;
}

/* === GdoLoadingExperience === */
.gdo-loading-experience { display: flex; flex: 1; min-height: 10rem; width: 100%; align-items: center; justify-content: center; flex-direction: column; gap: .166667in; padding: .25in; text-align: center; color: var(--gdo-text-secondary); }
.gdo-loading-experience__indicator { width: .375in; height: .375in; border: .03125in solid var(--gdo-border); border-top-color: var(--gdo-bg-action); border-radius: var(--gdo-radius-full); animation: gdo-wait-turn 1s linear infinite; }
.gdo-loading-experience__title { font-weight: var(--gdo-type-weight-medium); color: var(--gdo-text-primary); }
.gdo-loading-experience__message { max-width: 46ch; min-height: 4.5em; line-height: 1.5; text-wrap: pretty; }
@keyframes gdo-wait-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .gdo-loading-experience__indicator { animation: none; } }

/* === GdoMarkdown === */
.gdo-markdown {
  font-family: var(--gdo-type-family-doc-serif);
  color: var(--gdo-text-primary);
  line-height: var(--gdo-type-line-height);
  font-size: var(--gdo-type-size-base);
  overflow-wrap: anywhere;
}
.gdo-markdown--sans { font-family: var(--gdo-type-family-sans); }
.gdo-markdown > :first-child { margin-top: 0; }
.gdo-markdown > :last-child { margin-bottom: 0; }
.gdo-markdown p { margin: 0 0 var(--gdo-space-2); }
.gdo-markdown h1, .gdo-markdown h2, .gdo-markdown h3,
.gdo-markdown h4, .gdo-markdown h5, .gdo-markdown h6 {
  font-family: var(--gdo-type-family-heading);
  font-weight: var(--gdo-type-weight-semibold);
  line-height: var(--gdo-type-line-height-tight);
  margin: var(--gdo-space-3) 0 var(--gdo-space-1);
}
.gdo-markdown h1 { font-size: var(--gdo-type-size-xl); }
.gdo-markdown h2 { font-size: var(--gdo-type-size-lg); }
.gdo-markdown h3 { font-size: var(--gdo-type-size-md); }
.gdo-markdown h4, .gdo-markdown h5, .gdo-markdown h6 { font-size: var(--gdo-type-size-base); }
.gdo-markdown ul, .gdo-markdown ol { margin: 0 0 var(--gdo-space-2); padding-left: var(--gdo-space-4); }
.gdo-markdown li { margin-bottom: var(--gdo-space-05); }
.gdo-markdown blockquote {
  margin: 0 0 var(--gdo-space-2);
  padding: var(--gdo-space-1) var(--gdo-space-2);
  border-left: 3px solid var(--gdo-border);
  color: var(--gdo-text-secondary);
}
.gdo-markdown code {
  font-family: var(--gdo-type-family-code);
  font-size: var(--gdo-type-size-sm);
  background: var(--gdo-code-bg);
  color: var(--gdo-code-text);
  padding: 0 var(--gdo-space-05);
  border-radius: var(--gdo-radius-1);
}
.gdo-markdown pre {
  background: var(--gdo-code-bg);
  padding: var(--gdo-space-2);
  border-radius: var(--gdo-radius-2);
  overflow-x: auto;
}
.gdo-markdown pre code { padding: 0; background: none; }
.gdo-markdown a { color: var(--gdo-link); }
.gdo-markdown a:hover { color: var(--gdo-link-hover); }
.gdo-markdown hr { border: 0; border-top: 1px solid var(--gdo-border); margin: var(--gdo-space-3) 0; }

/* === GdoModal === */
.gdo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--gdo-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--gdo-z-modal, 1000);
  /* --gdo-motion-fast already bundles the easing (e.g. "0.15s ease"); appending
     " ease" yields the malformed "0.15s ease ease", which left the backdrop
     stuck at opacity 0 and hid the whole modal (it's the dialog's parent). */
  opacity: 1;
  animation: gdo-fade-in var(--gdo-motion-fast);
  /* pointer-events is inherited: some app shells set pointer-events:none on a
     content wrapper, which the modal would inherit, making every click fall
     through. An overlay must always be interactive — force it back on. */
  pointer-events: auto;
  padding: var(--gdo-space-3);
}
.gdo-modal {
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3);
  box-shadow: var(--gdo-shadow-2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--gdo-space-3));
  max-width: calc(100vw - 2 * var(--gdo-space-3));
  width: 560px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--gdo-motion-fast), transform var(--gdo-motion-fast);
  position: relative;
}
.gdo-modal--visible {
  opacity: 1;
  transform: translateY(0);
}
.gdo-modal--sm { width: 400px; }
.gdo-modal--md { width: 560px; }
.gdo-modal--lg { width: 720px; }
.gdo-modal--xl { width: 900px; }
.gdo-modal--cut {
  position: fixed;
  max-width: none;
  max-height: none;
}
.gdo-modal__heading { display: grid; min-width: 0; }
.gdo-modal__subtitle { margin: 0; font-size: var(--gdo-type-size-xs); color: var(--gdo-text-muted); }
.gdo-modal--fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
}
.gdo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gdo-space-1) var(--gdo-space-3);
  border-bottom: 1px solid var(--gdo-border);
  flex-shrink: 0;
  gap: var(--gdo-space-1);
}
.gdo-modal__header--draggable {
  cursor: grab;
  user-select: none;
}
.gdo-modal__header--dragging {
  cursor: grabbing;
}
.gdo-modal__title {
  font-family: var(--gdo-type-family-heading);
  font-size: var(--gdo-type-size-base);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  margin: 0;
}
.gdo-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gdo-text-muted);
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border-radius: var(--gdo-radius-full);
  transition: color var(--gdo-motion-fast), background var(--gdo-motion-fast);
  flex-shrink: 0;
}
.gdo-modal__close--floating {
  position: absolute;
  inset-block-start: var(--gdo-space-2);
  inset-inline-end: var(--gdo-space-2);
  z-index: 1;
}
.gdo-modal__close svg { width: 1.125rem; height: 1.125rem; }
.gdo-modal__close:focus-visible { outline: none; box-shadow: var(--gdo-focus-ring); }
.gdo-modal__close:hover {
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-surface);
}
.gdo-modal__body {
  flex: 1;
  padding: var(--gdo-space-3);
  overflow-y: auto;
}
.gdo-modal__body--flush {
  padding: 0;
}
.gdo-modal__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-1) var(--gdo-space-3);
  border-top: 1px solid var(--gdo-border);
  flex-shrink: 0;
}
/* Destructive action sits bottom-left, away from the confirm/cancel cluster. */
.gdo-modal__footer-danger { margin-right: auto; }
/* Opt-in aria-disabled primary (focusable, reason-announced) — see disabledReason. */
.gdo-modal__primary--disabled { opacity: var(--gdo-state-disabled-opacity); cursor: not-allowed; }
.gdo-modal__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* === GdoNotification === */
.gdo-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-1) var(--gdo-space-3);
  border-radius: var(--gdo-radius-2);
  border-left: 3px solid var(--gdo-border);
  background: var(--gdo-bg-surface);
  box-shadow: var(--gdo-shadow-1);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  animation: gdo-slide-in-right var(--gdo-motion-normal) ease;
  max-width: 380px;
  width: 100%;
  transition: transform var(--gdo-motion-normal) ease, opacity var(--gdo-motion-normal) ease;
  position: relative;
  overflow: hidden;
}
.gdo-notification--dismissed {
  animation: gdo-slide-out-right 200ms ease forwards;
}
.gdo-notification--success { border-left-color: var(--gdo-status-success); }
.gdo-notification--warning { border-left-color: var(--gdo-status-warning); }
.gdo-notification--danger  { border-left-color: var(--gdo-status-danger); }
.gdo-notification--info    { border-left-color: var(--gdo-status-info); }
.gdo-notification--brand   { border-left-color: var(--gdo-bg-action-alt); }
.gdo-notification__icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: var(--gdo-type-weight-medium);
  line-height: 1;
  margin-top: 0.1rem;
  color: #ffffff;
}
.gdo-notification--success .gdo-notification__icon { background: var(--gdo-status-success); }
.gdo-notification--warning .gdo-notification__icon { background: var(--gdo-status-warning); }
.gdo-notification--danger  .gdo-notification__icon { background: var(--gdo-status-danger); }
.gdo-notification--info    .gdo-notification__icon { background: var(--gdo-status-info); }
.gdo-notification--brand   .gdo-notification__icon { background: var(--gdo-bg-action-alt); }
.gdo-notification__content {
  flex: 1;
  min-width: 0;
}
.gdo-notification__title {
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  line-height: var(--gdo-type-line-height-tight);
}
.gdo-notification__body {
  color: var(--gdo-text-secondary);
  margin-top: 0.15rem;
  line-height: var(--gdo-type-line-height);
}
.gdo-notification__action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-link-hover);
  margin-top: 0.3rem;
  display: block;
  text-align: left;
  transition: color var(--gdo-motion-fast);
}
.gdo-notification__action:hover {
  color: var(--gdo-link);
  text-decoration: underline;
}
.gdo-notification__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gdo-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: color var(--gdo-motion-fast);
}
.gdo-notification__close:hover { color: var(--gdo-text-primary); }
.gdo-notification__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--gdo-border);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: gdo-notification-progress;
}
.gdo-notification--success .gdo-notification__progress { background: var(--gdo-status-success); }
.gdo-notification--warning .gdo-notification__progress { background: var(--gdo-status-warning); }
.gdo-notification--danger  .gdo-notification__progress { background: var(--gdo-status-danger); }
.gdo-notification--info    .gdo-notification__progress { background: var(--gdo-status-info); }
.gdo-notification--brand   .gdo-notification__progress { background: var(--gdo-bg-action-alt); }
@keyframes gdo-notification-progress {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes gdo-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

/* === GdoNotificationCenter === */
/* Inline surface: the bell sits in-flow (e.g. the shared topbar action row); the
   dropdown panel anchors below the bell (position: relative context) and toasts
   stay viewport-fixed so they behave as transient notifications regardless of where
   the bell is mounted. */
.gdo-notif-center { position: relative; display: inline-flex; font-family: var(--gdo-type-family-sans); }
.gdo-notif-center__bell {
  position: relative; width: 2rem; height: 2rem; border-radius: var(--gdo-radius-full);
  border: none; background: none; color: inherit;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background var(--gdo-motion-fast);
}
.gdo-notif-center__bell:hover { background: var(--gdo-topbar-hover-bg, var(--gdo-bg-surface-raised)); }
.gdo-notif-center__badge {
  position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem;
  border-radius: var(--gdo-radius-full); background: var(--gdo-status-danger); color: var(--gdo-text-on-action);
  font-size: var(--gdo-type-size-xs); font-weight: var(--gdo-type-weight-medium);
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.gdo-notif-center__panel {
  position: absolute; top: 2.75rem; right: 0; width: 22rem; max-height: 26rem; overflow-y: auto;
  z-index: var(--gdo-z-popover, 400);
  background: var(--gdo-bg-surface-elevated, var(--gdo-bg-surface)); border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3); box-shadow: var(--gdo-shadow-3); display: flex; flex-direction: column;
}
.gdo-notif-center__head {
  display: flex; align-items: center; justify-content: space-between; padding: var(--gdo-space-2) var(--gdo-space-3);
  border-bottom: 1px solid var(--gdo-border-subtle); position: sticky; top: 0; background: inherit;
}
.gdo-notif-center__head-title { font-weight: var(--gdo-type-weight-medium); color: var(--gdo-text-primary); font-size: var(--gdo-type-size-sm); }
.gdo-notif-center__clear { background: none; border: none; cursor: pointer; color: var(--gdo-link); font-size: var(--gdo-type-size-xs); padding: 0; }
.gdo-notif-center__clear:hover { color: var(--gdo-link-hover); text-decoration: underline; }
.gdo-notif-center__head-actions { display: flex; align-items: center; gap: var(--gdo-space-2); }
.gdo-notif-center__desktop-btn {
  background: none; border: 1px solid var(--gdo-border); border-radius: var(--gdo-radius-2); cursor: pointer;
  color: var(--gdo-text-secondary); font-size: var(--gdo-type-size-xs); padding: 0.1rem 0.4rem; font-family: inherit; line-height: 1.4;
}
.gdo-notif-center__desktop-btn:hover { background: var(--gdo-bg-surface-raised); color: var(--gdo-text-primary); }
.gdo-notif-center__desktop-hint { color: var(--gdo-text-muted); font-size: var(--gdo-type-size-xs); cursor: default; }
.gdo-notif-center__empty { padding: var(--gdo-space-4) var(--gdo-space-3); color: var(--gdo-text-muted); font-size: var(--gdo-type-size-sm); text-align: center; }
.gdo-notif-center__item {
  display: flex; gap: var(--gdo-space-2); padding: var(--gdo-space-2) var(--gdo-space-3);
  border-bottom: 1px solid var(--gdo-border-subtle); border-left: 3px solid var(--gdo-border);
}
.gdo-notif-center__item--success { border-left-color: var(--gdo-status-success); }
.gdo-notif-center__item--warning { border-left-color: var(--gdo-status-warning); }
.gdo-notif-center__item--error   { border-left-color: var(--gdo-status-danger); }
.gdo-notif-center__item--info    { border-left-color: var(--gdo-status-info); }
.gdo-notif-center__item-icon { flex-shrink: 0; font-size: 0.9rem; line-height: 1.4; }
.gdo-notif-center__item-body { flex: 1; min-width: 0; }
.gdo-notif-center__item-title { font-size: var(--gdo-type-size-sm); font-weight: var(--gdo-type-weight-medium); color: var(--gdo-text-primary); }
.gdo-notif-center__item-sub { font-size: var(--gdo-type-size-xs); color: var(--gdo-text-secondary); margin-top: 0.1rem; word-break: break-word; }
.gdo-notif-center__item-meta { font-size: var(--gdo-type-size-xs); color: var(--gdo-text-muted); margin-top: 0.15rem; }
.gdo-notif-center__toasts { position: fixed; bottom: var(--gdo-space-3); right: var(--gdo-space-3); display: flex; flex-direction: column; gap: var(--gdo-space-2); z-index: var(--gdo-z-toast, 600); }

/* === GdoPageNotifications === */
.gdo-page-notices { position: sticky; top: 0; z-index: var(--gdo-z-sticky); flex: none; display: grid; gap: var(--gdo-space-1); }
.gdo-page-notices .gdo-alert { flex: none; min-width: 0; overflow-wrap: anywhere; }
.gdo-page-toasts { position: fixed; top: var(--gdo-space-5); right: var(--gdo-space-3); z-index: var(--gdo-z-toast); display: grid; gap: var(--gdo-space-2); width: min(24rem, calc(100vw - var(--gdo-space-5))); pointer-events: none; }
.gdo-page-toasts > * { pointer-events: auto; box-sizing: border-box; overflow-wrap: anywhere; }

/* === GdoPanel === */
.gdo-panel {
  display: flex;
  flex-direction: column;
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3);
  overflow: hidden;
  box-shadow: var(--gdo-shadow-1);
}
.gdo-panel--flat {
  box-shadow: none;
}
.gdo-panel--raised {
  box-shadow: var(--gdo-shadow-2);
}
.gdo-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gdo-space-0) var(--gdo-space-3);
  border-bottom: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface-raised);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-primary);
  min-height: 2.25rem;
  flex-shrink: 0;
  cursor: default;
}
.gdo-panel--collapsible .gdo-panel__header {
  cursor: pointer;
  user-select: none;
}
.gdo-panel--collapsible .gdo-panel__header:hover {
  background: color-mix(in srgb, var(--gdo-bg-surface-raised) 80%, var(--gdo-bg-action) 4%);
}
.gdo-panel__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.gdo-panel__title {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-heading);
}
.gdo-panel__subtitle {
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-normal);
  color: var(--gdo-text-muted);
  line-height: 1.3;
}
/* Inline muted context next to the title (e.g. "12 configured"). Nest inside
   .gdo-panel__title so the header's space-between keeps actions on the right. */
.gdo-panel__meta {
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-normal);
  color: var(--gdo-text-secondary);
  white-space: nowrap;
}
.gdo-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  line-height: 1;
  padding: 0.1rem 0.42rem;
  border-radius: var(--gdo-radius-pill);
  background: color-mix(in srgb, var(--gdo-bg-action-alt) 16%, transparent);
  color: var(--gdo-link-hover);
  border: 1px solid color-mix(in srgb, var(--gdo-bg-action-alt) 28%, transparent);
  min-width: 1.25rem;
  text-align: center;
}
.gdo-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-panel__chevron {
  font-size: 0.7rem;
  color: var(--gdo-text-muted);
  transition: transform var(--gdo-motion-fast);
  flex-shrink: 0;
  margin-left: var(--gdo-space-0);
  display: inline-block;
}
.gdo-panel--collapsed .gdo-panel__chevron {
  transform: rotate(-90deg);
}
.gdo-panel__pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  font-size: 0.8rem;
  color: var(--gdo-text-muted);
  transition: color var(--gdo-motion-fast), opacity var(--gdo-motion-fast);
  opacity: 0.5;
  line-height: 1;
}
.gdo-panel__pin-btn:hover {
  opacity: 1;
  color: var(--gdo-text-primary);
}
.gdo-panel--pinned .gdo-panel__pin-btn {
  opacity: 1;
  color: var(--gdo-link-hover);
}
.gdo-panel__collapsible-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  transition: max-height var(--gdo-motion-normal) ease;
  max-height: 2000px;
}
.gdo-panel--collapsed .gdo-panel__collapsible-body {
  max-height: 0;
}
.gdo-panel__body {
  flex: 1;
  padding: var(--gdo-space-3);
  overflow: auto;
}
.gdo-panel__body--flush {
  padding: 0;
}
.gdo-panel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-0) var(--gdo-space-3);
  border-top: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface-raised);
  flex-shrink: 0;
}
.gdo-panel__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-3);
}
.gdo-panel__skeleton-line {
  height: 0.875rem;
  border-radius: var(--gdo-radius-1);
  background: linear-gradient(
    90deg,
    var(--gdo-bg-surface-raised) 25%,
    color-mix(in srgb, var(--gdo-bg-surface-raised) 60%, var(--gdo-border) 60%) 50%,
    var(--gdo-bg-surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: gdo-shimmer 1.4s ease infinite;
}
.gdo-panel__skeleton-line:nth-child(1) { width: 80%; }
.gdo-panel__skeleton-line:nth-child(2) { width: 60%; }
.gdo-panel__skeleton-line:nth-child(3) { width: 72%; }

/* === GdoPanelResize === */
.gdo-panel-resize {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
}
.gdo-panel-resize::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: var(--gdo-border);
  border-radius: 1px;
  transition: background var(--gdo-motion-fast), width var(--gdo-motion-fast), left var(--gdo-motion-fast);
}
.gdo-panel-resize:hover::before,
.gdo-panel-resize--active::before {
  background: var(--gdo-bg-action);
  width: 3px;
  left: 1.5px;
}
.gdo-panel-resize--active {
  cursor: col-resize;
}

/* Vertical (horizontal drag) — default */
.gdo-panel-resize--vertical {
  width: 6px;
  height: 100%;
}

/* Horizontal (vertical drag) */
.gdo-panel-resize--horizontal {
  width: 100%;
  height: 6px;
  cursor: row-resize;
}
.gdo-panel-resize--horizontal::before {
  top: 2px;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
}
.gdo-panel-resize--horizontal:hover::before,
.gdo-panel-resize--horizontal.gdo-panel-resize--active::before {
  height: 3px;
  top: 1.5px;
}

/* Tooltip showing current width on hover */
.gdo-panel-resize__tooltip {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  padding: 2px var(--gdo-space-0);
  font-size: var(--gdo-type-size-4xs);
  font-family: var(--gdo-type-family-sans);
  color: var(--gdo-text-secondary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--gdo-shadow-1);
  opacity: 0;
  transition: opacity var(--gdo-motion-fast);
}
.gdo-panel-resize--active .gdo-panel-resize__tooltip,
.gdo-panel-resize:hover .gdo-panel-resize__tooltip {
  opacity: 1;
}
.gdo-panel-resize--horizontal .gdo-panel-resize__tooltip {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* === GdoPatternTable === */
.gdo-patterns {
  width: min(34rem, 100%);
  font-family: var(--gdo-type-family-sans);
}
.gdo-patterns__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
}
.gdo-patterns__table th {
  text-align: left;
  padding: 0 var(--gdo-space-0) var(--gdo-space-0);
  font-size: var(--gdo-type-size-2xs);
  font-weight: var(--gdo-type-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gdo-text-muted);
  border-bottom: 1px solid var(--gdo-border);
  white-space: nowrap;
}
.gdo-patterns__table td {
  padding: 2px var(--gdo-space-0);
  border-bottom: 1px solid var(--gdo-border-subtle);
  vertical-align: middle;
}
.gdo-patterns__table td:first-child,
.gdo-patterns__table th:first-child { padding-left: 0; }
.gdo-patterns__input {
  width: 100%;
  font-family: var(--gdo-type-family-code);
}
/* The count column is numeric: right-aligned and tabular so rows compare by
   eye, and fixed-width so a settling number doesn't reflow the pattern box. */
.gdo-patterns__num {
  text-align: right;
  width: 7.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
}
.gdo-patterns__num--pending { color: var(--gdo-text-muted); }
.gdo-patterns__num--unknown { color: var(--gdo-text-muted); }
.gdo-patterns__actions {
  width: 2rem;
  text-align: right;
}
.gdo-patterns__sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gdo-patterns__empty {
  padding: var(--gdo-space-1) 0;
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
}
.gdo-patterns__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gdo-space-1);
  flex-wrap: wrap;
  margin-top: var(--gdo-space-0);
}
.gdo-patterns__total {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
  text-align: right;
  flex: 1;
  min-width: 0;
}
.gdo-patterns__total--pending { color: var(--gdo-text-muted); }
.gdo-patterns__total--unavailable { color: var(--gdo-status-warning); }
.gdo-patterns__samples {
  margin-top: 2px;
  font-family: var(--gdo-type-family-code);
  font-size: var(--gdo-type-size-2xs);
  color: var(--gdo-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === GdoPolarityDial === */
.gdo-dial {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gdo-space-05);
  font-family: var(--gdo-type-family-sans);
  color: var(--gdo-text-primary);
  min-width: 0;
}
.gdo-dial--clickable { cursor: pointer; }
.gdo-dial--clickable:focus-visible { outline: none; box-shadow: var(--gdo-focus-ring); border-radius: var(--gdo-radius-2); }
.gdo-dial__label {
  font-weight: var(--gdo-type-weight-semibold);
  font-size: var(--gdo-type-size-sm);
  letter-spacing: var(--gdo-type-letter-spacing);
  text-align: center;
}
.gdo-dial__svg { width: 9rem; height: auto; overflow: visible; }
.gdo-dial--sm .gdo-dial__svg { width: 6.5rem; }
.gdo-dial--xs { gap: 0; flex-direction: column-reverse; }
.gdo-dial--xs .gdo-dial__svg { width: 2.75rem; }
.gdo-dial--xs .gdo-dial__label { font-size: var(--gdo-type-size-2xs); font-weight: var(--gdo-type-weight-medium); line-height: 1.2; }
.gdo-dial--xs .gdo-dial__ring { stroke-width: 6; }
.gdo-dial--xs .gdo-dial__track { stroke-width: 10; }
.gdo-dial--xs .gdo-dial__marker { r: 13px; stroke-width: 4; }
.gdo-dial--xs .gdo-dial__pole, .gdo-dial--xs .gdo-dial__center, .gdo-dial--xs .gdo-dial__value, .gdo-dial--xs .gdo-dial__caption { display: none; }
.gdo-dial--unknown.gdo-dial--xs .gdo-dial__track { stroke-width: 6; }
.gdo-dial__ring { fill: none; stroke: var(--gdo-border); stroke-width: 2; }
.gdo-dial__track { stroke: var(--gdo-bg-action); stroke-width: 4; stroke-linecap: round; }
.gdo-dial__head { fill: var(--gdo-bg-action); }
.gdo-dial__marker { fill: var(--gdo-bg-action-alt); stroke: var(--gdo-bg-page); stroke-width: 2; }
.gdo-dial__pole { fill: var(--gdo-text-secondary); font-size: var(--gdo-type-size-xs); font-family: var(--gdo-type-family-sans); }
.gdo-dial__center { fill: var(--gdo-text-muted); font-size: var(--gdo-type-size-lg); font-family: var(--gdo-type-family-mono); }
.gdo-dial--unknown .gdo-dial__ring,
.gdo-dial--unknown .gdo-dial__track { stroke: var(--gdo-text-muted); stroke-dasharray: 4 5; }
.gdo-dial--unknown .gdo-dial__track { stroke-width: 2; }
.gdo-dial--unknown .gdo-dial__head { fill: var(--gdo-text-muted); }
.gdo-dial__value {
  font-family: var(--gdo-type-family-mono);
  font-size: var(--gdo-type-size-sm);
}
.gdo-dial--unknown .gdo-dial__value {
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--gdo-type-size-xs);
}
.gdo-dial__caption {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-align: center;
  max-width: 12rem;
}

/* === GdoPolarityScale === */
.gdo-scale {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(6rem, 1fr) minmax(0, 9rem);
  align-items: center;
  gap: var(--gdo-space-1);
  font-family: var(--gdo-type-family-sans);
  color: var(--gdo-text-primary);
  min-width: 0;
}
.gdo-scale__title {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--gdo-space-1);
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-scale__title-btn {
  font: inherit;
  color: var(--gdo-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.gdo-scale__title-btn:hover { color: var(--gdo-link-hover); text-decoration: underline; }
.gdo-scale__title-btn:focus-visible { outline: none; box-shadow: var(--gdo-focus-ring); border-radius: var(--gdo-radius-1); }
.gdo-scale__value { font-family: var(--gdo-type-family-mono); font-size: var(--gdo-type-size-xs); color: var(--gdo-text-secondary); white-space: nowrap; }
.gdo-scale__pole {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
  line-height: var(--gdo-type-line-height-tight);
}
.gdo-scale__pole--end { text-align: right; }
.gdo-scale__track {
  position: relative;
  height: 1.25rem;
}
.gdo-scale__line {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 50%;
  border-top: 3px dotted var(--gdo-bg-action);
  transform: translateY(-50%);
}
.gdo-scale__arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  transform: translateY(-50%);
}
.gdo-scale__arrow--start { left: 0; border-right: 0.6rem solid var(--gdo-bg-action); }
.gdo-scale__arrow--end { right: 0; border-left: 0.6rem solid var(--gdo-bg-action); }
.gdo-scale__marker {
  position: absolute;
  top: 50%;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: var(--gdo-radius-full);
  background: var(--gdo-bg-action-alt);
  border: 2px solid var(--gdo-bg-page);
  box-shadow: var(--gdo-shadow-1);
  transform: translate(-50%, -50%);
}
.gdo-scale__unknown {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--gdo-space-05);
  background: var(--gdo-bg-page);
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px dashed var(--gdo-text-muted);
  border-radius: var(--gdo-radius-pill);
  white-space: nowrap;
}
.gdo-scale--unknown .gdo-scale__line { border-top: 2px dashed var(--gdo-text-muted); }
.gdo-scale--unknown .gdo-scale__arrow--start { border-right-color: var(--gdo-text-muted); }
.gdo-scale--unknown .gdo-scale__arrow--end { border-left-color: var(--gdo-text-muted); }
.gdo-scale--compact { grid-template-columns: minmax(4rem, 1fr) auto; gap: var(--gdo-space-05); }
.gdo-scale--compact .gdo-scale__track { height: 0.9rem; }
.gdo-scale--compact .gdo-scale__marker { width: 0.7rem; height: 0.7rem; }
.gdo-scale--compact .gdo-scale__arrow { display: none; }
.gdo-scale--compact .gdo-scale__line { left: 0; right: 0; }
.gdo-scale--compact .gdo-scale__unknown { font-size: var(--gdo-type-size-3xs); }
@media (max-width: 36rem) {
  .gdo-scale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gdo-scale__track { grid-column: 1 / -1; grid-row: 3; }
  .gdo-scale--compact { grid-template-columns: minmax(4rem, 1fr) auto; }
  .gdo-scale--compact .gdo-scale__track { grid-column: auto; grid-row: auto; }
}

/* === GdoProgress === */
.gdo-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--gdo-bg-surface-raised);
  border-radius: var(--gdo-radius-pill);
  overflow: hidden;
  position: relative;
}
.gdo-progress--sm { height: 0.25rem; }
.gdo-progress--lg { height: 0.75rem; }
.gdo-progress--xl { height: 1.25rem; }

/* Labeled variant — taller to show text inside */
.gdo-progress--labeled {
  height: 1.25rem;
}

.gdo-progress__bar {
  height: 100%;
  border-radius: var(--gdo-radius-pill);
  transition: width var(--gdo-motion-normal);
  background: linear-gradient(90deg, var(--gdo-bg-action), var(--gdo-bg-action-alt));
  background-size: 200% 200%;
  animation: gdo-gradient-shift 3s ease infinite;
  position: relative;
}
.gdo-progress--success .gdo-progress__bar { background: var(--gdo-status-success); animation: none; }
.gdo-progress--warning .gdo-progress__bar { background: var(--gdo-status-warning); animation: none; }
.gdo-progress--danger  .gdo-progress__bar { background: var(--gdo-status-danger);  animation: none; }
.gdo-progress--static  .gdo-progress__bar { animation: none; }

/* Striped variant — diagonal candy-stripe pattern */
.gdo-progress--striped .gdo-progress__bar {
  background-image:
    linear-gradient(90deg, var(--gdo-bg-action), var(--gdo-bg-action-alt)),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(255,255,255,0.15) 4px,
      rgba(255,255,255,0.15) 8px
    );
  background-size: 200% 200%, auto;
  animation: gdo-gradient-shift 3s ease infinite;
}
.gdo-progress--striped-animated .gdo-progress__bar {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.15) 4px,
    rgba(255,255,255,0.15) 8px
  ),
  linear-gradient(90deg, var(--gdo-bg-action), var(--gdo-bg-action-alt));
  animation: gdo-gradient-shift 3s ease infinite, gdo-progress-stripes 0.8s linear infinite;
}

/* Indeterminate — bouncing bar */
.gdo-progress--indeterminate .gdo-progress__bar {
  width: 35% !important;
  animation: gdo-progress-indeterminate 1.4s ease-in-out infinite;
}

@keyframes gdo-progress-stripes {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 16px 0, 200% 200%; }
}
@keyframes gdo-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(270%); }
  100% { transform: translateX(270%); }
}

/* Label inside the bar */
.gdo-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: var(--gdo-type-weight-medium);
  color: #ffffff;
  font-family: var(--gdo-type-family-sans);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  mix-blend-mode: normal;
}

/* Stacked progress container */
.gdo-progress-stack {
  display: flex;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--gdo-radius-pill);
  overflow: hidden;
}
.gdo-progress-stack__segment {
  height: 100%;
  transition: width var(--gdo-motion-normal);
}

/* External label row */
.gdo-progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-sans);
}
.gdo-progress-wrapper__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
}

/* @media prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gdo-progress__bar,
  .gdo-progress--indeterminate .gdo-progress__bar {
    animation: none;
    transition: none;
  }
}

/* === GdoProvenance === */
.gdo-provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gdo-space-1) var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-secondary);
}
.gdo-provenance__item { display: flex; flex-direction: column; min-width: 0; }
.gdo-provenance__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--gdo-type-size-2xs);
  color: var(--gdo-text-muted);
}
.gdo-provenance__value {
  font-family: var(--gdo-type-family-mono);
  color: var(--gdo-text-primary);
  overflow-wrap: anywhere;
}
.gdo-provenance__value--missing { color: var(--gdo-text-muted); font-style: italic; font-family: var(--gdo-type-family-sans); }
.gdo-provenance__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-05);
  padding: var(--gdo-space-05) var(--gdo-space-1);
  border-radius: var(--gdo-radius-pill);
  font-weight: var(--gdo-type-weight-semibold);
  border: 1px solid transparent;
  text-decoration: none;
  align-self: center;
}
.gdo-provenance__badge--unvalidated { background: var(--gdo-status-warning-bg); color: var(--gdo-status-warning); border-color: var(--gdo-status-warning-border); }
.gdo-provenance__badge--validated { background: var(--gdo-status-success-bg); color: var(--gdo-status-success); border-color: var(--gdo-status-success-border); }
.gdo-provenance__badge--unknown { background: var(--gdo-bg-surface-raised); color: var(--gdo-text-muted); border-color: var(--gdo-border); }
a.gdo-provenance__badge:hover { text-decoration: underline; }

/* === GdoPythonEditor === */
.gdo-pyed { position: relative; border: 1px solid var(--gdo-border-subtle);
  border-radius: var(--gdo-radius-1); background: var(--gdo-bg-surface); overflow: hidden; }
.gdo-pyed__pre, .gdo-pyed__ta {
  margin: 0; padding: var(--gdo-space-2);
  font-family: var(--gdo-type-family-mono); font-size: var(--gdo-type-size-xs);
  line-height: 1.5; tab-size: 4; white-space: pre; overflow: auto;
  border: 0; box-sizing: border-box;
  letter-spacing: normal; font-variant-ligatures: none; word-spacing: normal;
}
/* The highlighted layer must match the textarea metrics EXACTLY, or the
   selection drifts from the colors. Neutralize any global <code>/<pre> styles. */
.gdo-pyed__pre code {
  font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;
  background: none; padding: 0; margin: 0; white-space: inherit; tab-size: inherit;
}
.gdo-pyed__pre { position: absolute; inset: 0; pointer-events: none; color: var(--gdo-text-primary); }
.gdo-pyed__ta {
  position: relative; width: 100%; display: block; resize: vertical;
  background: transparent; color: transparent; caret-color: var(--gdo-text-primary);
  outline: none;
}
.gdo-pyed__ta::selection { background: var(--gdo-bg-action-soft, rgba(124,58,237,.25)); }
.gdo-pyed--readonly .gdo-pyed__ta { caret-color: transparent; }
.gdo-pyed--fill { height: 100%; }
.gdo-pyed--fill .gdo-pyed__ta { height: 100%; resize: none; }
/* Prism token colors (mirrors CodeViewer) */
.gdo-pyed .token.comment { color: var(--gdo-text-muted); font-style: italic; }
.gdo-pyed .token.string { color: var(--gdo-status-success); }
.gdo-pyed .token.keyword { color: var(--gdo-color-purple-600); font-weight: var(--gdo-type-weight-semibold); }
.gdo-pyed .token.function { color: var(--gdo-status-info); }
.gdo-pyed .token.number { color: var(--gdo-status-warning); }
.gdo-pyed .token.operator, .gdo-pyed .token.punctuation { color: var(--gdo-text-secondary); }
.gdo-pyed .token.builtin, .gdo-pyed .token.decorator { color: var(--gdo-status-info); }

/* === GdoScatter === */
.gdo-scatter__modes { display:flex; gap:var(--gdo-space-0); font-size:var(--gdo-type-size-xs); }
.gdo-scatter__modes button { font:inherit; min-height:28px; padding:0 var(--gdo-space-1); color:var(--gdo-text-primary); background:transparent; border:thin solid var(--gdo-border); border-radius:var(--gdo-radius-1); cursor:pointer; }
.gdo-scatter__modes button[aria-pressed="true"] { background:var(--gdo-bg-action-soft); color:var(--gdo-link); }
.gdo-scatter__modes button:focus-visible { outline:2px solid var(--gdo-link); outline-offset:2px; }
.gdo-scatter__plane { fill:var(--gdo-bg-surface); stroke:var(--gdo-border); cursor:crosshair; touch-action:none; }
.gdo-scatter__dot { stroke:var(--gdo-bg-page); stroke-width:0.5; pointer-events:none; }
.gdo-scatter__dot[data-dim] { opacity:0.25; }
.gdo-scatter__brush { fill:var(--gdo-link); fill-opacity:0.12; stroke:var(--gdo-link); stroke-dasharray:4 3; pointer-events:none; }
.gdo-scatter__axis { fill:var(--gdo-text-secondary); font-size:var(--gdo-type-size-xs); }

/* === GdoSearchInput === */
.gdo-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.gdo-search__icon {
  position: absolute;
  left: var(--gdo-space-1);
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-sm);
  pointer-events: none;
  line-height: 1;
}
.gdo-search__input {
  display: block;
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-1);
  padding-left: calc(var(--gdo-space-1) + 1.25em + var(--gdo-space-0));
  padding-right: calc(var(--gdo-space-1) + 1.25em + var(--gdo-space-0));
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  transition: border-color var(--gdo-motion-fast), box-shadow var(--gdo-motion-fast);
  line-height: 1.5;
}
.gdo-search__input:focus {
  outline: none;
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-search__input::placeholder {
  color: var(--gdo-text-muted);
}
.gdo-search__clear {
  position: absolute;
  right: var(--gdo-space-0);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-base);
  line-height: 1;
  padding: var(--gdo-space-0);
  border-radius: var(--gdo-radius-1);
  transition: color var(--gdo-motion-fast), background var(--gdo-motion-fast);
}
.gdo-search__clear:hover {
  color: var(--gdo-text-primary);
  background: var(--gdo-bg-surface);
}
.gdo-search__spinner {
  position: absolute;
  left: var(--gdo-space-1);
  width: 1em;
  height: 1em;
  border: 2px solid var(--gdo-border);
  border-top-color: var(--gdo-bg-action);
  border-radius: var(--gdo-radius-full);
  animation: gdo-spin 0.7s linear infinite;
  pointer-events: none;
}
.gdo-search__recents {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  box-shadow: var(--gdo-shadow-2);
  z-index: 100;
  overflow: hidden;
}
.gdo-search__recents-header {
  padding: var(--gdo-space-0) var(--gdo-space-1);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--gdo-border);
}
.gdo-search__recents-item {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-1);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  text-align: left;
  transition: background var(--gdo-motion-fast);
}
.gdo-search__recents-item:hover {
  background: var(--gdo-bg-surface);
}
.gdo-search__recents-item-icon {
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-xs);
  flex-shrink: 0;
}

/* === GdoSelect === */
/* ── Native select (default) ───────────────────────────────────────── */
.gdo-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.gdo-select {
  display: block;
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-5) var(--gdo-space-0) var(--gdo-space-1);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  background-color: var(--gdo-bg-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808080' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gdo-space-1) center;
  background-size: 10px;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--gdo-motion-fast), box-shadow var(--gdo-motion-fast);
  line-height: 1.5;
}
.gdo-select:focus {
  outline: none;
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-select:disabled,
.gdo-select--loading {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--gdo-bg-surface);
}
.gdo-select--error {
  border-color: var(--gdo-status-danger);
}
.gdo-select--sm {
  padding: 0.15rem var(--gdo-space-4) 0.15rem var(--gdo-space-0);
  font-size: var(--gdo-type-size-xs);
}
.gdo-select--lg {
  padding: var(--gdo-space-1) var(--gdo-space-5) var(--gdo-space-1) var(--gdo-space-3);
  font-size: var(--gdo-type-size-base);
}
/* Loading spinner overlay */
.gdo-select-wrap__spinner {
  position: absolute;
  right: var(--gdo-space-1);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--gdo-text-muted);
  font-size: 0.85em;
  animation: gdo-spin 0.8s linear infinite;
}
/* Clear button */
.gdo-select-wrap__clear {
  position: absolute;
  right: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gdo-text-muted);
  cursor: pointer;
  font-size: 0.85em;
  padding: 0 0.2em;
  line-height: 1;
  transition: color var(--gdo-motion-fast);
}
.gdo-select-wrap__clear:hover { color: var(--gdo-text-primary); }

/* ── Custom searchable dropdown ────────────────────────────────────── */
.gdo-select-custom {
  position: relative;
  display: block;
  width: 100%;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
}
.gdo-select-custom__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-1);
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  color: var(--gdo-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  transition: border-color var(--gdo-motion-fast), box-shadow var(--gdo-motion-fast);
  line-height: 1.5;
}
.gdo-select-custom__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdo-select-custom__trigger:focus {
  outline: none;
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-select-custom__trigger--open {
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-select-custom__trigger--placeholder {
  color: var(--gdo-text-muted);
}
.gdo-select-custom__trigger--error {
  border-color: var(--gdo-status-danger);
}
.gdo-select-custom__arrow {
  color: var(--gdo-text-muted);
  font-size: 0.75em;
  flex-shrink: 0;
  margin-left: var(--gdo-space-0);
  transition: transform var(--gdo-motion-fast);
}
.gdo-select-custom__trigger--open .gdo-select-custom__arrow {
  transform: rotate(180deg);
}
.gdo-select-custom__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  box-shadow: var(--gdo-shadow-3, 0 4px 16px rgba(0,0,0,0.18));
  z-index: 200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 240px;
}
.gdo-select-custom__search {
  padding: var(--gdo-space-0) var(--gdo-space-1);
  border-bottom: 1px solid var(--gdo-border);
  flex-shrink: 0;
}
.gdo-select-custom__search input {
  width: 100%;
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  color: var(--gdo-text-primary);
  font-family: inherit;
  font-size: inherit;
  padding: 0.2em 0.5em;
  outline: none;
  line-height: 1.5;
}
.gdo-select-custom__search input:focus {
  border-color: var(--gdo-bg-action);
  box-shadow: var(--gdo-focus-ring);
}
.gdo-select-custom__options {
  overflow-y: auto;
  flex: 1;
}
.gdo-select-custom__group-label {
  padding: var(--gdo-space-0) var(--gdo-space-1);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--gdo-bg-surface);
  border-bottom: 1px solid var(--gdo-border);
}
.gdo-select-custom__option {
  display: block;
  width: 100%;
  padding: var(--gdo-space-0) var(--gdo-space-1);
  background: none;
  border: none;
  color: var(--gdo-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  transition: background var(--gdo-motion-fast);
}
.gdo-select-custom__option:hover {
  background: var(--gdo-bg-surface);
}
.gdo-select-custom__option--selected {
  color: var(--gdo-link);
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-select-custom__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gdo-select-custom__option--empty {
  color: var(--gdo-text-muted);
  cursor: default;
  font-style: italic;
}
.gdo-select-custom__clear {
  position: absolute;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gdo-text-muted);
  cursor: pointer;
  font-size: 0.85em;
  padding: 0 0.2em;
  line-height: 1;
  transition: color var(--gdo-motion-fast);
}
.gdo-select-custom__clear:hover { color: var(--gdo-text-primary); }

/* === GdoSidebar === */
.gdo-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--gdo-bg-surface);
  border-right: 1px solid var(--gdo-border);
  width: 220px;
  overflow: hidden;
  font-family: var(--gdo-type-family-sans);
  flex-shrink: 0;
  transition: width 0.15s ease;
  position: relative;
}
.gdo-sidebar--collapsed {
  width: 56px;
}
.gdo-sidebar--hover-expanded {
  width: 220px;
}
.gdo-sidebar--right {
  border-right: none;
  border-left: 1px solid var(--gdo-border);
}
.gdo-sidebar__header {
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--gdo-border);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.gdo-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--gdo-space-1) 0;
}

/* Group labels — matches gdo-api sidebar */
.gdo-sidebar-group-label {
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-bold);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  margin-top: var(--gdo-space-0);
}
.gdo-sidebar--collapsed .gdo-sidebar-group-label {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
}

/* Section dividers (when items have a section property) */
.gdo-sidebar-section {
  display: contents;
}
.gdo-sidebar-section-divider {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-1) var(--gdo-space-3) var(--gdo-space-0);
  margin-top: var(--gdo-space-0);
}
.gdo-sidebar-section-divider__line {
  flex: 1;
  height: 1px;
  background: var(--gdo-border);
}
.gdo-sidebar-section-divider__label {
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-bold);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.gdo-sidebar--collapsed .gdo-sidebar-section-divider__label {
  display: none;
}
.gdo-sidebar--collapsed .gdo-sidebar-section-divider {
  padding: var(--gdo-space-0) 0;
}

/* Footer with live system pulse */
.gdo-sidebar__footer {
  border-top: 1px solid var(--gdo-border);
  padding: var(--gdo-space-1) 0;
  flex-shrink: 0;
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
}
.gdo-sidebar-pulse-row {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0.3rem var(--gdo-space-3);
}
.gdo-sidebar-pulse-icon {
  width: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.gdo-sidebar-pulse-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gdo-sidebar-pulse-value {
  margin-left: auto;
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-secondary);
  white-space: nowrap;
}
.gdo-sidebar--collapsed .gdo-sidebar-pulse-label,
.gdo-sidebar--collapsed .gdo-sidebar-pulse-value {
  display: none;
}
.gdo-sidebar--collapsed .gdo-sidebar-pulse-row {
  justify-content: center;
  padding: 0.3rem 0;
}

/* Resize handle */
.gdo-sidebar__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background var(--gdo-motion-fast);
  flex-shrink: 0;
}
.gdo-sidebar__resize-handle:hover,
.gdo-sidebar__resize-handle--dragging {
  background: var(--gdo-bg-action-alt);
  opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .gdo-sidebar {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    width: 220px;
  }
  .gdo-sidebar--mobile-open {
    transform: translateX(0);
  }
  .gdo-sidebar--collapsed {
    width: 220px;
    transform: translateX(-100%);
  }
}

/* === GdoSidebarItem === */
.gdo-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0.45rem var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  min-height: 2rem;
  border-left: 3px solid transparent;
  transition: all var(--gdo-motion-fast);
  position: relative;
  outline: none;
}
.gdo-sidebar-item:hover {
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-primary);
  text-decoration: none;
}
.gdo-sidebar-item:focus-visible {
  outline: var(--gdo-focus-ring-alt);
  outline-offset: -2px;
}

/* Active: left mauve border + tinted background — matches gdo-api */
.gdo-sidebar-item--active {
  border-left-color: var(--gdo-bg-action-alt);
  background: var(--gdo-bg-action-soft);
  color: var(--gdo-link-hover);
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-sidebar-item--active:hover {
  background: var(--gdo-bg-action-soft);
  filter: brightness(0.95);
}

/* Danger variant */
.gdo-sidebar-item--danger {
  color: var(--gdo-status-danger);
}
.gdo-sidebar-item--danger:hover {
  background: var(--gdo-status-danger-bg);
  color: var(--gdo-status-danger);
}

/* Draggable */
.gdo-sidebar-item--dragging {
  opacity: 0.5;
}

/* Icon wrapper (relative so activity dot can overlay) */
.gdo-sidebar-item__icon-wrap {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon */
.gdo-sidebar-item__icon {
  width: 1.4rem;
  height: 1.4rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.gdo-sidebar-item--active .gdo-sidebar-item__icon {
  opacity: 1;
}

/* Activity dot / count overlay */
.gdo-sidebar-item__activity {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  border-radius: var(--gdo-radius-pill);
  background: var(--gdo-status-danger);
  color: #ffffff;
  font-size: var(--gdo-type-size-4xs);
  font-weight: var(--gdo-type-weight-bold);
  line-height: 14px;
  text-align: center;
  padding: 0 2px;
  flex-shrink: 0;
}

/* Drag handle (shown on hover) */
.gdo-sidebar-item__drag-handle {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--gdo-text-muted);
  opacity: 0;
  cursor: grab;
  transition: opacity var(--gdo-motion-fast);
  line-height: 1;
  padding: 0 2px;
}
.gdo-sidebar-item:hover .gdo-sidebar-item__drag-handle {
  opacity: 1;
}

/* Label */
.gdo-sidebar-item__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge (e.g. session count) */
.gdo-sidebar-item__badge {
  margin-left: auto;
  font-size: var(--gdo-type-size-xs);
  background: var(--gdo-bg-action-alt);
  color: #ffffff;
  padding: 0.1rem 0.4rem;
  border-radius: var(--gdo-radius-pill);
  line-height: 1;
  flex-shrink: 0;
}

/* Chevron for sub-item toggle */
.gdo-sidebar-item__chevron {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--gdo-text-muted);
  transition: transform var(--gdo-motion-fast);
  line-height: 1;
}
.gdo-sidebar-item__chevron--open {
  transform: rotate(90deg);
}

/* Tooltip (shown in collapsed mode) */
.gdo-sidebar-item__tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--gdo-bg-page);
  color: var(--gdo-text-primary);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  box-shadow: var(--gdo-shadow-2);
  padding: 0.2rem 0.5rem;
  font-size: var(--gdo-type-size-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2000;
}
.gdo-sidebar--collapsed .gdo-sidebar-item:hover .gdo-sidebar-item__tooltip {
  display: block;
}

/* Collapsed: hide labels and badges */
.gdo-sidebar--collapsed .gdo-sidebar-item__label,
.gdo-sidebar--collapsed .gdo-sidebar-item__badge,
.gdo-sidebar--collapsed .gdo-sidebar-item__chevron,
.gdo-sidebar--collapsed .gdo-sidebar-item__drag-handle {
  display: none;
}
.gdo-sidebar--collapsed .gdo-sidebar-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
}

/* Sub-items list */
.gdo-sidebar-item__subitems {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.gdo-sidebar-item__sub {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0.35rem var(--gdo-space-3) 0.35rem calc(var(--gdo-space-3) + 1.4rem + var(--gdo-space-1));
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.8rem;
  border-left: 3px solid transparent;
  transition: all var(--gdo-motion-fast);
  outline: none;
}
.gdo-sidebar-item__sub:hover {
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-primary);
}
.gdo-sidebar-item__sub:focus-visible {
  outline: var(--gdo-focus-ring-alt);
  outline-offset: -2px;
}
.gdo-sidebar-item__sub--active {
  border-left-color: var(--gdo-bg-action-alt);
  background: var(--gdo-bg-action-soft);
  color: var(--gdo-link-hover);
  font-weight: var(--gdo-type-weight-medium);
}
.gdo-sidebar-item__sub-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}
.gdo-sidebar-item__sub-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdo-sidebar--collapsed .gdo-sidebar-item__subitems {
  display: none;
}

/* === GdoSkeleton === */
.gdo-skeleton {
  background: var(--gdo-bg-surface-raised);
  border-radius: var(--gdo-radius-2);
  animation: gdo-pulse-gentle 1.5s ease-in-out infinite;
}
.gdo-skeleton--no-shimmer {
  animation: none;
}
.gdo-skeleton--text {
  height: 0.875rem;
  width: 100%;
  border-radius: var(--gdo-radius-1);
}
.gdo-skeleton--card {
  height: 8rem;
  width: 100%;
  border-radius: var(--gdo-radius-3);
}
.gdo-skeleton--avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gdo-radius-full);
}
.gdo-skeleton--table-row {
  height: 2.25rem;
  width: 100%;
  border-radius: var(--gdo-radius-1);
}
.gdo-skeleton--circle {
  border-radius: var(--gdo-radius-full);
  width: 2rem;
  height: 2rem;
}
.gdo-skeleton + .gdo-skeleton {
  margin-top: var(--gdo-space-0);
}
.gdo-skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--gdo-space-0);
}
@media (prefers-reduced-motion: reduce) {
  .gdo-skeleton {
    animation-play-state: paused;
  }
}

/* === GdoSpinner === */
.gdo-spinner {
  display: inline-block;
  border-style: solid;
  border-radius: var(--gdo-radius-full);
  animation: gdo-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.gdo-spinner--sm  { width: 0.875rem; height: 0.875rem; border-width: 1.5px; }
.gdo-spinner--md  { width: 1.25rem;  height: 1.25rem;  border-width: 2px; }
.gdo-spinner--lg  { width: 2rem;     height: 2rem;     border-width: 3px; }
.gdo-spinner--purple {
  border-color: var(--gdo-bg-surface-raised);
  border-top-color: var(--gdo-bg-action);
}
.gdo-spinner--mauve {
  border-color: var(--gdo-bg-surface-raised);
  border-top-color: var(--gdo-bg-action-alt);
}
.gdo-spinner--muted {
  border-color: var(--gdo-border);
  border-top-color: var(--gdo-text-muted);
}
.gdo-spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}
.gdo-spinner-label {
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-secondary);
  line-height: 1;
}
.gdo-spinner-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gdo-space-1);
  background: rgba(var(--gdo-bg-page-rgb, 13, 17, 23), 0.6);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 10;
}

/* === GdoStatCard === */
/* Responsive grid wrapper for a row of stat cards (works for OWL-rendered
   GdoStatCard instances and server-rendered .gdo-stat-card markup alike). */
.gdo-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--gdo-space-3);
}

.gdo-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gdo-space-0);
  padding: var(--gdo-space-3) var(--gdo-space-4);
  background: var(--gdo-bg-surface);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-3);
  box-shadow: var(--gdo-shadow-1);
  text-align: center;
  font-family: var(--gdo-type-family-sans);
  transition: box-shadow var(--gdo-motion-fast), border-color var(--gdo-motion-fast),
              transform var(--gdo-motion-fast);
}
.gdo-stat-card--clickable {
  cursor: pointer;
}
.gdo-stat-card--clickable:hover {
  box-shadow: var(--gdo-shadow-2);
  border-color: var(--gdo-bg-action);
  transform: translateY(-2px);
}
.gdo-stat-card__icon {
  font-size: var(--gdo-type-size-2xl);
  line-height: 1;
}
.gdo-stat-card__value {
  font-size: var(--gdo-type-size-2xl);
  font-weight: var(--gdo-type-weight-bold);
  line-height: 1.2;
  color: var(--gdo-text-primary);
}
.gdo-stat-card__label {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gdo-stat-card--success .gdo-stat-card__icon,
.gdo-stat-card--success .gdo-stat-card__value { color: var(--gdo-status-success); }
.gdo-stat-card--warning .gdo-stat-card__icon,
.gdo-stat-card--warning .gdo-stat-card__value { color: var(--gdo-status-warning); }
.gdo-stat-card--danger .gdo-stat-card__icon,
.gdo-stat-card--danger .gdo-stat-card__value  { color: var(--gdo-status-danger); }
.gdo-stat-card--info .gdo-stat-card__icon,
.gdo-stat-card--info .gdo-stat-card__value    { color: var(--gdo-status-info); }
.gdo-stat-card--brand .gdo-stat-card__icon,
.gdo-stat-card--brand .gdo-stat-card__value   { color: var(--gdo-bg-action-alt); }

/* Trend */
.gdo-stat-card__trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-bold);
}
.gdo-stat-card__trend--up   { color: var(--gdo-status-success); }
.gdo-stat-card__trend--down { color: var(--gdo-status-danger); }
.gdo-stat-card__trend--flat { color: var(--gdo-text-muted); }
.gdo-stat-card__comparison {
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
}

/* Sparkline */
.gdo-stat-card__sparkline {
  width: 100%;
  height: 60px;
  display: block;
}

/* Loading shimmer */
.gdo-stat-card__shimmer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-stat-card__shimmer-line {
  background: linear-gradient(
    90deg,
    var(--gdo-bg-surface-raised) 25%,
    var(--gdo-border) 50%,
    var(--gdo-bg-surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: gdo-gradient-shift 1.4s ease infinite;
  border-radius: var(--gdo-radius-1);
}
.gdo-stat-card__shimmer-line--value {
  height: 2rem;
  width: 60%;
}
.gdo-stat-card__shimmer-line--label {
  height: 0.75rem;
  width: 40%;
}

/* === GdoStatusBar === */
.gdo-statusbar {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0 var(--gdo-space-3);
  height: 1.625rem;
  border-top: 1px solid var(--gdo-border);
  background: var(--gdo-bg-surface-raised);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  flex-shrink: 0;
  user-select: none;
  z-index: 100;
}

.gdo-statusbar__group {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  white-space: nowrap;
  flex-shrink: 0;
}

.gdo-statusbar__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--gdo-radius-full);
  flex-shrink: 0;
}
.gdo-statusbar__dot--connected    { background: var(--gdo-status-success); }
.gdo-statusbar__dot--connecting   { background: var(--gdo-status-warning); animation: gdo-pulse-gentle 1.5s infinite; }
.gdo-statusbar__dot--disconnected { background: var(--gdo-status-danger); }
.gdo-statusbar__dot--unknown      { background: var(--gdo-text-muted); }

.gdo-statusbar__reconnect {
  padding: 0 var(--gdo-space-0);
  font-size: var(--gdo-type-size-xs);
  font-family: var(--gdo-type-family-sans);
  background: none; border: none;
  color: var(--gdo-status-danger);
  cursor: pointer; text-decoration: underline;
}
.gdo-statusbar__reconnect:hover { opacity: 0.8; }

.gdo-statusbar__sep {
  width: 1px;
  height: 0.875rem;
  background: var(--gdo-border);
  flex-shrink: 0;
  margin: 0 var(--gdo-space-0);
}

.gdo-statusbar__label {
  color: var(--gdo-text-secondary);
}

.gdo-statusbar__sublabel {
  color: var(--gdo-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.gdo-statusbar__spacer {
  flex: 1;
  min-width: 0;
}

.gdo-statusbar__indicators {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
}

.gdo-statusbar__actions {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  flex-shrink: 0;
}

/* Notification badge */
.gdo-statusbar__notify-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--gdo-radius-pill);
  background: var(--gdo-status-danger);
  color: #ffffff;
  font-size: var(--gdo-type-size-4xs);
  font-weight: var(--gdo-type-weight-semibold);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.gdo-statusbar__notify-badge:hover { opacity: 0.85; }

/* Version badge */
.gdo-statusbar__version {
  padding: 1px 6px;
  background: rgba(89,61,108,0.12);
  color: var(--gdo-link);
  border-radius: var(--gdo-radius-pill);
  font-size: var(--gdo-type-size-4xs);
  flex-shrink: 0;
}

/* Theme indicator */
.gdo-statusbar__theme {
  color: var(--gdo-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.gdo-statusbar__theme:hover { color: var(--gdo-text-primary); }

/* === GdoStatusDot === */
.gdo-status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-secondary);
  white-space: nowrap;
  user-select: none;
}
.gdo-status-dot__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--gdo-radius-full);
  flex-shrink: 0;
  position: relative;
  transition: background var(--gdo-motion-fast);
}

/* Status variants */
.gdo-status-dot--healthy .gdo-status-dot__dot  { background: var(--gdo-status-success); }
.gdo-status-dot--warning .gdo-status-dot__dot  { background: var(--gdo-status-warning); }
.gdo-status-dot--danger .gdo-status-dot__dot   { background: var(--gdo-status-danger); }
.gdo-status-dot--unknown .gdo-status-dot__dot  { background: var(--gdo-text-muted); }
.gdo-status-dot--offline .gdo-status-dot__dot  { background: var(--gdo-border); }
.gdo-status-dot--connecting .gdo-status-dot__dot { background: var(--gdo-status-info); }

/* Pulse ring — outer glow animation */
.gdo-status-dot--pulse .gdo-status-dot__dot {
  animation: gdo-pulse-ring 1.5s ease infinite;
}
/* Connecting: faster pulse */
.gdo-status-dot--connecting .gdo-status-dot__dot {
  animation: gdo-pulse-gentle 0.8s ease-in-out infinite;
}

/* Size variants */
.gdo-status-dot--sm .gdo-status-dot__dot {
  width: 0.375rem;
  height: 0.375rem;
}
.gdo-status-dot--sm { font-size: var(--gdo-type-size-xs); gap: 4px; }

.gdo-status-dot--lg .gdo-status-dot__dot {
  width: 0.75rem;
  height: 0.75rem;
}
.gdo-status-dot--lg { font-size: var(--gdo-type-size-base); }

/* Clickable */
.gdo-status-dot--clickable {
  cursor: pointer;
  transition: opacity var(--gdo-motion-fast);
}
.gdo-status-dot--clickable:hover {
  opacity: 0.75;
}

/* Label secondary style */
.gdo-status-dot__label {
  line-height: 1;
}

/* Tooltip: shown via title attribute on the container */

/* === GdoSwitch === */
.gdo-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
  cursor: pointer;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  user-select: none;
  outline: none;
}
.gdo-switch:focus-visible .gdo-switch__track {
  box-shadow: var(--gdo-focus-ring);
}
.gdo-switch:has(.gdo-switch__input:disabled),
.gdo-switch--loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.gdo-switch--label-left {
  flex-direction: row-reverse;
}

/* Track sizing — md is default */
.gdo-switch__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--gdo-bg-surface-raised);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-pill);
  transition: background var(--gdo-motion-fast), border-color var(--gdo-motion-fast);
  flex-shrink: 0;
  overflow: hidden;
}
.gdo-switch--sm .gdo-switch__track {
  width: 1.75rem;
  height: 1rem;
}
.gdo-switch--lg .gdo-switch__track {
  width: 2.75rem;
  height: 1.5rem;
}

/* Thumb */
.gdo-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--gdo-text-muted);
  border-radius: var(--gdo-radius-full);
  transition: transform var(--gdo-motion-fast), background var(--gdo-motion-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.gdo-switch--sm .gdo-switch__thumb {
  width: 0.625rem;
  height: 0.625rem;
}
.gdo-switch--lg .gdo-switch__thumb {
  width: 1.125rem;
  height: 1.125rem;
}

/* On/Off labels inside track */
.gdo-switch__track-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5rem;
  font-weight: var(--gdo-type-weight-bold);
  letter-spacing: 0.02em;
  color: var(--gdo-text-muted);
  pointer-events: none;
  transition: opacity var(--gdo-motion-fast);
  line-height: 1;
}
.gdo-switch__track-label--on {
  left: 0.3rem;
  opacity: 0;
  color: #ffffff;
}
.gdo-switch__track-label--off {
  right: 0.3rem;
}

/* Loading spinner inside thumb */
.gdo-switch__thumb-spinner {
  width: 60%;
  height: 60%;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-top-color: #ffffff;
  border-radius: var(--gdo-radius-full);
  animation: gdo-spin 0.7s linear infinite;
}

/* Hidden real input */
.gdo-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checked states */
.gdo-switch__input:checked + .gdo-switch__track {
  background: var(--gdo-bg-action);
  border-color: var(--gdo-bg-action);
}
.gdo-switch--color-success .gdo-switch__input:checked + .gdo-switch__track {
  background: var(--gdo-status-success);
  border-color: var(--gdo-status-success);
}
.gdo-switch--color-warning .gdo-switch__input:checked + .gdo-switch__track {
  background: var(--gdo-status-warning);
  border-color: var(--gdo-status-warning);
}
.gdo-switch--color-danger .gdo-switch__input:checked + .gdo-switch__track {
  background: var(--gdo-status-danger);
  border-color: var(--gdo-status-danger);
}

.gdo-switch__input:checked + .gdo-switch__track .gdo-switch__thumb {
  transform: translateX(1rem);
  background: #ffffff;
}
.gdo-switch--sm .gdo-switch__input:checked + .gdo-switch__track .gdo-switch__thumb {
  transform: translateX(0.75rem);
}
.gdo-switch--lg .gdo-switch__input:checked + .gdo-switch__track .gdo-switch__thumb {
  transform: translateX(1.25rem);
}
.gdo-switch__input:checked + .gdo-switch__track .gdo-switch__track-label--on {
  opacity: 1;
}
.gdo-switch__input:checked + .gdo-switch__track .gdo-switch__track-label--off {
  opacity: 0;
}

/* === GdoTabPanel === */
.gdo-tab-panel {
  display: none;
}
.gdo-tab-panel--active {
  display: block;
}

/* Animated entry when panel becomes active */
.gdo-tab-panel--animated.gdo-tab-panel--active {
  animation: gdo-fade-in var(--gdo-motion-fast);
}

/* Fill variant: panel fills its container */
.gdo-tab-panel--fill {
  height: 100%;
  overflow: hidden;
}
.gdo-tab-panel--fill.gdo-tab-panel--active {
  display: flex;
  flex-direction: column;
}

/* Scrollable variant: panel manages its own overflow */
.gdo-tab-panel--scroll.gdo-tab-panel--active {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Padding variant */
.gdo-tab-panel--padded {
  padding: var(--gdo-space-3);
}

/* === GdoTable === */
.gdo-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.gdo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
}
.gdo-table thead th {
  text-align: left;
  padding: var(--gdo-space-0) var(--gdo-space-3);
  font-weight: var(--gdo-type-weight-medium);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--gdo-border);
  white-space: nowrap;
  background: var(--gdo-bg-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.gdo-table thead th.gdo-table__th--sortable {
  cursor: pointer;
  user-select: none;
}
.gdo-table thead th.gdo-table__th--sortable:hover {
  color: var(--gdo-text-primary);
}
.gdo-table__sort-arrow {
  margin-left: 4px;
  font-size: var(--gdo-type-size-3xs);
  color: var(--gdo-status-info);
}
.gdo-table td {
  padding: var(--gdo-space-0) var(--gdo-space-3);
  border-bottom: 1px solid var(--gdo-border);
  line-height: var(--gdo-type-line-height);
  position: relative;
}
.gdo-table tbody tr {
  position: relative;
}
.gdo-table tr.gdo-table__row--clickable {
  cursor: pointer;
  transition: background var(--gdo-motion-fast);
}
.gdo-table tr.gdo-table__row--clickable:hover,
.gdo-table tr.gdo-table__row--selected {
  background: var(--gdo-bg-surface);
}
/* Canonical selected-row indicator: action-colored accent bar on the left edge */
.gdo-table tr.gdo-table__row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gdo-bg-action);
}
.gdo-table__row-actions {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  gap: 4px;
  align-items: center;
}
.gdo-table tbody tr:hover .gdo-table__row-actions {
  display: flex;
}
.gdo-table__action-btn {
  background: var(--gdo-bg-surface-raised);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  color: var(--gdo-text-primary);
  cursor: pointer;
  font-size: var(--gdo-type-size-2xs);
  padding: 2px 6px;
  font-family: var(--gdo-type-family-sans);
}
.gdo-table__action-btn:hover { background: var(--gdo-bg-page); }
.gdo-table__empty {
  padding: var(--gdo-space-5) var(--gdo-space-3);
  text-align: center;
  color: var(--gdo-text-muted);
  font-size: var(--gdo-type-size-sm);
}
/* Skeleton shimmer */
@keyframes gdo-table-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.gdo-table__skeleton-cell {
  height: 14px;
  border-radius: var(--gdo-radius-1);
  background: linear-gradient(90deg, var(--gdo-bg-surface) 25%, var(--gdo-bg-surface-raised) 50%, var(--gdo-bg-surface) 75%);
  background-size: 400px 100%;
  animation: gdo-table-shimmer 1.2s ease infinite;
}
/* Pagination */
.gdo-table__pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gdo-space-1);
  padding: var(--gdo-space-0) var(--gdo-space-3);
  border-top: 1px solid var(--gdo-border);
  font-size: var(--gdo-type-size-xs);
  color: var(--gdo-text-muted);
  background: var(--gdo-bg-surface-raised);
}
.gdo-table__pagination button {
  background: none;
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-1);
  color: var(--gdo-text-primary);
  cursor: pointer;
  font-size: var(--gdo-type-size-2xs);
  padding: 2px 8px;
  font-family: var(--gdo-type-family-sans);
}
.gdo-table__pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.gdo-table__pagination button:not(:disabled):hover {
  background: var(--gdo-bg-surface);
}
/* Checkbox column */
.gdo-table__cb-cell {
  width: 32px;
  padding: var(--gdo-space-0) var(--gdo-space-1) !important;
}

/* === GdoTabs === */
.gdo-tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.gdo-tabs__strip {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--gdo-border);
  font-family: var(--gdo-type-family-sans);
  overflow-x: auto;
  scrollbar-width: thin;
}
.gdo-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gdo-space-0);
  padding: var(--gdo-space-1) var(--gdo-space-3);
  font-size: var(--gdo-type-size-sm);
  font-weight: var(--gdo-type-weight-medium);
  color: var(--gdo-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--gdo-motion-fast);
  white-space: nowrap;
  margin-bottom: -1px;
  flex-shrink: 0;
  position: relative;
}
.gdo-tabs__tab:hover {
  color: var(--gdo-text-primary);
}
.gdo-tabs__tab--active {
  color: var(--gdo-link);
}
.gdo-tabs__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.5em;
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-medium);
  border-radius: var(--gdo-radius-pill);
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-secondary);
  line-height: 1.4;
}
.gdo-tabs__tab--active .gdo-tabs__badge {
  background: var(--gdo-bg-action-soft);
  color: var(--gdo-link);
}
.gdo-tabs__item { display: inline-flex; align-items: center; flex-shrink: 0; }
.gdo-tabs__tab:focus-visible, .gdo-tabs__close:focus-visible, .gdo-tabs__add:focus-visible {
  box-shadow: var(--gdo-focus-ring);
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.gdo-tabs__tab:disabled { color: var(--gdo-text-muted); cursor: not-allowed; }
.gdo-tabs__help { grid-column: 1 / -1; color: var(--gdo-text-secondary); font-size: var(--gdo-type-size-xs); }
.gdo-tabs__add { color: var(--gdo-link); background: none; border: none; padding: var(--gdo-space-1); cursor: pointer; }
/* Close is a sibling of the tab, never nested inside its button. */
.gdo-tabs__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  background: none;
  border: none;
  border-radius: var(--gdo-radius-1);
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 0.85em;
  padding: 0;
  line-height: 1;
  transition: opacity var(--gdo-motion-fast), background var(--gdo-motion-fast);
}
.gdo-tabs__close:hover {
  opacity: 1;
  background: var(--gdo-bg-surface-raised);
}
/* Animated sliding indicator */
.gdo-tabs__indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--gdo-bg-action);
  border-radius: var(--gdo-radius-1) var(--gdo-radius-1) 0 0;
  transition: left var(--gdo-motion-fast), width var(--gdo-motion-fast);
  pointer-events: none;
}

/* === GdoTag === */
.gdo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15em 0.55em;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  font-weight: var(--gdo-type-weight-normal);
  border-radius: var(--gdo-radius-pill);
  background: var(--gdo-bg-surface-raised);
  color: var(--gdo-text-secondary);
  border: 1px solid var(--gdo-border);
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
}

/* Color variants */
.gdo-tag--success { background: var(--gdo-status-success-bg); color: var(--gdo-status-success); border-color: transparent; }
.gdo-tag--warning { background: var(--gdo-status-warning-bg); color: var(--gdo-status-warning); border-color: transparent; }
.gdo-tag--danger  { background: var(--gdo-status-danger-bg);  color: var(--gdo-status-danger);  border-color: transparent; }
.gdo-tag--info    { background: var(--gdo-status-info-bg);    color: var(--gdo-status-info);    border-color: transparent; }
.gdo-tag--brand   { background: var(--gdo-bg-action-soft);   color: var(--gdo-bg-action-alt);   border-color: transparent; }

/* Outline variant */
.gdo-tag--outline {
  background: transparent;
  border-color: currentColor;
  opacity: 0.85;
}

/* Solid/filled variant */
.gdo-tag--solid-success { background: var(--gdo-status-success); color: #ffffff; border-color: transparent; }
.gdo-tag--solid-warning { background: var(--gdo-status-warning); color: #ffffff; border-color: transparent; }
.gdo-tag--solid-danger  { background: var(--gdo-status-danger);  color: #ffffff; border-color: transparent; }
.gdo-tag--solid-brand   { background: var(--gdo-bg-action);  color: #ffffff; border-color: transparent; }

/* Clickable tag */
.gdo-tag--clickable {
  cursor: pointer;
  transition: opacity var(--gdo-motion-fast), transform var(--gdo-motion-fast);
}
.gdo-tag--clickable:hover {
  opacity: 0.8;
}
.gdo-tag--clickable:active {
  transform: scale(0.94);
}

/* Active (selected) state */
.gdo-tag--active {
  background: var(--gdo-bg-action);
  color: #ffffff;
  border-color: transparent;
}

/* Draggable tag */
.gdo-tag--draggable {
  cursor: grab;
}
.gdo-tag--draggable:active {
  cursor: grabbing;
  opacity: 0.7;
}

/* Remove button */
.gdo-tag__remove {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: currentColor;
  font-size: 1em;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--gdo-motion-fast);
  flex-shrink: 0;
}
.gdo-tag__remove:hover {
  opacity: 1;
  color: var(--gdo-status-danger);
}

/* Icon */
.gdo-tag__icon {
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
}

/* Size variants */
.gdo-tag--sm {
  font-size: 0.65rem;
  padding: 0.08em 0.4em;
}
.gdo-tag--lg {
  font-size: var(--gdo-type-size-sm);
  padding: 0.25em 0.75em;
}

/* === GdoTimeline === */
.gdo-timeline__plane { fill:var(--gdo-bg-surface); stroke:var(--gdo-border); cursor:col-resize; touch-action:none; }
.gdo-timeline__zero { stroke:var(--gdo-border); stroke-dasharray:2 3; }
.gdo-timeline__dot { stroke:var(--gdo-bg-page); stroke-width:0.5; pointer-events:none; }
.gdo-timeline__line { fill:none; stroke:var(--gdo-text-primary); stroke-width:1.5; pointer-events:none; }
.gdo-timeline__brush { fill:var(--gdo-link); fill-opacity:0.14; stroke:var(--gdo-link); pointer-events:none; }
.gdo-timeline__tick { fill:var(--gdo-text-secondary); font-size:var(--gdo-type-size-xs); }
.gdo-timeline__clear { font:inherit; font-size:var(--gdo-type-size-xs); min-height:28px; color:var(--gdo-link); background:transparent; border:0; text-decoration:underline; cursor:pointer; justify-self:start; }

/* === GdoTopbar === */
.gdo-topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--gdo-bg-action-alt) 0%, var(--gdo-bg-action) 100%);
  color: #ffffff;
  font-family: var(--gdo-type-family-sans);
  flex-shrink: 0;
  z-index: 1050;
}

/* Main bar row */
.gdo-topbar__bar {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  height: 48px;
  padding: 0 var(--gdo-space-3);
}

/* Hamburger toggle */
.gdo-topbar__toggle {
  background: none;
  border: none;
  color: var(--gdo-topbar-text);
  font-size: 1.25rem;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: var(--gdo-radius-1);
  transition: background var(--gdo-motion-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.gdo-topbar__toggle:hover {
  background: var(--gdo-topbar-hover-bg);
  color: #ffffff;
}

/* Brand */
.gdo-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  font-weight: var(--gdo-type-weight-bold);
  font-size: var(--gdo-type-size-lg);
  color: #ffffff;
  text-decoration: none;
  letter-spacing: var(--gdo-type-letter-spacing);
}
.gdo-topbar__brand:hover {
  color: var(--gdo-topbar-text);
  text-decoration: none;
}
.gdo-topbar__brand img {
  height: 28px;
  width: auto;
}

/* Active app indicator */
.gdo-topbar__active-app {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
  font-size: var(--gdo-type-size-xs);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.15);
  border-radius: var(--gdo-radius-pill);
  padding: 0.15rem 0.5rem;
  margin-left: var(--gdo-space-0);
  flex-shrink: 0;
}
.gdo-topbar__active-app-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

/* Workspace name */
.gdo-topbar__workspace {
  color: var(--gdo-topbar-text-muted);
  font-size: var(--gdo-type-size-sm);
  margin-left: var(--gdo-space-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.gdo-topbar__spacer {
  flex: 1;
}

/* Actions area */
.gdo-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
}

/* Search expand area */
.gdo-topbar__search-expand {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
}
.gdo-topbar__search-input {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--gdo-radius-1);
  color: #ffffff;
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  padding: 0.25rem 0.5rem;
  outline: none;
  width: 180px;
  transition: all var(--gdo-motion-fast);
}
.gdo-topbar__search-input::placeholder {
  color: rgba(255,255,255,0.55);
}
.gdo-topbar__search-input:focus {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.6);
  width: 220px;
}

/* Action button — shared style for topbar icon buttons */
.gdo-topbar-btn {
  background: none;
  border: none;
  color: var(--gdo-topbar-text);
  font-size: 1.1rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: var(--gdo-radius-1);
  transition: all var(--gdo-motion-fast);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.gdo-topbar-btn:hover {
  background: var(--gdo-topbar-hover-bg);
  color: #ffffff;
}

/* Badge dot on action buttons */
.gdo-topbar-btn__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: var(--gdo-radius-full, 50%);
  background: var(--gdo-status-danger);
}

/* Notification count badge (pill) */
.gdo-topbar-btn__count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--gdo-radius-pill);
  background: var(--gdo-status-danger);
  color: #ffffff;
  font-size: var(--gdo-type-size-3xs);
  font-weight: var(--gdo-type-weight-bold);
  line-height: 16px;
  padding: 0 3px;
  text-align: center;
}

/* Overflow dropdown */
.gdo-topbar__overflow-wrapper {
  position: relative;
}
.gdo-topbar__overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--gdo-bg-page);
  border: 1px solid var(--gdo-border);
  border-radius: var(--gdo-radius-2);
  box-shadow: var(--gdo-shadow-3);
  min-width: 160px;
  z-index: 1100;
  overflow: hidden;
}
.gdo-topbar__overflow-item {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-1);
  padding: 0.5rem var(--gdo-space-3);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-sm);
  color: var(--gdo-text-primary);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--gdo-motion-fast);
}
.gdo-topbar__overflow-item:hover {
  background: var(--gdo-bg-surface-raised);
}
.gdo-topbar__overflow-item-icon {
  flex-shrink: 0;
  opacity: 0.75;
}

/* Divider between action groups */
.gdo-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--gdo-topbar-divider);
  margin: 0 var(--gdo-space-0);
  flex-shrink: 0;
}

/* Nav slot */
.gdo-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--gdo-space-0);
}

/* Breadcrumb row */
.gdo-topbar__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 var(--gdo-space-3);
  height: 26px;
  background: rgba(0,0,0,0.12);
  font-size: var(--gdo-type-size-xs);
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  flex-shrink: 0;
}
.gdo-topbar__crumb {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-family: var(--gdo-type-family-sans);
  font-size: var(--gdo-type-size-xs);
  padding: 0;
  cursor: pointer;
  transition: color var(--gdo-motion-fast);
  white-space: nowrap;
}
.gdo-topbar__crumb:hover {
  color: #ffffff;
  text-decoration: underline;
}
.gdo-topbar__crumb--current {
  color: #ffffff;
  font-weight: var(--gdo-type-weight-medium);
  cursor: default;
}
.gdo-topbar__crumb--current:hover {
  text-decoration: none;
}
.gdo-topbar__crumb-sep {
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  user-select: none;
}

/* Connection status indicators */
.gdo-topbar-btn.gdo-status-connected { color: var(--gdo-status-success); }
.gdo-topbar-btn.gdo-status-disconnected { color: var(--gdo-topbar-text-muted); }
.gdo-topbar-btn.mcp-inactive { opacity: var(--gdo-state-disabled-opacity); }
.gdo-topbar-btn.mcp-inactive:hover { opacity: 0.7; }

/* === GdoViolin3D === */
.gdo-violin-frame { --gdo-violin-frame-h:5rem; --gdo-violin-axis-w:2.5rem; --gdo-violin-body:calc(1.618 / 2.618 * 100%); display:flex; flex-direction:column; gap:var(--gdo-space-1); width:100%; color:var(--gdo-text-primary); font-family:var(--gdo-type-family-sans); }
.gdo-violin-frame__body { display:flex; align-items:flex-start; min-width:0; }
.gdo-violin-frame__scale { flex:none; position:relative; width:3.25rem; height:var(--gdo-violin-frame-h); font-size:var(--gdo-type-size-xs); color:var(--gdo-text-muted); }
.gdo-violin-frame__scale span { position:absolute; inset-inline-start:0; line-height:1; }
.gdo-violin-frame__scale span:nth-child(1) { top:0; }
.gdo-violin-frame__scale span:nth-child(2) { top:50%; transform:translateY(-50%); }
.gdo-violin-frame__scale span:nth-child(3) { bottom:0; }
.gdo-violin-frame__scroll { flex:1 1 auto; min-width:0; }
.gdo-violin-frame__row { position:relative; display:flex; width:max-content; min-width:100%; }
.gdo-violin-frame__zero { position:absolute; inset-inline:0; top:calc(var(--gdo-violin-frame-h) / 2); border-top:1px dashed var(--gdo-border); opacity:.7; pointer-events:none; }
.gdo-violin-frame__axis { appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; flex:1 1 var(--gdo-violin-axis-w); min-width:var(--gdo-violin-axis-w); max-width:calc(var(--gdo-violin-axis-w) * 2); display:flex; flex-direction:column; align-items:center; border-radius:var(--gdo-radius-3); transition:opacity .18s ease; }
.gdo-violin-frame__axis:focus-visible { outline:2px solid var(--gdo-link); outline-offset:-2px; }
.gdo-violin-frame[data-raised] .gdo-violin-frame__axis:not([data-raised]) { opacity:.6; }
.gdo-violin-frame__svg { display:block; width:var(--gdo-violin-body); margin-inline:auto; height:var(--gdo-violin-frame-h); overflow:visible; }
.gdo-violin-frame__line { stroke:var(--gdo-border); stroke-width:1; vector-effect:non-scaling-stroke; }
.gdo-violin-frame__edge { stroke:var(--gdo-text-primary); stroke-opacity:.28; stroke-width:.6; vector-effect:non-scaling-stroke; }
.gdo-violin-frame__outline { fill:none; stroke:var(--gdo-text-primary); stroke-opacity:.5; stroke-width:1; vector-effect:non-scaling-stroke; }
.gdo-violin-frame__axis[data-raised] .gdo-violin-frame__outline { stroke-opacity:.85; stroke-width:1.5; }
.gdo-violin-frame__mean { stroke:var(--gdo-text-primary); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.gdo-violin-frame__chain { fill:none; stroke:var(--gdo-status-warning); stroke-opacity:.6; stroke-width:1; vector-effect:non-scaling-stroke; }
.gdo-violin-frame__dot, .gdo-violin-frame__arrow { fill:var(--gdo-status-warning); stroke:var(--gdo-bg-surface); stroke-width:.4; }
.gdo-violin-frame__mark { opacity:0; pointer-events:none; transition:opacity .18s ease; }
.gdo-violin-frame__axis[data-raised] .gdo-violin-frame__mark { opacity:.95; }
.gdo-violin-frame__label { max-width:100%; padding:var(--gdo-space-1) 0 0; font-size:var(--gdo-type-size-xs); line-height:1.15; text-align:center; overflow-wrap:anywhere; color:var(--gdo-text-secondary); }
.gdo-violin-frame__axis[data-raised] .gdo-violin-frame__label { color:var(--gdo-link); font-weight:var(--gdo-type-weight-medium); }
.gdo-violin-frame__note { color:var(--gdo-text-muted); font-style:italic; }
.gdo-violin-frame__key { display:flex; flex-wrap:wrap; gap:0 var(--gdo-space-2); margin:0; padding:0; list-style:none; font-size:var(--gdo-type-size-xs); color:var(--gdo-text-secondary); }
@media (prefers-reduced-motion: reduce) { .gdo-violin-frame__axis, .gdo-violin-frame__mark { transition:none; } }

/* === CapacityInstrument === */
.gdo-capacity-curve { width: 100%; aspect-ratio: 3 / 1; display: block; }
.gdo-capacity-instrument { min-width: 0; color: var(--gdo-text-primary); }
.gdo-capacity-instrument .gdo-tui-table { max-width: 100%; }
.gdo-capacity-instrument .gdo-tui-table-cell { white-space: normal; overflow-wrap: anywhere; }


/* gdo-tui.scss — the browser rasterizer's cell grid for the TUI primitives. */
/* */
/* The primitives (src/primitives/**) are one OWL tree that paints two ways: the */
/* terminal lays it out in integer cells from its data-tui-* attributes, the */
/* browser from CSS. These rules make the browser follow the terminal's layout */
/* rules (docs/tui/DESIGN.md "Layout engine") and draw what the terminal draws, */
/* keyed only on the classes and data-tui-* attributes the primitives already */
/* emit. Every rule is theme-neutral: the look switches through tokens, so the */
/* `terminal` theme record (themes/terminal.json) turns the grid on without any */
/* selector knowing a theme exists. */
/* */
/* The switches are four space tokens (tokens.json primitive.space): */
/*   frame-x / frame-y  the ring a bordered box reserves for its glyph border */
/*   stroke             the weight of the glyph line drawn through that ring */
/*   hairline           the CSS rule drawn when no ring is reserved */
/* Default: frame 0, stroke 0, hairline 1px, so a box keeps a one-pixel rule. */
/* Terminal: frame one cell, stroke 1px, hairline 0, so a box border costs */
/* exactly the one-cell ring the terminal paints ┌─┐│└┘ into. */
/* */
/* The primitives inject their own CSS at mount, after this sheet loads, so */
/* every selector here carries the data-tui attribute as well as the class to */
/* win on specificity rather than on load order. */

/* ── host viewport ─────────────────────────────────────────────────────────── */
/* A host mounting a TUI app in the browser gives it a cols x rows viewport and */
/* this class; the app's root element then spans it, as the terminal arranges */
/* the root at (0, 0, cols, rows). */
.gdo-tui-viewport {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--gdo-type-family-mono);
  font-size: var(--gdo-type-size-base);
  line-height: var(--gdo-type-line-height);
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  background: var(--gdo-bg-page);
  color: var(--gdo-text-primary);
}
.gdo-tui-viewport > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── box ───────────────────────────────────────────────────────────────────── */
/* The terminal lays a box's children out as a stretched column and never */
/* shrinks them to fit; overflow is clipped. */
.gdo-tui-box[data-tui="box"] {
  display: flex;
  flex-direction: column;
}
.gdo-tui-box[data-tui="box"] > :not(.gdo-tui-box__title) {
  flex-shrink: 0;
}

/* The frame ring is a transparent border, so the box's own background fills */
/* it (the terminal fills a box's whole rect, border included) and the inline */
/* cell padding is untouched. The hairline is an inset shadow, so it costs no */
/* layout space in either theme. */
.gdo-tui-box[data-tui="box"]:is([data-tui-border="line"], [data-tui-border="double"], [data-tui-border="round"]) {
  border-style: solid;
  border-color: transparent;
  border-width: var(--gdo-space-frame-y) var(--gdo-space-frame-x);
  box-shadow: inset 0 0 0 var(--gdo-space-hairline) var(--gdo-border);
}
.gdo-tui-box[data-tui="box"][data-tui-border="double"] {
  box-shadow:
    inset 0 0 0 var(--gdo-space-hairline) var(--gdo-border),
    inset 0 0 0 calc(var(--gdo-space-hairline) * 2) var(--gdo-bg-page),
    inset 0 0 0 calc(var(--gdo-space-hairline) * 3) var(--gdo-border);
}

/* The glyph border: a line through the centre of the frame ring, which is the */
/* geometry of the box-drawing glyphs themselves (─ │ run through the middle of */
/* their cell and meet at ┌ ┐ └ ┘). It is drawn, not typed, so a screen reader */
/* and the clipboard never meet a row of U+2500s and all four corners land */
/* exactly (a box has two pseudo-elements, and text anchors only one corner). */
.gdo-tui-box[data-tui="box"]:is([data-tui-border="line"], [data-tui-border="double"], [data-tui-border="round"])::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: calc(var(--gdo-space-frame-y) / -2) calc(var(--gdo-space-frame-x) / -2);
  border: var(--gdo-space-stroke) solid var(--gdo-border);
}
/* ═ ║ ╔: two strokes a stroke apart, centred on the ring. */
.gdo-tui-box[data-tui="box"][data-tui-border="double"]::before {
  inset: calc(var(--gdo-space-frame-y) / -2 - var(--gdo-space-stroke)) calc(var(--gdo-space-frame-x) / -2 - var(--gdo-space-stroke));
  border-style: double;
  border-width: calc(var(--gdo-space-stroke) * 3);
}
/* ╭ ╮ ╰ ╯: a quarter arc of half a cell. */
.gdo-tui-box[data-tui="box"][data-tui-border="round"]::before {
  border-radius: calc(var(--gdo-space-frame-x) / 2);
}

/* The title sits ON the border line, starting one cell in, as the terminal */
/* writes it over the top edge at (x + 1, y). The default theme keeps the */
/* straddling label it always had; the terminal theme lands it in the ring row. */
.gdo-tui-box[data-tui="box"] > .gdo-tui-box__title[data-tui-chrome] {
  top: calc(var(--gdo-space-frame-y) / -2 - var(--gdo-space-cell-h) / 2);
  left: calc(var(--gdo-space-cell-w) - var(--gdo-space-frame-x));
  max-width: calc(100% + 2 * var(--gdo-space-frame-x) - 2 * var(--gdo-space-cell-w));
  padding: 0 calc(var(--gdo-space-hairline) * 4);
  line-height: var(--gdo-space-cell-h);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}

/* ── grow and fill ─────────────────────────────────────────────────────────── */
/* The terminal adds each grow child's equal share of the leftover to its */
/* natural size, which is flex-basis auto, not 0%. */
.gdo-tui-stack[data-tui="stack"][data-tui-grow],
.gdo-tui-box[data-tui="box"][data-tui-grow],
.gdo-tui-text[data-tui="text"][data-tui-grow] {
  flex: 1 1 auto;
}
/* A fill box grows along its stack's main axis (layout.js isMainAxisFill). */
.gdo-tui-stack[data-tui-dir="row"] > .gdo-tui-box[data-tui="box"][data-tui-w="fill"] {
  flex: 1 1 auto;
  width: auto;
}
.gdo-tui-stack[data-tui-dir="column"] > .gdo-tui-box[data-tui="box"][data-tui-h="fill"] {
  flex: 1 1 auto;
  height: auto;
}

/* ── text ──────────────────────────────────────────────────────────────────── */
/* A wrapping text is at least one row even when empty, as the terminal */
/* measures it (layout.js measureText). */
.gdo-tui-text[data-tui="text"][data-tui-wrap="wrap"] {
  min-height: 1lh;
}

/* ── focusable ─────────────────────────────────────────────────────────────── */
/* The terminal treats a focusable as a transparent column container. */
.gdo-tui-focusable[data-tui="focusable"] {
  display: flex;
  flex-direction: column;
}

/* ── key ───────────────────────────────────────────────────────────────────── */
/* The terminal paints "q quit": the key, one cell, the description. The chip */
/* keeps its rule and wash only while a hairline is drawn; the wash is an inset */
/* shadow sized from the hairline so it disappears with it. */
.gdo-tui-key[data-tui="key"] {
  gap: var(--gdo-space-cell-w);
}
.gdo-tui-key[data-tui="key"] > .gdo-tui-key__chip {
  padding: 0 calc(var(--gdo-space-hairline) * 4);
  border-width: var(--gdo-space-hairline);
  background: transparent;
  box-shadow: inset 0 0 0 calc(var(--gdo-space-hairline) * 100) var(--gdo-bg-surface-raised);
}

/* ── table ─────────────────────────────────────────────────────────────────── */
/* The terminal sizes an auto column to its widest cell across every row, so */
/* the browser lays the rows out as one CSS table (per-row flex boxes size each */
/* row alone). Columns sit one cell apart; a fill column takes the rest. */
.gdo-tui-table[data-tui="table"] {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.gdo-tui-table[data-tui="table"] > .gdo-tui-table__header,
.gdo-tui-table[data-tui="table"] > [data-tui="row"] {
  display: table-row;
}
.gdo-tui-table[data-tui="table"] > .gdo-tui-table__header {
  text-transform: none;
}
.gdo-tui-table[data-tui="table"] .gdo-tui-table-cell {
  display: table-cell;
  box-sizing: content-box;
  padding: 0;
}
.gdo-tui-table[data-tui="table"] .gdo-tui-table-cell + .gdo-tui-table-cell {
  padding-left: var(--gdo-space-cell-w);
}
/* An auto column is as wide as its widest cell and no wider, so the table's */
/* spare width can only go to the fill column(s) — the one width:auto track */
/* left. (A percentage on the fill cell instead makes Chrome squeeze the fixed */
/* columns below their declared width.) */
.gdo-tui-table[data-tui="table"] .gdo-tui-table-cell:not(.gdo-tui-table-cell--fill):not([style*="width"]) {
  width: 1px;
}
/* The terminal paints a selected row in the selection role's ink over its */
/* wash (paint.js paintTable, roles.js `selection`). */
.gdo-tui-table[data-tui="table"] > .gdo-tui-table-row--selected {
  color: var(--gdo-link);
}
.gdo-tui-table[data-tui="table"] > .gdo-tui-table__header > .gdo-tui-table-cell {
  box-shadow: inset 0 calc(var(--gdo-space-hairline) * -1) 0 var(--gdo-border);
}
.gdo-tui-table[data-tui="table"] > .gdo-tui-table__empty {
  display: table-caption;
  caption-side: bottom;
}

/* ── tree ──────────────────────────────────────────────────────────────────── */
/* The terminal reads a GdoTree as a table (data-tui="table") whose cells are */
/* each cell's text run together: indent, expander, state glyph, label and */
/* sublabel with no gaps, one row per node, a fill node column and auto */
/* state/chips columns one cell apart. The browser lays it out the same way. */
.gdo-tui-tree[data-tui="table"] {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.gdo-tui-tree[data-tui="table"] > [data-tui="row"] {
  display: table-row;
}
.gdo-tui-tree[data-tui="table"] > .gdo-tui-tree-row--selected {
  color: var(--gdo-link);
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-cell {
  display: table-cell;
  box-sizing: content-box;
  padding: 0;
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-cell + .gdo-tui-tree-cell {
  padding-left: var(--gdo-space-cell-w);
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-cell:not(.gdo-tui-tree-cell--node) {
  width: 1px;
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-expander {
  width: auto;
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-chip {
  padding: 0 calc(var(--gdo-space-hairline) * 4);
  margin-right: calc(var(--gdo-space-hairline) * 4);
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-actions {
  display: inline;
}
.gdo-tui-tree[data-tui="table"] .gdo-tui-tree-action {
  padding: 0 calc(var(--gdo-space-hairline) * 4);
  border-width: var(--gdo-space-hairline);
}

/* ── graph ─────────────────────────────────────────────────────────────────── */
/* The canvas is browser-only chrome; it follows the same rule/stroke switch. */
.gdo-tui-graph > .gdo-tui-graph-canvas[data-tui-chrome] {
  border-width: max(var(--gdo-space-hairline), var(--gdo-space-stroke));
}