/* ==========================================================================
   GEMBA x SMOOTHUI — Component & Responsive Layout Stylesheet (smoothui.css)
   Zero raw hex literals: 100% driven by 3-layer --gem-* custom properties.
   Desktop (1440px) & Mobile (375px) responsive parity with >=44x44px targets.
   ========================================================================== */

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

[hidden] {
  display: none !important;
}

html,
body,
.app-shell {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--gem-font);
  font-size: var(--gem-body-size);
  line-height: var(--gem-body-lh);
  font-variant-numeric: tabular-nums;
  background: var(--gem-bg);
  color: var(--gem-fg1);
  transition: background-color var(--gem-dur) var(--gem-ease-out), color var(--gem-dur) var(--gem-ease-out);
  -webkit-font-smoothing: antialiased;
}

code,
pre,
.mono {
  font-family: var(--gem-font-mono);
  font-variant-numeric: tabular-nums;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--gem-ring);
}

/* --------------------------------------------------------------------------
   Touch Target & Interactive Ergonomics Contract (Compact Desktop + >= 44x44px Mobile, T42)
   Gemba Desktop + SmoothUI Pill Geometry & Spring Physics
   -------------------------------------------------------------------------- */
.btn,
.nav-item,
.tab-btn,
.collapse-trigger,
.seed-pill,
.kanban-action-btn,
.modal-close-btn,
.mobile-nav-btn,
.lens-tab-btn,
.icon-touch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0 12px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.collapse-trigger,
.modal-close-btn,
.icon-touch-btn {
  width: 32px;
  padding: 0;
}

.btn:hover:not(:disabled),
.nav-item:hover,
.tab-btn:hover,
.collapse-trigger:hover,
.seed-pill:hover,
.kanban-action-btn:hover,
.modal-close-btn:hover,
.mobile-nav-btn:hover,
.lens-tab-btn:hover {
  background: var(--gem-surface-hover);
  border-color: var(--gem-border-strong);
}

.btn:active:not(:disabled),
.seed-pill:active,
.kanban-action-btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border-color: var(--gem-btn-primary);
  box-shadow: var(--gem-highlight), var(--gem-shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--gem-btn-primary-hover);
  color: var(--gem-on-primary);
  border-color: var(--gem-btn-primary-hover);
}

.btn-emph {
  background: var(--gem-btn-emph);
  color: var(--gem-fg1);
}

.btn-subdued {
  background: var(--gem-btn-subdued);
  color: var(--gem-fg2);
}

.btn-danger {
  background: var(--gem-critical-soft);
  color: var(--gem-critical);
  border-color: var(--gem-critical);
}

/* --------------------------------------------------------------------------
   App Shell Grid: Left Sidebar + Sticky Header + Workspace Canvas
   -------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 224px) minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell[data-sidebar-collapsed="true"] {
  grid-template-columns: 60px minmax(0, 1fr);
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: 12px;
  background: var(--gem-surface);
  border-right: 1px solid var(--gem-border);
  min-height: 100vh;
  z-index: 15;
}

.dk-sidebar-surface {
  background: var(--gem-surface);
  border-right: 1px solid var(--gem-border);
}

.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gem-border);
}

.gemba-logo-lockup {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-width: 0;
}

.gemba-wordmark-svg {
  height: 18px;
  width: auto;
  color: var(--gem-brand);
  display: block;
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-width: 0;
}

.brand-logo-canvas {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  flex-shrink: 0;
}

.brand-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-name-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--gem-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-assistant-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--gem-accent);
  background: var(--gem-accent-soft);
  padding: 1px 7px;
  border-radius: var(--gem-radius-pill);
  font-weight: 700;
}

.sidebar-nav,
.dk-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dk-nav-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36px;
  background: var(--gem-surface);
  border-radius: var(--gem-radius-pill);
  box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    height var(--gem-dur-spring) var(--gem-spring);
  pointer-events: none;
  z-index: 0;
}

.dk-nav-thumb::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--gem-btn-primary);
}

.nav-item,
.dk-nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 36px;
  min-height: 36px;
  border-radius: var(--gem-radius-pill);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--gem-fg2);
  text-align: left;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.dk-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

.dk-nav-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.dk-nav-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  color: var(--gem-fg2);
  border: 1px solid transparent;
}

.nav-item.active,
.nav-item[aria-current="page"],
.dk-nav-item.active,
.dk-nav-item[aria-current="page"] {
  background: transparent;
  color: var(--gem-fg1);
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
}

.dk-nav-item.active .dk-nav-count {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border-color: transparent;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.app-topbar,
.dk-header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  min-height: 52px;
  padding: 6px 16px;
  background: var(--gem-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--gem-border);
}

.dk-header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dk-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px 0 12px;
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  color: var(--gem-fg2);
  font-size: 12.5px;
}

.dk-kbd {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  font-family: var(--gem-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gem-fg3);
}

.dk-tenant-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  font-size: 12px;
  font-weight: 700;
}

.dk-tenant-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-success);
  box-shadow: 0 0 0 3px var(--gem-success-soft);
  flex-shrink: 0;
}

.dk-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 12px 16px 0;
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  overflow: hidden;
}

@media (max-width: 1024px) {
  .dk-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 10px 12px 0;
  }
}

@media (max-width: 639px) {
  .dk-kpi-strip {
    grid-template-columns: 1fr;
    margin: 10px 12px 0;
  }
}

.dk-kpi-card {
  background: transparent;
  border: none;
  border-left: 1px solid var(--gem-border);
  border-radius: 0;
  padding: 12px 16px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dk-kpi-card:first-child {
  border-left: none;
}

.dk-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gem-fg3);
}

.dk-kpi-value {
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gem-fg1);
  letter-spacing: -0.015em;
}

.dk-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dk-kpi-meta,
.dk-kpi-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--gem-fg2);
}

.sm-progress,
.smoothui-animated-progress-bar {
  position: relative;
  height: 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-subtle);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--gem-border);
  margin-top: 2px;
}

.sm-progress-fill,
.smoothui-animated-progress-fill {
  height: 100%;
  border-radius: var(--gem-radius-pill);
  background: linear-gradient(90deg, var(--gem-accent) 0%, var(--gem-brand) 100%);
  width: 0%;
  transition: width 900ms var(--gem-spring);
  position: relative;
  overflow: hidden;
}

.sm-progress-fill::after,
.smoothui-animated-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gem-shimmer);
  animation: sm-shimmer 2.2s linear infinite;
}

@keyframes sm-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.skill-prompt-box {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-fg1);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.suite-pill.active {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border-color: var(--gem-btn-primary);
}

.topbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-container {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  overflow-x: hidden;
}

.workspace-section[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   SmoothUI Sliding Pill Tabs (.tabs, .subtabs, .segmented, .sm-thumb)
   -------------------------------------------------------------------------- */
.tabs,
.subtabs,
.segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  max-width: 100%;
  overflow-x: auto;
}

.sm-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    width var(--gem-dur-spring) var(--gem-spring),
    height var(--gem-dur-spring) var(--gem-spring);
  pointer-events: none;
  z-index: 0;
}

.tab-btn,
.lens-tab-btn {
  position: relative;
  z-index: 1;
  height: 28px;
  min-height: 28px;
  padding: 0 11px;
  font-size: 12px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--gem-fg2);
  border-radius: var(--gem-radius-pill);
  font-weight: 700;
}

.tab-btn.active,
.tab-btn[aria-selected="true"],
.lens-tab-btn.active,
.lens-tab-btn[aria-selected="true"] {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.sm-has-thumb .tab-btn.active,
.sm-has-thumb .tab-btn[aria-selected="true"],
.sm-has-thumb .lens-tab-btn.active,
.sm-has-thumb .lens-tab-btn[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   CollapsiblePanel Primitive (.collapsible-panel + useCollapseState)
   -------------------------------------------------------------------------- */
.collapsible-panel {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-card), var(--gem-card-highlight);
  overflow: hidden;
  transition: border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
  min-height: var(--panel-header-height);
  padding: 6px 12px;
  background: var(--gem-surface-subtle);
  border-bottom: 1px solid var(--gem-border);
}

.collapsible-panel[data-collapsed="true"] .collapsible-header {
  border-bottom-color: transparent;
}

.collapsible-panel[data-collapsed="true"] .panel-body {
  display: none;
}

.panel-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   useFloatingPanel Primitive (.floating-panel)
   -------------------------------------------------------------------------- */
.floating-panel {
  position: fixed;
  z-index: 35;
  display: flex;
  flex-direction: column;
  background: var(--gem-surface-elevated);
  border: 1px solid var(--gem-border-strong);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-md);
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: hidden;
  transition: opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.floating-panel[hidden] {
  display: none !important;
}

.floating-panel[data-minimized="true"] .floating-panel-body {
  display: none;
}

.floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
  min-height: var(--panel-header-height);
  padding: 6px 12px;
  background: var(--gem-surface-subtle);
  border-bottom: 1px solid var(--gem-border);
  cursor: move;
  user-select: none;
}

.floating-panel-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Self-Documenting Inspect Mode ([data-inspect-mode="true"] [data-inspect-id])
   -------------------------------------------------------------------------- */
body[data-inspect-mode="true"] [data-inspect-id],
.inspect-ring {
  box-shadow: var(--gem-ring) !important;
  cursor: help !important;
  transition: box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

/* --------------------------------------------------------------------------
   Cards, Grids, Forms, Badges, MentionChip, SkeletonCard, SmoothToast
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.surface-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: 10px 12px;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.input-field,
.select-field,
.textarea-field {
  min-height: 34px;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font);
  font-size: 13px;
  width: 100%;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.textarea-field {
  height: auto;
  min-height: 68px;
  padding: 8px 11px;
  line-height: 1.45;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--gem-surface-subtle);
  color: var(--gem-fg2);
  border: 1px solid var(--gem-border);
}

.badge-success {
  background: var(--gem-success-soft);
  color: var(--gem-success);
  border-color: transparent;
}

.badge-warning {
  background: var(--gem-warning-soft);
  color: var(--gem-warning);
  border-color: transparent;
}

.badge-critical {
  background: var(--gem-critical-soft);
  color: var(--gem-critical);
  border-color: transparent;
}

.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  font-family: var(--gem-font-mono);
  font-size: 11px;
  font-weight: 700;
}

.skeleton-card {
  height: 60px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
}

.graph-canvas-wrap {
  width: 100%;
  min-height: 320px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  overflow: hidden;
  position: relative;
}

.graph-svg {
  width: 100%;
  height: 320px;
  display: block;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--gem-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gem-space-4);
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  background: var(--gem-surface-elevated);
  border: 1px solid var(--gem-border-strong);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: 45;
  background: var(--gem-surface-elevated);
  border-left: 1px solid var(--gem-border-strong);
  box-shadow: var(--gem-shadow-md);
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow-y: auto;
}

.slide-drawer[hidden] {
  display: none !important;
}

.sm-toast-region {
  position: fixed;
  bottom: var(--gem-space-4);
  right: var(--gem-space-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}

.sm-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border: 1px solid transparent;
  box-shadow: var(--gem-highlight), var(--gem-shadow-md);
  font-size: 12.5px;
  font-weight: 700;
  transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy), opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.sm-toast-icon {
  width: 18px;
  height: 18px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-success);
  color: var(--gem-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* WR-C04: a failed save must never look like a confirmation.
   WR-C06: opaque surface + fg1 text (AA contrast in light and dark, no page content bleeding
   through a translucent tint); the error is signalled by the critical border and icon. */
.sm-toast-error {
  background: var(--gem-bg-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-critical);
}

.sm-toast-error .sm-toast-icon {
  background: var(--gem-critical);
}

.sm-toast-error .sm-toast-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.sm-enter {
  animation: sm-scale-in var(--gem-dur-base) var(--gem-spring-bouncy) both;
}

.mobile-bottom-nav {
  display: none;
}

/* --------------------------------------------------------------------------
   Phase 15: App-Scoped Workspace Switcher & Cross-App Reuse Banner (APPS-01, APPS-02)
   -------------------------------------------------------------------------- */
.app-switcher-root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.app-switcher-trigger {
  height: 32px;
  min-height: 32px;
  min-width: 32px;
  padding: 0 12px;
  gap: 6px;
  background: var(--gem-surface-elevated);
  border-color: var(--gem-border-strong);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.app-switcher-popover {
  position: absolute;
  top: calc(100% + var(--gem-space-2));
  left: 0;
  z-index: 55;
  width: min(400px, calc(100vw - 24px));
  max-height: 78vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--gem-surface-elevated);
  border: 1px solid var(--gem-border-strong);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-md);
  transition: transform var(--gem-dur-spring) var(--gem-spring), opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.app-switcher-popover[hidden] {
  display: none !important;
}

.app-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-switcher-item {
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 6px 12px;
  justify-content: space-between;
  text-align: left;
  flex-wrap: wrap;
}

.app-switcher-item.active {
  background: var(--gem-accent-soft);
  border-color: var(--gem-accent);
  color: var(--gem-fg1);
}

.app-switcher-item-main,
.app-switcher-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.app-create-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cross-app-reuse-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-color: var(--gem-border-strong);
  background: var(--gem-surface);
}

.cross-app-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
  transition: transform var(--gem-dur-spring) var(--gem-spring), border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.cross-app-card:hover {
  border-color: var(--gem-accent);
}

.provenance-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  border: 1px solid var(--gem-border);
}

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  font-family: var(--gem-font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--gem-success-soft);
  color: var(--gem-success);
}

/* --------------------------------------------------------------------------
   Phase 16: 100% Line-by-Line Repo Onboarding, Coverage Ledger & Feature Library (ONB-01..04)
   -------------------------------------------------------------------------- */
.smooth-ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}

.coverage-files-list,
.generated-docs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
}

.smooth-coverage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
  transition: transform var(--gem-dur-fast) var(--gem-ease-out), border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.smooth-coverage-row:hover {
  border-color: var(--gem-accent);
}

.smooth-coverage-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-subtle);
  overflow: hidden;
  border: 1px solid var(--gem-border);
}

.smooth-coverage-bar-fill {
  height: 100%;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-success);
  transition: width var(--gem-dur-spring) var(--gem-spring);
}

.feature-library-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition: transform var(--gem-dur-spring) var(--gem-spring), border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.feature-library-card:hover {
  border-color: var(--gem-accent);
}

.feature-blob-preview {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-fg1);
  font-family: var(--gem-font-mono);
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.feature-inject-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.feature-inject-controls .btn {
  min-height: 30px;
  height: 30px;
}

.generated-doc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
  transition: border-color var(--gem-dur-fast) var(--gem-ease-out);
}

#onboarding-doc-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

#onboarding-doc-tabs .segmented-btn {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-size: 12px;
  font-weight: 700;
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out), color var(--gem-dur-fast) var(--gem-ease-out);
}

#onboarding-doc-tabs .segmented-btn.active {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

/* --------------------------------------------------------------------------
   Phase 17: Node.js + Next.js + @gemba/uicomponents v3.0.0 App Scaffolder Wizard (SCAF-01..03)
   -------------------------------------------------------------------------- */
.scaffold-stack-locked-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border-strong);
  background: var(--gem-accent-soft);
  color: var(--gem-fg1);
}

.scaffold-multiselect-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
}

.scaffold-multiselect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px;
}

.scaffold-infra-card,
.scaffold-oauth-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--gem-dur-fast) var(--gem-ease-out), background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.scaffold-infra-card:hover,
.scaffold-oauth-card:hover {
  border-color: var(--gem-accent);
  background: var(--gem-accent-soft);
}

.scaffold-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-color: var(--gem-border-strong);
}

#scaffold-preview-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

#scaffold-preview-tabs .segmented-btn {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-size: 12px;
  font-weight: 700;
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out), color var(--gem-dur-fast) var(--gem-ease-out);
}

#scaffold-preview-tabs .segmented-btn.active {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.scaffold-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Phase 18: Admin Dashboard, Multi-Vendor AI Model Discovery & Per-Use-Case Cascade (ADMN-01..04)
   -------------------------------------------------------------------------- */
.admin-dashboard-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
}

.admin-subtabs .segmented-btn {
  height: 28px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-size: 12px;
  font-weight: 700;
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out), color var(--gem-dur-fast) var(--gem-ease-out);
}

.admin-subtabs .segmented-btn.active {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.admin-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-vendors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.admin-vendor-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.admin-sync-banner {
  padding: 6px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-accent-soft);
  border: 1px solid var(--gem-border);
  color: var(--gem-fg1);
  font-size: 12px;
}

.admin-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.admin-cascades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.admin-cascade-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.admin-cascade-primary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gem-space-2);
}

.admin-fallback-tiers-box {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
}

.admin-fallback-tier-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gem-space-2);
}

.admin-settings-form,
.admin-audit-logs-list {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}

/* --------------------------------------------------------------------------
   Mobile Responsive Layout (<= 640px / 375px iPhone SE Contract, T42)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .app-shell,
  .app-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 68px;
  }

  .smooth-ledger-grid,
  .admin-vendors-grid,
  .admin-models-grid,
  .admin-cascades-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-inject-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .feature-inject-controls .btn,
  #onboarding-doc-tabs .segmented-btn,
  .admin-subtabs .segmented-btn {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  .app-sidebar {
    display: none;
  }

  .workspace-container {
    padding: var(--gem-space-3);
  }

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

  .app-switcher-popover {
    position: fixed;
    left: var(--gem-space-2);
    right: var(--gem-space-2);
    top: 64px;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  .cross-app-card .btn {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  /* Mobile action buttons stack full-width below content at 375px (T42) */
  .action-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .action-row > .btn,
  .action-row > button {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  /* Floating inspector automatically docks as a full-width bottom sheet on mobile */
  .floating-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 56px;
    padding: var(--gem-space-1) var(--gem-space-2);
    background: var(--gem-glass);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--gem-border);
    max-width: 100vw;
    overflow-x: auto;
  }

  .mobile-nav-btn {
    flex: 1 0 44px;
    min-height: 44px;
    min-width: 44px;
    padding: var(--gem-space-1);
    font-size: var(--gem-tiny-size);
    border-color: transparent;
    background: transparent;
  }

  .mobile-nav-btn.active {
    color: var(--gem-accent);
    background: var(--gem-accent-soft);
  }
}

/* --------------------------------------------------------------------------
   Phase 19: @gemba/uicomponents v3.0.0 AI SDK (358) & SmoothUI (251)
   Component Design System & Responsive Ergonomics (UI-01, UI-02, UI-03)
   -------------------------------------------------------------------------- */

/* Viewport & Flex/Grid Overflow Hardening (1440x900 Desktop & 375x667 Mobile) */
html,
body,
.app-shell,
.app-main,
.workspace-container {
  overflow-x: hidden;
  max-width: 100vw;
}

.app-shell > *,
.app-main > *,
.workspace-container > *,
.card-grid > *,
.smooth-ledger-grid > *,
.admin-vendors-grid > *,
.admin-models-grid > *,
.admin-cascades-grid > *,
.dk-kpi-strip > *,
.gemba-live-showcase-grid > *,
.gemba-token-swatch-grid > *,
.kanban-column,
.kanban-card,
.surface-card,
.collapsible-panel {
  min-width: 0;
}

/* Universal >=44x44px Touch Target Floor on Mobile Viewports (<= 640px, T42) */
@media (max-width: 640px) {
  button,
  .btn,
  .nav-item,
  .dk-nav-item,
  .lens-tab-btn,
  .tab-btn,
  .segmented-btn,
  .suite-pill,
  .seed-pill,
  .kanban-card-move-btn,
  .kanban-dossier-tab-btn,
  .mobile-nav-btn,
  .collapse-trigger,
  .icon-touch-btn,
  .modal-close-btn,
  .smoothui-dot-morph-button,
  .smoothui-copy-btn,
  .input-field,
  .select-field,
  .input-control,
  .select-control,
  .finput,
  .fselect {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Component Provenance & Suite Badges */
.gemba-component-pill,
.aisdk-component-badge,
.smoothui-component-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-aisdk-surface);
  border: 1px solid var(--gem-aisdk-border);
  color: var(--gem-accent);
  font-family: var(--gem-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.smoothui-component-badge {
  background: var(--gem-smoothui-pill-bg);
  border-color: var(--gem-border-strong);
  color: var(--gem-fg1);
}

/* SmoothUI Primitives (.smoothui-*) */
.smoothui-number-flow {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition:
    color var(--gem-dur-fast) var(--gem-spring),
    transform var(--gem-dur-fast) var(--gem-spring);
}

.smoothui-animated-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  padding: 3px;
  gap: 2px;
  max-width: 100%;
}

.smoothui-animated-tabs .tab-btn.active,
.smoothui-animated-tabs .segmented-btn.active,
.smoothui-animated-tabs .lens-tab-btn.active,
.smoothui-animated-tabs .suite-pill.active,
.smoothui-animated-tabs [aria-selected="true"] {
  background: var(--gem-surface);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.smoothui-animated-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  overflow: hidden;
  position: relative;
}

.smoothui-animated-progress-fill {
  height: 100%;
  border-radius: var(--gem-radius-pill);
  background: linear-gradient(90deg, var(--gem-accent) 0%, var(--gem-info) 100%);
  transition: width var(--gem-dur) var(--gem-spring);
}

.smoothui-animated-progress-fill[data-wip-state="warning"],
.smoothui-animated-progress-bar[data-wip-state="warning"] .smoothui-animated-progress-fill {
  background: var(--gem-warning);
}

.smoothui-animated-progress-fill[data-wip-state="critical"],
.smoothui-animated-progress-bar[data-wip-state="critical"] .smoothui-animated-progress-fill {
  background: var(--gem-critical);
}

.smoothui-ai-context-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
}

.smoothui-dot-morph-button,
.smoothui-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font);
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  cursor: pointer;
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    color var(--gem-dur-fast) var(--gem-ease-out);
}

.smoothui-dot-morph-button:hover,
.smoothui-copy-btn:hover {
  border-color: var(--gem-accent);
  background: var(--gem-accent-subtle);
}

.smoothui-copy-btn[data-copied="true"] {
  background: var(--gem-success-soft);
  border-color: var(--gem-success);
  color: var(--gem-success);
}

.smoothui-expandable-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: 10px 12px;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-base) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.smoothui-expandable-card:hover {
  border-color: var(--gem-border-strong);
  box-shadow: var(--gem-shadow-sm);
}

.smoothui-drawer {
  background: var(--gem-surface-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-left: 1px solid var(--gem-border-strong);
  box-shadow: var(--gem-shadow-md);
  transition: transform var(--gem-dur-spring) var(--gem-spring);
}

.smoothui-basic-modal {
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-border-strong);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-md);
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    opacity var(--gem-dur-fast) var(--gem-ease-out);
}

/* AI SDK Primitives (.aisdk-*) */
.aisdk-eval-scorecard,
.aisdk-decision-inbox,
.aisdk-context-window,
.aisdk-jev-confidence-router,
.aisdk-workflow-canvas,
.aisdk-step-inspector,
.aisdk-change-impact,
.aisdk-guardrail-notice,
.aisdk-agent-plan,
.aisdk-agent-gate,
.aisdk-cursor-questions-panel,
.aisdk-file-diff,
.aisdk-test-run-result,
.aisdk-tool-call-card,
.aisdk-memory-manager,
.aisdk-knowledge-sources,
.aisdk-setup-checklist,
.aisdk-workspace-create,
.aisdk-skill-library,
.aisdk-trace-viewer,
.aisdk-failure-clusters,
.aisdk-panel-dock,
.aisdk-prompt-input,
.aisdk-starter-prompts,
.aisdk-thinking-state,
.aisdk-ai-answer {
  background: var(--gem-aisdk-surface);
  border: 1px solid var(--gem-aisdk-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  padding: 10px 12px;
  color: var(--gem-text);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.aisdk-eval-scorecard:hover,
.aisdk-decision-inbox:hover,
.aisdk-context-window:hover,
.aisdk-jev-confidence-router:hover,
.aisdk-tool-call-card:hover {
  box-shadow: var(--gem-aisdk-glow);
}

.aisdk-guardrail-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.aisdk-file-diff {
  font-family: var(--gem-font-mono);
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Design System Live Showcase & Catalog Live Preview Modal */
.gemba-live-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.gemba-specimen-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.gemba-token-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 8px;
}

.gemba-token-swatch-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.catalog-preview-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}

.catalog-specimen-stage {
  padding: 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
}

/* Kanban Board & 6-Tab Card Dossier Drawer Tokenized Classes */
.kanban-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.kanban-gate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-aisdk-surface);
  border: 1px solid var(--gem-aisdk-border);
}

.kanban-columns-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(236px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  max-width: 100%;
}

.kanban-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  min-height: 280px;
}

.kanban-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.kanban-card:hover {
  border-color: var(--gem-accent);
  box-shadow: var(--gem-shadow-sm);
}

.kanban-card-actions,
.admin-card-actions,
.modal-footer,
.onboarding-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kanban-card-move-btn,
.kanban-dossier-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-text);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.kanban-card-move-btn:hover,
.kanban-dossier-tab-btn:hover {
  background: var(--gem-accent-subtle);
  border-color: var(--gem-accent);
}

.kanban-dossier-tab-btn.active,
.kanban-dossier-tab-btn[aria-selected="true"] {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border-color: var(--gem-btn-primary);
}

.kanban-dossier-drawer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--gem-surface-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

.kanban-dossier-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
}

/* Phase 20: Persistent Ask gdev Floating / Collapsible Assistant Drawer (ASST-01, ASST-02) */
.assistant-drawer-panel {
  position: fixed;
  right: var(--gem-space-4);
  top: 56px;
  width: min(420px, 94vw);
  height: min(620px, calc(100vh - 76px));
  max-height: calc(100vh - 76px);
  z-index: 42;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--gem-radius-lg);
  background: var(--gem-surface-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--gem-aisdk-border);
  box-shadow: var(--gem-shadow-md);
  overflow: hidden;
  transition:
    transform var(--gem-dur-base) var(--gem-spring),
    opacity var(--gem-dur-base) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.assistant-drawer-panel.docked {
  right: 0 !important;
  left: auto !important;
  top: 52px !important;
  bottom: 0 !important;
  width: min(420px, 96vw) !important;
  height: calc(100vh - 52px) !important;
  max-height: calc(100vh - 52px) !important;
  border-radius: var(--gem-radius-lg) 0 0 var(--gem-radius-lg);
}

.assistant-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gem-border);
}

.assistant-header-brand {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.assistant-history-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px;
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.assistant-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assistant-conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.assistant-conversation-item:hover,
.assistant-conversation-item.active {
  border-color: var(--gem-accent);
  background: var(--gem-accent-subtle);
}

.assistant-mode-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
}

.assistant-mode-pill {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--gem-radius-pill);
}

.assistant-mode-pill.active,
.assistant-mode-pill[aria-selected="true"] {
  background: var(--gem-btn-primary);
  color: var(--gem-on-primary);
  border-color: var(--gem-btn-primary);
}

.assistant-messages-list {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
}

.assistant-starter-prompts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assistant-starter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.assistant-starter-btn {
  text-align: left;
  justify-content: flex-start;
  min-height: 30px;
  height: auto;
  padding: 6px 10px;
  font-size: 12px;
}

.assistant-message-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 11px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-text);
  font-size: 12.5px;
}

.assistant-message-user {
  align-self: flex-end;
  max-width: 90%;
  background: var(--gem-accent-subtle);
  border-color: var(--gem-accent);
}

.assistant-message-assistant {
  align-self: stretch;
  background: var(--gem-aisdk-surface);
  border-color: var(--gem-aisdk-border);
}

.assistant-tool-traces-row,
.assistant-provenance-row,
.assistant-proposal-actions,
.assistant-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.assistant-tool-trace-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-full);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  font-size: 11px;
  color: var(--gem-text-muted);
}

.assistant-provenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  border: 1px solid var(--gem-accent);
  color: var(--gem-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    transform var(--gem-dur-fast) var(--gem-spring);
}

.assistant-provenance-chip:hover {
  background: var(--gem-accent-subtle);
}

.assistant-proposal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-brand);
  box-shadow: var(--gem-shadow-xs);
}

.assistant-proposal-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assistant-composer-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--gem-border);
}

.assistant-prompt-textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
}

.assistant-minimized-pill {
  position: fixed;
  right: var(--gem-space-4);
  bottom: var(--gem-space-4);
  z-index: 43;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--gem-radius-full);
  box-shadow: var(--gem-shadow-md);
}

/* Tablet & Mobile Responsive Rules (<= 768px and <= 640px / 375x667) */
@media (max-width: 768px) {
  .assistant-drawer-panel,
  .assistant-drawer-panel.docked {
    left: 0;
    right: 0;
    top: 56px;
    bottom: 56px;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - 112px);
    max-height: calc(100vh - 112px);
    border-radius: 0;
  }

  .assistant-minimized-pill {
    bottom: 68px;
    right: var(--gem-space-3);
  }

  .app-shell,
  .app-shell[data-sidebar-collapsed="true"] {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 68px;
  }

  .app-sidebar {
    display: none;
  }

  .app-sidebar.mobile-open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: 48;
    box-shadow: var(--gem-shadow-md);
  }

  .dk-kpi-strip,
  .gemba-live-showcase-grid,
  .kanban-columns-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-row,
  .kanban-card-actions,
  .feature-inject-controls,
  .admin-card-actions,
  .modal-footer,
  .onboarding-hero-actions,
  .assistant-header-actions,
  .assistant-proposal-actions,
  .assistant-composer-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--gem-space-2);
  }

  .action-row > button,
  .action-row > .btn,
  .kanban-card-actions > button,
  .kanban-card-actions > .btn,
  .kanban-card-actions > .kanban-card-move-btn,
  .feature-inject-controls > button,
  .feature-inject-controls > .btn,
  .admin-card-actions > button,
  .admin-card-actions > .btn,
  .modal-footer > button,
  .modal-footer > .btn,
  .onboarding-hero-actions > button,
  .onboarding-hero-actions > .btn,
  .assistant-header-actions > button,
  .assistant-header-actions > .btn,
  .assistant-proposal-actions > button,
  .assistant-proposal-actions > .btn,
  .assistant-composer-actions > button,
  .assistant-composer-actions > .btn,
  .assistant-mode-pill,
  .assistant-provenance-chip {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 56px;
    padding: var(--gem-space-1) var(--gem-space-2);
    background: var(--gem-glass);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--gem-border);
    max-width: 100vw;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .kanban-card-actions,
  .admin-card-actions,
  .modal-footer,
  .onboarding-hero-actions,
  .assistant-header-actions,
  .assistant-proposal-actions,
  .assistant-composer-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--gem-space-2);
  }

  .kanban-card-actions > button,
  .kanban-card-actions > .btn,
  .kanban-card-actions > .kanban-card-move-btn,
  .admin-card-actions > button,
  .admin-card-actions > .btn,
  .modal-footer > button,
  .modal-footer > .btn,
  .onboarding-hero-actions > button,
  .onboarding-hero-actions > .btn,
  .assistant-header-actions > button,
  .assistant-header-actions > .btn,
  .assistant-proposal-actions > button,
  .assistant-proposal-actions > .btn,
  .assistant-composer-actions > button,
  .assistant-composer-actions > .btn {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }
}

/* --------------------------------------------------------------------------
   Phase 21: Kanban Mode Switcher, 6-Tab Tasks + WorkProjects View,
   TeamTagChipList, TaskDependency Badges & WorkProjectTaskPanel (TASK-01, TASK-02)
   -------------------------------------------------------------------------- */
.kanban-mode-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-3);
  padding: var(--gem-space-2) var(--gem-space-3);
  margin-bottom: var(--gem-space-3);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.tasks-projects-view {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3);
}

.tasks-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gem-space-1);
}

.tasks-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gem-space-2);
}

.tasks-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.tasks-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gem-space-2);
}

.tasks-filter-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

.tasks-team-tag-disclaimer {
  font-size: var(--gem-text-xs);
  color: var(--gem-text-muted);
}

.tasks-list-panel,
.tasks-table-list,
.work-projects-panel,
.work-project-panel-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

.tasks-table-row {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    transform var(--gem-dur-fast) var(--gem-ease-out);
}

.tasks-row-main {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
}

.tasks-row-governance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gem-space-2);
  padding-top: var(--gem-space-2);
  border-top: 1px solid var(--gem-border);
}

.team-tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gem-space-1);
}

.team-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-1);
  padding: 2px var(--gem-space-2);
  border-radius: var(--gem-radius-pill);
  font-size: var(--gem-text-xs);
  background: var(--gem-aisdk-surface);
  color: var(--gem-text);
}

.team-tag-chip-manual {
  border: 1px solid var(--gem-accent);
}

.team-tag-chip-auto {
  border: 1px dashed var(--gem-border-strong);
  color: var(--gem-text-muted);
}

.team-tag-overflow-badge {
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-text-muted);
  font-family: var(--gem-font-mono);
  font-size: var(--gem-text-xs);
}

.task-dep-badge-blocked {
  border: 1px solid var(--gem-danger);
}

.task-dep-badge-blocks {
  border: 1px solid var(--gem-warning);
}

.work-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gem-space-3);
}

.work-project-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.work-project-task-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3);
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-aisdk-border);
  border-radius: var(--gem-radius-md);
}

.work-project-visible-row,
.work-project-restricted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
}

.work-project-restricted-row {
  background: var(--gem-surface-subtle);
  border: 1px dashed var(--gem-border);
  color: var(--gem-text-muted);
}

/* --------------------------------------------------------------------------
   Phase 22: 4-Gate Autonomous FR Lifecycle Stepper, Sequential 1-at-a-Time
   Clarifying Questions, In-Place Rework Banner, 100% Spec Verification Ledger,
   Self-Healing Loop Timeline & Post-Deploy Dual-Viewport UI Scorecard (FRLC-01..FRLC-05)
   -------------------------------------------------------------------------- */
.fr-4gate-dossier-shell,
.fr-4gate-container {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3);
  background: var(--gem-bg-surface);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-md);
}

.fr-4gate-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gem-space-2);
  padding: var(--gem-space-2);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-md);
}

.fr-gate-step-pill {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-surface);
  border: 1px solid var(--gem-border-subtle);
  color: var(--gem-text-primary);
  font-size: var(--gem-text-xs);
}

.fr-gate-step-pill.active {
  border-color: var(--gem-accent-primary);
  box-shadow: var(--gem-focus-ring);
}

.fr-gate-step-pill.completed {
  border-color: var(--gem-status-success);
}

.fr-workflow-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  background: var(--gem-bg-surface);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-md);
}

.fr-workflow-action-buttons,
.fr-workflow-modal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

.fr-workflow-action-btn,
.fr-question-submit-btn,
.fr-spec-filter-pill {
  min-height: 44px;
  min-width: 44px;
}

.fr-questions-panel,
.fr-research-review-panel,
.fr-spec-items-ledger,
.fr-self-healing-timeline,
.fr-post-deploy-ui-scorecard {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-bg-surface);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-md);
}

.fr-question-seq-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-bg-surface);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-sm);
}

.fr-question-seq-card.answered {
  border-color: var(--gem-status-success);
}

.fr-question-seq-card.next-up {
  border: 2px solid var(--gem-status-warning);
}

.fr-question-seq-card.locked {
  opacity: 0.6;
  background: var(--gem-bg-muted);
}

.fr-question-radio-label {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--gem-space-2);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-surface);
  color: var(--gem-text-primary);
  cursor: pointer;
}

.fr-question-other-input,
.fr-workflow-comment-textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--gem-space-2);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-surface);
  color: var(--gem-text-primary);
}

.fr-rework-banner,
.fr-escalation-banner {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-status-info);
  color: var(--gem-text-primary);
}

.fr-escalation-banner {
  border-color: var(--gem-status-danger);
}

.fr-spec-ledger-row {
  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr) minmax(180px, 2fr) minmax(160px, 1.5fr);
  gap: var(--gem-space-2);
  align-items: start;
  padding: var(--gem-space-2);
  border-bottom: 1px solid var(--gem-border-subtle);
  font-size: var(--gem-text-xs);
}

.fr-self-healing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-status-info);
}

.fr-ui-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gem-space-2);
}

.fr-ui-viewport-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border-subtle);
  font-size: var(--gem-text-xs);
}

@media (max-width: 640px) {
  #kanban-card-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .fr-4gate-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fr-workflow-action-bar,
  .fr-workflow-action-buttons,
  .fr-workflow-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .fr-workflow-action-btn,
  .fr-question-submit-btn {
    width: 100%;
    min-height: 44px;
    min-width: 44px;
  }

  .fr-spec-ledger-row,
  .fr-ui-scorecard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   AI SDK v3.0.0 Workflow Studio, FSB Process Builder DAG & 4-Gate Spotlight
   ========================================================================== */
.aisdk-workflow-studio {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  margin-bottom: var(--gem-space-4);
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-sm);
}

.aisdk-workflow-studio-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-3);
}

.aisdk-workflow-dag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: var(--gem-space-3);
  align-items: stretch;
}

.aisdk-workflow-node {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  transition: transform var(--gem-dur) var(--gem-ease-out), border-color var(--gem-dur) var(--gem-ease-out), box-shadow var(--gem-dur) var(--gem-ease-out);
  cursor: pointer;
}

.aisdk-workflow-node:hover,
.aisdk-workflow-node.is-active {
  border-color: var(--gem-brand);
  box-shadow: var(--gem-shadow-sm);
  transform: translateY(-1px);
}

.aisdk-workflow-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
}

.aisdk-workflow-node-step {
  font-family: var(--gem-font-mono);
  font-size: var(--gem-text-xs);
  font-weight: 700;
  color: var(--gem-brand);
}

.aisdk-workflow-node-title {
  font-size: var(--gem-text-sm);
  font-weight: 600;
  color: var(--gem-fg1);
  margin: 0;
}

.aisdk-workflow-node-meta {
  font-family: var(--gem-font-mono);
  font-size: var(--gem-text-xs);
  color: var(--gem-fg3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-1);
}

.fr-spotlight-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
  padding-top: var(--gem-space-3);
  border-top: 1px solid var(--gem-border-subtle);
}

.fr-spotlight-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gem-space-2);
}

.fr-spotlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-full);
  color: var(--gem-fg1);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--gem-dur) var(--gem-ease-out), border-color var(--gem-dur) var(--gem-ease-out);
}

.fr-spotlight-pill:hover,
.fr-spotlight-pill.is-active {
  border-color: var(--gem-brand);
  background: var(--gem-bg-elevated);
}

.aisdk-live-preview-box {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-elevated);
  border: 1px dashed var(--gem-border);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.token-swatch-bar {
  height: 14px;
  width: 100%;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border-subtle);
  margin: 4px 0;
}

/* ==========================================================================
   SmoothUI v3.0.0 Full Component Redesign & Spring Animation Suite
   100% 3-Layer --gem-* Token Spine · Zero Raw Hex · Reduced-Motion Safe
   ========================================================================== */
@keyframes sm-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sm-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sm-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sm-pulse-ring {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--gem-accent-subtle);
  }
  50% {
    box-shadow: 0 0 0 4px var(--gem-accent-subtle);
  }
}

.view-panel[aria-hidden="false"] {
  animation: sm-fade-up var(--gem-dur-base) var(--gem-spring) both;
}

.surface-card,
.card,
.kanban-card,
.feature-blueprint-card,
.design-specimen-card,
.catalog-item-card,
.admin-vendor-card,
.admin-cascade-card,
.aisdk-workflow-node {
  animation: sm-fade-up var(--gem-dur-base) var(--gem-spring) both;
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.surface-card:hover,
.card:hover,
.feature-blueprint-card:hover,
.design-specimen-card:hover,
.catalog-item-card:hover,
.admin-vendor-card:hover,
.admin-cascade-card:hover {
  border-color: var(--gem-border-strong);
  box-shadow: var(--gem-shadow-sm);
  transform: translateY(-2px);
}

.btn,
.tab-btn,
.subtab-btn,
.segmented-btn,
.fr-spotlight-pill,
.kanban-card-move-btn,
.kanban-dossier-tab-btn {
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.btn:hover:not(:disabled),
.fr-spotlight-pill:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--gem-shadow-xs);
}

.btn:active:not(:disabled),
.tab-btn:active:not(:disabled),
.subtab-btn:active:not(:disabled),
.segmented-btn:active:not(:disabled),
.fr-spotlight-pill:active:not(:disabled),
.kanban-card-move-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-secondary {
  background: var(--gem-bg-muted);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gem-bg-hover);
  border-color: var(--gem-border-strong);
}

.btn-sm,
.btn-xs {
  height: 28px;
  min-height: 28px;
  min-width: 28px;
  padding: 0 10px;
  font-size: 11.5px;
}

@media (max-width: 640px) {
  .btn-sm,
  .btn-xs,
  .fr-spotlight-pill,
  .checkbox-pill {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================================================
   Gemba Design System + SmoothUI + AI SDK Primitives Redesign
   (Form Inputs, Selects, Checkboxes, Switches, Tables, Toasts, Cards, Chips, Lists)
   Source: /Users/lego/dev/gemba-designsystem/src/mobile/fork-smoothui/
   ========================================================================== */

/* 1. Form Inputs, Selects, Textareas & Custom Checkboxes */
.finput,
.fselect,
.ftextarea,
.input-field,
.select-field,
.textarea-field,
.input-control,
.select-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
  height: 34px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background-color: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.finput::placeholder,
.ftextarea::placeholder,
.input-field::placeholder,
.textarea-field::placeholder,
.input-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--gem-fg3);
  font-weight: 400;
}

.finput:hover:not(:disabled),
.fselect:hover:not(:disabled),
.ftextarea:hover:not(:disabled),
.input-field:hover:not(:disabled),
.select-field:hover:not(:disabled),
.textarea-field:hover:not(:disabled),
.input-control:hover:not(:disabled),
.select-control:hover:not(:disabled),
input[type="text"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--gem-border-strong);
}

.finput:focus,
.fselect:focus,
.ftextarea:focus,
.input-field:focus,
.select-field:focus,
.textarea-field:focus,
.input-control:focus,
.select-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gem-ink);
  box-shadow: 0 0 0 2px var(--gem-bg), 0 0 0 4px var(--gem-ring-color), var(--gem-shadow-xs);
}

.ftextarea,
.textarea-field,
textarea {
  height: auto;
  min-height: 68px;
  padding: 8px 11px;
  line-height: 1.45;
}

.fselect,
.select-field,
.select-control,
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgb(105,112,128)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  cursor: pointer;
}

html[data-theme="dark"] .fselect,
html[data-theme="dark"] .select-field,
html[data-theme="dark"] .select-control,
html[data-theme="dark"] select {
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgb(148,153,164)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* Custom SmoothUI Checkboxes (non-switch) */
input[type="checkbox"]:not(.smoothui-switch) {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid var(--gem-border-strong);
  background: var(--gem-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  transition:
    background-color var(--gem-dur-fast) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-spring),
    transform var(--gem-dur-fast) var(--gem-spring-bouncy);
}

input[type="checkbox"]:not(.smoothui-switch)::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--gem-on-primary);
  border-bottom: 2px solid var(--gem-on-primary);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -1px;
  transition: transform var(--gem-dur-fast) var(--gem-spring-bouncy);
}

input[type="checkbox"]:not(.smoothui-switch):checked {
  background: var(--gem-btn-primary);
  border-color: var(--gem-btn-primary);
}

input[type="checkbox"]:not(.smoothui-switch):checked::after {
  transform: rotate(-45deg) scale(1);
}

input[type="checkbox"]:not(.smoothui-switch):active {
  transform: scale(0.92);
}

/* 2. Tables (.dk-table, .dk-table-wrap, table) */
.dk-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.dk-table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: var(--gem-surface);
  color: var(--gem-fg1);
}

.dk-table th,
table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gem-fg3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  white-space: nowrap;
}

.dk-table td,
table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gem-border);
  color: var(--gem-fg1);
  vertical-align: middle;
}

.dk-table tbody tr:last-child td,
table tbody tr:last-child td {
  border-bottom: none;
}

.dk-table tbody tr,
table tbody tr {
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.dk-table tbody tr:hover td,
table tbody tr:hover td {
  background: var(--gem-surface-hover);
}

/* 3. Cards, Lists, Chips & Pills */
.card,
.dk-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.card-header,
.dk-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gem-border-subtle);
}

.card-title,
.dk-card-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gem-fg1);
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.field-row,
.form-row,
.fgroup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label,
.meta-label,
.flabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--gem-fg2);
  letter-spacing: 0.01em;
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gem-fg1);
  cursor: pointer;
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.checkbox-pill:hover {
  border-color: var(--gem-border-strong);
  background: var(--gem-surface-hover);
}

.mono-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--gem-radius-xs);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border-subtle);
  font-family: var(--gem-font-mono);
  font-size: 11px;
  color: var(--gem-fg2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--gem-radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--gem-surface-emph);
  color: var(--gem-fg2);
  white-space: nowrap;
}

.chip.success {
  background: var(--gem-success-soft);
  color: var(--gem-success);
}

.chip.warning {
  background: var(--gem-warning-soft);
  color: var(--gem-warning);
}

.chip.critical {
  background: var(--gem-critical-soft);
  color: var(--gem-critical);
}

.chip.accent {
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
}

.dk-list,
.list-group {
  display: flex;
  flex-direction: column;
}

.dk-li,
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-sm);
  transition: background-color var(--gem-dur-fast) var(--gem-ease-out);
}

.dk-li:last-child,
.list-row:last-child {
  border-bottom: none;
}

.dk-li:hover,
.list-row:hover {
  background: var(--gem-surface-hover);
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
  position: relative;
}

.admin-vendor-card,
.admin-cascade-card,
.admin-workflow-row,
.admin-audit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-full);
  background: var(--gem-accent-subtle);
  border: 1px solid var(--gem-aisdk-border);
  color: var(--gem-accent);
  font-size: 11px;
  font-weight: 700;
  transition: transform var(--gem-dur-fast) var(--gem-spring);
}

.mention-chip:hover {
  transform: translateY(-1px);
}

.mention-chip-kind {
  font-family: var(--gem-font-mono);
  font-size: 10.5px;
  opacity: 0.85;
}

.mention-chip-label {
  color: var(--gem-text);
}

/* 4. Dark Mode Surface & Sliding Thumb Refinements */
html[data-theme="dark"] .sm-thumb,
html[data-theme="dark"] .dk-nav-thumb {
  background: var(--gem-surface-emph);
  box-shadow: 0 0 0 1px var(--gem-border-strong), var(--gem-shadow-xs), var(--gem-highlight);
}

html[data-theme="dark"] .tabs,
html[data-theme="dark"] .subtabs,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .segmented-control,
html[data-theme="dark"] .smoothui-animated-tabs,
html[data-theme="dark"] .admin-subtabs,
html[data-theme="dark"] .kanban-dossier-tabs,
html[data-theme="dark"] .assistant-mode-bar {
  background: var(--gem-surface-subtle);
  border-color: var(--gem-border);
}

html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .lens-tab-btn.active,
html[data-theme="dark"] .segmented-btn.active,
html[data-theme="dark"] #onboarding-doc-tabs .segmented-btn.active,
html[data-theme="dark"] #scaffold-preview-tabs .segmented-btn.active,
html[data-theme="dark"] .admin-subtabs .segmented-btn.active {
  background: var(--gem-surface-emph);
  color: var(--gem-fg1);
  border-color: var(--gem-border-strong);
}

html[data-theme="dark"] .sm-has-thumb .tab-btn.active,
html[data-theme="dark"] .sm-has-thumb .lens-tab-btn.active,
html[data-theme="dark"] .sm-has-thumb .segmented-btn.active {
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] input[type="checkbox"].smoothui-switch {
  background: var(--gem-surface-emph);
  border-color: var(--gem-border-strong);
}

html[data-theme="dark"] input[type="checkbox"].smoothui-switch::after {
  background: var(--gem-fg1);
}

html[data-theme="dark"] input[type="checkbox"].smoothui-switch:checked {
  background: var(--gem-success);
  border-color: var(--gem-success);
}

html[data-theme="dark"] input[type="checkbox"].smoothui-switch:checked::after {
  background: var(--gem-on-dark);
}

.modal-backdrop:not([hidden]) .modal-card,
.slide-over-drawer:not([hidden]),
.kanban-dossier-drawer:not([hidden]),
.assistant-drawer-panel:not([hidden]) {
  animation: sm-scale-in var(--gem-dur-base) var(--gem-spring) both;
}

.badge-success,
.aisdk-workflow-node.is-active {
  animation: sm-pulse-ring 2.6s var(--gem-ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   Phase 23: Real @gemba/uicomponents v3.0.0 Runtime Primitives
   (Cult UI DynamicIsland, SmoothUI ThemeToggle & AnimatedSwitch,
    AI SDK Workflow Canvas + Connected Bezier Edges + ChainOfThought + Tool)
   -------------------------------------------------------------------------- */
.cult-dynamic-island {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.cult-dynamic-island:hover,
.cult-dynamic-island.is-expanded {
  border-color: var(--gem-accent);
  box-shadow: var(--gem-shadow-md);
}

.cult-island-expanded {
  position: absolute;
  top: calc(100% + var(--gem-space-2));
  left: 0;
  z-index: 60;
  min-width: 310px;
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-lg);
  background: var(--gem-surface-elevated);
  border: 1px solid var(--gem-aisdk-border);
  box-shadow: var(--gem-shadow-md);
  animation: sm-scale-in var(--gem-dur-base) var(--gem-spring) both;
}

.cult-island-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gem-space-2);
}

.cult-island-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
}

.smoothui-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-2);
}

.tt-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.tt-sun,
.tt-moon {
  position: absolute;
  inset: 0;
  margin: auto;
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.tt-moon {
  opacity: 0;
  transform: rotate(-75deg) scale(0.5);
}

html[data-theme="dark"] .tt-sun {
  opacity: 0;
  transform: rotate(75deg) scale(0.5);
}

html[data-theme="dark"] .tt-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.sm-has-thumb {
  position: relative;
}

.sm-has-thumb > button,
.sm-has-thumb > [role="tab"] {
  position: relative;
  z-index: 1;
}

.sm-thumb {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs), var(--gem-card-highlight);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.sm-thumb.sm-animate {
  transition:
    transform var(--gem-dur-spring) var(--gem-spring),
    width var(--gem-dur-spring) var(--gem-spring),
    height var(--gem-dur-spring) var(--gem-spring),
    opacity var(--gem-dur-fast) var(--gem-ease-out);
}

input[type="checkbox"].smoothui-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-emph);
  border: 1px solid var(--gem-border);
  box-shadow: inset 0 1px 2px rgba(40, 51, 73, 0.08);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--gem-dur-spring) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-ease-out);
}

input[type="checkbox"].smoothui-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  box-shadow: 0 2px 6px rgba(40, 51, 73, 0.22);
  transition:
    transform var(--gem-dur-spring) var(--gem-spring-bouncy),
    width var(--gem-dur-fast) var(--gem-spring);
}

input[type="checkbox"].smoothui-switch:active::after {
  width: 25px;
}

input[type="checkbox"].smoothui-switch:checked {
  background: var(--gem-success);
  border-color: var(--gem-success);
}

input[type="checkbox"].smoothui-switch:checked::after {
  transform: translateX(18px);
}

input[type="checkbox"].smoothui-switch:checked:active::after {
  transform: translateX(13px);
}

.aisdk-wdk-studio-card {
  margin-top: var(--gem-space-3);
  border-color: var(--gem-aisdk-border);
  background: var(--gem-aisdk-surface);
}

.aisdk-xyflow-canvas {
  position: relative;
  padding: var(--gem-space-5);
  border-radius: var(--gem-radius-lg);
  background:
    radial-gradient(circle, var(--gem-border-strong) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--gem-surface-subtle);
  border: 1px solid var(--gem-aisdk-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 360px;
}

.aisdk-canvas-panel {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin-bottom: var(--gem-space-4);
  padding: 12px 16px;
  border-radius: var(--gem-radius-lg);
  background: var(--gem-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-sm), var(--gem-card-highlight);
}

.aisdk-canvas-controls {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--gem-space-3);
  padding: 4px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-glass);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}

.aisdk-canvas-edges-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@keyframes aisdk-edge-flow {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.aisdk-edge-path {
  stroke: var(--gem-accent);
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  animation: aisdk-edge-flow 1.1s linear infinite;
}

.aisdk-edge-path.is-temporary {
  stroke: var(--gem-warning);
  stroke-width: 2px;
  stroke-dasharray: 5 5;
  animation: aisdk-edge-flow 1.4s linear infinite;
}

.aisdk-edge-port {
  fill: var(--gem-surface-elevated);
  stroke: var(--gem-accent);
  stroke-width: 2px;
}

.aisdk-edge-port.is-temporary {
  stroke: var(--gem-warning);
}

.aisdk-edge-label-bg {
  fill: var(--gem-surface);
  stroke: var(--gem-border-strong);
  stroke-width: 1px;
  rx: 9px;
  ry: 9px;
}

.aisdk-edge-label-text {
  fill: var(--gem-fg1);
  font-family: var(--gem-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.aisdk-workflow-dag,
.aisdk-dag-columns {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--dag-cols, 4), minmax(215px, 1fr));
  gap: 36px;
  align-items: center;
  min-width: 880px;
}

@media (max-width: 900px) {
  .aisdk-workflow-dag,
  .aisdk-dag-columns {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 16px;
  }
}

.aisdk-dag-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.aisdk-xyflow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.aisdk-xyflow-node:hover {
  transform: translateY(-2px);
  border-color: var(--gem-accent);
  box-shadow: var(--gem-shadow-md);
}

.aisdk-xyflow-node.is-loop-node {
  border-style: dashed;
  border-color: var(--gem-warning);
}

.aisdk-node-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gem-space-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-md) var(--gem-radius-md) 0 0;
}

.aisdk-node-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aisdk-node-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  font-size: 11px;
  color: var(--gem-fg2);
  border-radius: 0 0 var(--gem-radius-md) var(--gem-radius-md);
}

.aisdk-handle {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: var(--gem-radius-full);
  background: var(--gem-surface-elevated);
  border: 2px solid var(--gem-accent);
  transform: translateY(-50%);
  z-index: 3;
}

.aisdk-handle-target {
  left: -6px;
}

.aisdk-handle-source {
  right: -6px;
}

.aisdk-live-trace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gem-space-3);
  margin-top: var(--gem-space-3);
}

.aisdk-cot-card,
.aisdk-tool-card,
.aisdk-agent-card,
.aisdk-test-results-card,
.aisdk-terminal-card {
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  overflow: hidden;
}

.aisdk-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: 10px 14px;
  background: var(--gem-surface-subtle);
  border-bottom: 1px solid var(--gem-border);
}

.aisdk-agent-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aisdk-cot-summary,
.aisdk-tool-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: 10px 14px;
  background: var(--gem-surface-subtle);
  cursor: pointer;
  font-size: var(--gem-small-size);
  font-weight: 700;
}

.aisdk-cot-steps {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  border-top: 1px solid var(--gem-border);
}

.aisdk-cot-step {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  font-size: var(--gem-small-size);
  color: var(--gem-fg2);
}

.aisdk-cot-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gem-radius-full);
  background: var(--gem-success);
  flex-shrink: 0;
}

.aisdk-tool-body {
  padding: 10px 14px;
  border-top: 1px solid var(--gem-border);
}

.aisdk-code-block {
  margin: 0;
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  font-size: 11px;
  overflow-x: auto;
}

.aisdk-variant-bar,
.aisdk-lifecycle-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.design-specimen-card[data-agent-variant="compact"] p {
  display: none;
}

.design-specimen-card[data-agent-variant="expanded"] .aisdk-live-preview-box {
  padding: var(--gem-space-4);
  border-color: var(--gem-accent);
}

/* ==========================================================================
   Universal SmoothUI Compact Button Coverage + AI SDK Pro Blocks Modals,
   Chat Bot Window, Catalog Live Specimen Stage & Feature Catalogue UI
   ========================================================================== */
button:not(.dk-nav-item):not(.mobile-nav-btn):not(.segmented-btn):not(.tab-btn):not(.subtab-btn),
.btn,
.btn-primary,
.btn-secondary,
.btn-subdued,
.btn-ghost,
.btn-danger,
.btn-emph,
.collapse-trigger,
.topbar-pill,
.suite-pill,
.seed-pill,
.modal-close-btn,
.icon-touch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--gem-radius-full);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--gem-shadow-xs);
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease-out),
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.btn-primary,
.suite-pill.active,
.seed-pill.active {
  background: var(--gem-brand);
  color: var(--gem-brand-on);
  border-color: var(--gem-brand);
}

.btn-emph {
  background: var(--gem-accent-subtle);
  color: var(--gem-accent);
  border-color: var(--gem-accent);
}

.btn-subdued,
.btn-secondary,
.btn-ghost,
.collapse-trigger {
  background: var(--gem-bg-muted);
  color: var(--gem-fg2);
  border-color: var(--gem-border);
}

.btn-danger {
  background: var(--gem-danger-subtle);
  color: var(--gem-danger);
  border-color: var(--gem-danger);
}

.modal-close-btn,
.icon-touch-btn {
  min-width: 28px;
  padding: 0 8px;
}

@media (max-width: 640px) {
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-subdued,
  .btn-ghost,
  .btn-danger,
  .btn-emph,
  .collapse-trigger,
  .topbar-pill,
  .suite-pill,
  .seed-pill,
  .modal-close-btn,
  .icon-touch-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
  }
}

/* AI SDK Pro Blocks Modals & Chat Window */
.modal-backdrop {
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.modal-dialog {
  max-width: 780px;
  width: min(94vw, 780px);
  border-radius: var(--gem-radius-lg);
  border: 1px solid var(--gem-aisdk-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  box-shadow: var(--gem-shadow-lg);
  overflow: hidden;
}

.assistant-drawer-panel {
  border-left: 1px solid var(--gem-aisdk-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  box-shadow: var(--gem-shadow-lg);
}

.aisdk-pro-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  border-radius: 0 0 var(--gem-radius-md) var(--gem-radius-md);
}

.aisdk-pro-model-select {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--gem-radius-full);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
}

/* Token & Component Catalog Live Rendered Preview Stage */
.catalog-card-inline-preview {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-live-stage {
  margin: 10px 0;
  padding: 16px;
  border-radius: var(--gem-radius-lg);
  border: 1px solid var(--gem-aisdk-border);
  background: var(--gem-bg-muted);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--gem-shadow-sm);
}

.catalog-live-stage-canvas {
  padding: 16px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Structured Feature Catalogue & Onboarding Result Cards */
.feature-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.feature-catalogue-card {
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--gem-shadow-xs);
}

.feature-catalogue-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gem-fg2);
}

.feature-contract-box {
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border-subtle);
  background: var(--gem-bg-muted);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Admin Integration Setup Helpers Grid */
.integration-helper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.integration-helper-card {
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Live System, Sync, Connected Agents & Active Project/Repo Status Bar */
.live-system-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
}

.live-status-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.live-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  color: var(--gem-fg1);
  font-size: 11.5px;
  font-weight: 500;
}

.live-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-success);
  box-shadow: 0 0 0 3px var(--gem-success-soft);
}

.live-status-select {
  min-width: 210px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .live-system-status-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .live-status-select {
    width: 100%;
    min-height: 44px;
  }
}

/* Hub Sync chip: label, state badge and counts wrap as whole units (never mid-label). */
#live-status-sync-pill {
  flex-wrap: wrap;
  row-gap: 2px;
  min-width: 0;
  max-width: 100%;
}
#live-status-sync-pill > span:first-child,
#live-status-sync-state {
  white-space: nowrap;
  flex: 0 0 auto;
}
#live-status-outbox-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  #live-status-sync-pill {
    border-radius: var(--gem-radius-md);
  }
  #live-status-outbox-meta {
    flex: 1 1 100%;
  }
}

/* Engine topology switch (Local Engine / Server Hub): two equal grid columns so the buttons
   never wrap into misaligned rows inside the pill; the sliding .sm-thumb is the only active
   surface (the active button itself stays transparent, otherwise two boxes render). */
.engine-mode-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}
.engine-mode-segmented > .segmented-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}
.engine-mode-segmented.sm-has-thumb > .segmented-btn.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (max-width: 640px) {
  .live-status-group > .engine-mode-segmented {
    display: grid;
    width: 100%;
    flex: 1 1 100%;
    border-radius: var(--gem-radius-md);
  }
  .engine-mode-segmented > .segmented-btn {
    min-height: 44px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: calc(var(--gem-radius-md) - 4px);
  }
  .engine-mode-segmented > .sm-thumb {
    border-radius: calc(var(--gem-radius-md) - 4px);
  }
}

/* ==========================================================================
   Gemba Design System + SmoothUI + AISDK Button System & Visual Component Studio
   ========================================================================== */
.btn,
.catalog-action-btn,
.assistant-option-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border-strong);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  font-family: var(--gem-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--gem-shadow-xs);
  transition:
    transform var(--gem-dur-fast) var(--gem-spring),
    background-color var(--gem-dur-fast) var(--gem-ease),
    border-color var(--gem-dur-fast) var(--gem-ease),
    box-shadow var(--gem-dur-fast) var(--gem-ease),
    color var(--gem-dur-fast) var(--gem-ease);
}

.btn:hover:not(:disabled),
.catalog-action-btn:hover:not(:disabled),
.assistant-option-pill:hover:not(:disabled) {
  background: var(--gem-bg-muted);
  border-color: var(--gem-fg3);
  transform: translateY(-1px);
  box-shadow: var(--gem-shadow-sm);
}

.btn:active:not(:disabled),
.catalog-action-btn:active:not(:disabled),
.assistant-option-pill:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:focus-visible,
.catalog-action-btn:focus-visible,
.assistant-option-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gem-surface), 0 0 0 4px var(--gem-ring);
}

.btn-primary,
.catalog-action-btn-primary {
  background: var(--gem-btn-primary, var(--gem-brand));
  color: var(--gem-on-primary, var(--gem-brand-on));
  border-color: var(--gem-btn-primary, var(--gem-brand));
  box-shadow: var(--gem-shadow-sm);
}

.btn-primary:hover:not(:disabled),
.catalog-action-btn-primary:hover:not(:disabled) {
  background: var(--gem-btn-primary-hover, var(--gem-accent));
  border-color: var(--gem-btn-primary-hover, var(--gem-accent));
  color: var(--gem-on-primary, var(--gem-brand-on));
}

.btn-secondary,
.catalog-action-btn-secondary {
  background: var(--gem-surface-elevated);
  color: var(--gem-fg1);
  border-color: var(--gem-border-strong);
}

.btn-emph,
.catalog-action-btn-emph {
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  border-color: var(--gem-accent);
}

.btn-emph:hover:not(:disabled),
.catalog-action-btn-emph:hover:not(:disabled) {
  background: var(--gem-accent);
  color: var(--gem-brand-on);
}

.btn-subdued,
.catalog-action-btn-subdued {
  background: transparent;
  color: var(--gem-fg2);
  border-color: var(--gem-border);
  box-shadow: none;
}

.btn-danger {
  background: var(--gem-critical-soft);
  color: var(--gem-critical);
  border-color: var(--gem-critical);
}

.btn-sm,
.catalog-action-btn.btn-sm {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11.5px;
}

/* Dedicated Visual Component Studio & Archetype Preview Stage */
.catalog-studio-viewer {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: var(--gem-radius-lg);
  border: 1px solid var(--gem-border-strong);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-studio-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gem-border);
}

.catalog-studio-stage {
  padding: 18px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.catalog-card-purpose {
  font-size: 12px;
  line-height: 1.45;
  color: var(--gem-fg2);
  margin: 4px 0 6px;
}

.catalog-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--gem-border);
}

.preview-archetype-box {
  padding: 12px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-interactive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  font-size: 11px;
  color: var(--gem-fg2);
}

.preview-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.preview-table-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.preview-table-mini th,
.preview-table-mini td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--gem-border);
}

.preview-table-mini th {
  font-weight: 600;
  color: var(--gem-fg2);
  background: var(--gem-bg-muted);
}

.preview-metric-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gem-fg1);
  letter-spacing: -0.02em;
}

.preview-sparkline-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  padding-top: 4px;
}

.preview-sparkline-bar {
  flex: 1;
  background: var(--gem-accent);
  border-radius: 2px 2px 0 0;
  min-height: 6px;
  transition: height var(--gem-dur-std) var(--gem-spring);
}

/* Extracted Reusable Functions Box on Feature Blueprint Cards */
.extracted-functions-box {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.extracted-fn-item {
  padding: 6px 8px;
  border-radius: var(--gem-radius-xs);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* AI Assistant Formatted Markdown & Follow-Up Option Pills */
.assistant-markdown-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gem-fg1);
  overflow-wrap: anywhere;
}

.assistant-markdown-body p {
  margin: 0;
}

.assistant-md-h2,
.assistant-md-h3,
.assistant-md-h4 {
  margin: 6px 0 2px;
  font-weight: 700;
  color: var(--gem-fg1);
  letter-spacing: -0.01em;
}

.assistant-md-h2 {
  font-size: 15px;
}

.assistant-md-h3 {
  font-size: 13.5px;
}

.assistant-md-h4 {
  font-size: 12.5px;
  color: var(--gem-fg2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.assistant-md-list {
  margin: 2px 0 4px 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assistant-md-hr {
  border: 0;
  border-top: 1px solid var(--gem-border);
  margin: 6px 0;
}

.assistant-inline-code {
  padding: 1px 5px;
  border-radius: var(--gem-radius-xs);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  font-family: var(--gem-font-mono);
  font-size: 11.5px;
}

.assistant-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gem-border);
}

.assistant-option-pill {
  border-radius: var(--gem-radius-pill);
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  border-color: var(--gem-accent);
  font-size: 11.5px;
}

@media (max-width: 640px) {
  .btn,
  .btn-sm,
  .catalog-action-btn,
  .assistant-option-pill {
    min-height: 44px;
  }
  .catalog-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .catalog-card-actions .btn,
  .catalog-card-actions .catalog-action-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-panel[aria-hidden="false"],
  .surface-card,
  .card,
  .kanban-card,
  .feature-blueprint-card,
  .design-specimen-card,
  .catalog-item-card,
  .admin-vendor-card,
  .admin-cascade-card,
  .aisdk-workflow-node,
  .modal-backdrop:not([hidden]) .modal-card,
  .slide-over-drawer:not([hidden]),
  .kanban-dossier-drawer:not([hidden]),
  .assistant-drawer-panel:not([hidden]),
  .badge-success,
  .aisdk-workflow-node.is-active,
  .sm-progress-fill::after,
  .aisdk-edge-path {
    animation: none !important;
    transition-duration: 0ms !important;
    transform: none !important;
  }
}

/* ==========================================================================
   v3.0.11 — better-generative-ui & better-chat-ui + Feature Library & App Directory
   ========================================================================== */

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 1. Generative UI 4-State Tool Cards (.genui-*) */
.genui-tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
  max-height: 60vh;
  overflow-y: auto;
  transition: border-color var(--gem-dur-fast) var(--gem-ease-out);
}

.genui-tool-card[data-tool-state="input-streaming"],
.genui-tool-card[data-tool-state="input-available"] {
  border-color: var(--gem-accent);
  background: var(--gem-surface-subtle);
}

.genui-tool-card[data-tool-state="output-available"] {
  border-color: var(--gem-success);
}

.genui-tool-card[data-tool-state="output-error"] {
  border-color: var(--gem-critical);
  background: var(--gem-critical-soft);
}

.genui-skeleton-row {
  height: 12px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-emph);
  width: 100%;
}

.genui-skeleton-row.short {
  width: 58%;
}

.genui-step-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  font-size: 12px;
}

.genui-step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--gem-fg2);
}

.genui-step-item[data-step-status="done"] {
  color: var(--gem-fg1);
}

.genui-step-item[data-step-status="running"] {
  color: var(--gem-accent);
  font-weight: 600;
}

.genui-kv-grid {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  gap: 6px 12px;
  padding: 8px 10px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  font-size: 12px;
}

.genui-kv-key {
  color: var(--gem-fg3);
  font-weight: 600;
  text-transform: capitalize;
}

.genui-kv-val {
  color: var(--gem-fg1);
  word-break: break-word;
}

.genui-sticky-btn[data-sticky-done="true"] {
  background: var(--gem-success-soft) !important;
  border-color: var(--gem-success) !important;
  color: var(--gem-success) !important;
  cursor: default !important;
  opacity: 0.92;
}

/* 2. Generative UI Side Artifact Drawer (#gdev-artifact-side-panel) */
.genui-artifact-drawer {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  z-index: 88;
  background: var(--gem-surface);
  border-left: 1px solid var(--gem-border-strong);
  box-shadow: var(--gem-shadow-lg);
  display: flex;
  flex-direction: column;
}

.genui-artifact-drawer[hidden] {
  display: none !important;
}

.genui-artifact-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 3. Top-Level Feature Library & Dependency Graph (.fl-*) */
.fl-dependency-graph-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  max-height: 360px;
  overflow-y: auto;
}

.fl-graph-node-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
}

.fl-graph-node-card[data-origin="manual_and_spec_verified"] {
  border-left: 3px solid var(--gem-success);
}

.fl-graph-node-card[data-origin="source_code_discovered"] {
  border-left: 3px solid var(--gem-accent);
}

.fl-blueprint-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
  transition:
    border-color var(--gem-dur-fast) var(--gem-ease-out),
    box-shadow var(--gem-dur-fast) var(--gem-ease-out);
}

.fl-blueprint-card:hover {
  border-color: var(--gem-border-strong);
  box-shadow: var(--gem-shadow-sm);
}

.fl-provenance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.fl-provenance-badge.manual-verified {
  background: var(--gem-success-soft);
  color: var(--gem-success);
  border: 1px solid var(--gem-success);
}

.fl-provenance-badge.code-discovered {
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  border: 1px solid var(--gem-accent);
}

/* 4. Onboarded Apps Directory Cards (.app-dir-*) */
.app-dir-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
}

.app-dir-card.is-active-workspace {
  border-color: var(--gem-accent);
  box-shadow: var(--gem-shadow-xs);
}

.app-dir-card.is-archived-workspace {
  opacity: 0.84;
  background: var(--gem-surface-subtle);
  border-style: dashed;
}

/* 5. better-chat-ui Thread, Reasoning, Citations & Composer (.bchat-*) */
.bchat-scroll-anchor-bar {
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
  margin-top: -34px;
  margin-bottom: 6px;
  position: relative;
  z-index: 5;
}

.bchat-jump-latest-pill {
  pointer-events: auto;
  border-radius: var(--gem-radius-pill);
  box-shadow: var(--gem-shadow-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-accent);
  color: var(--gem-accent);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
}

.bchat-edit-banner {
  margin: 0 10px 6px 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--gem-warning);
  background: var(--gem-warning-soft);
}

.bchat-send-stop-slot {
  min-width: 74px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.bchat-send-stop-slot[data-slot-mode="stop"] {
  background: var(--gem-critical-soft);
  border-color: var(--gem-critical);
  color: var(--gem-critical);
}

.bchat-reasoning-details {
  margin-bottom: 8px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  padding: 6px 10px;
  font-size: 11.5px;
}

.bchat-reasoning-details summary {
  cursor: pointer;
  color: var(--gem-fg2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bchat-citation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.bchat-citation-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  color: var(--gem-fg2);
  font-size: 11px;
  text-decoration: none;
}

.bchat-citation-chip:hover {
  border-color: var(--gem-accent);
  color: var(--gem-accent);
}

.bchat-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--gem-border);
  opacity: 0.85;
  transition: opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.assistant-msg-bubble:hover .bchat-action-bar,
.assistant-msg-bubble:focus-within .bchat-action-bar {
  opacity: 1;
}

.bchat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  min-height: 26px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  color: var(--gem-fg2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.bchat-action-btn:hover {
  border-color: var(--gem-accent);
  color: var(--gem-fg1);
}

.bchat-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
}

.bchat-thinking-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-accent);
  opacity: 0.65;
}

/* ============================================================================
   6. Developer / Admin / Tech Operator Dashboard (ui-craft-dense-dashboard + ../notebook Admin)
   ============================================================================ */

/* Sidebar Section Headers & Inline Keyboard Shortcuts */
.dk-nav-group-label {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gem-fg3);
  text-transform: uppercase;
  user-select: none;
}

.dk-nav-kbd {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: var(--gem-radius-xs);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-fg3);
  font-family: var(--gem-font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Operator Context & Breadcrumb Strip */
.operator-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 8px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  font-size: 12px;
}

.operator-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--gem-fg2);
  font-weight: 500;
}

.operator-breadcrumb strong {
  color: var(--gem-fg1);
  font-weight: 600;
}

.operator-breadcrumb-sep {
  color: var(--gem-fg3);
}

.operator-telemetry-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.operator-sparkline-svg {
  width: 88px;
  height: 24px;
  overflow: visible;
  vertical-align: middle;
}

.operator-time-range-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
}

.operator-time-pill {
  padding: 2px 7px;
  border-radius: var(--gem-radius-xs);
  border: none;
  background: transparent;
  color: var(--gem-fg2);
  font-family: var(--gem-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.operator-time-pill.active {
  background: var(--gem-surface);
  color: var(--gem-accent);
  font-weight: 600;
  box-shadow: var(--gem-shadow-xs);
}

/* Tier 1 Hero Metric Card vs Tier 2 Supporting Metric Cards (Signal-to-Noise Hierarchy) */
.dk-kpi-card.is-hero-kpi-card {
  background: color-mix(in srgb, var(--gem-accent) 5%, var(--gem-surface));
  border-color: color-mix(in srgb, var(--gem-accent) 32%, var(--gem-border));
}

.dk-kpi-card.is-hero-kpi-card .dk-kpi-value {
  font-size: 28px;
  color: var(--gem-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kpi-sparkline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.kpi-delta-neutral {
  font-size: 11px;
  color: var(--gem-fg2);
  font-family: var(--gem-font-mono);
  font-variant-numeric: tabular-nums;
}

/* 6px Semantic Status Dots (ui-craft-dense-dashboard: dots over noisy badges in tables) */
.op-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-fg3);
  margin-right: 6px;
  vertical-align: middle;
}

.op-status-dot.status-ok {
  background: var(--gem-success);
}

.op-status-dot.status-warn {
  background: var(--gem-warning);
}

.op-status-dot.status-err {
  background: var(--gem-critical);
}

.op-status-dot.status-info {
  background: var(--gem-accent);
}

/* ../notebook 12-Column Operator Telemetry & Triage Grid */
.nb-operator-12grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.nb-col-5 {
  grid-column: span 5 / span 5;
}

.nb-col-4 {
  grid-column: span 4 / span 4;
}

.nb-col-3 {
  grid-column: span 3 / span 3;
}

.nb-col-7 {
  grid-column: span 7 / span 7;
}

@media (max-width: 1024px) {
  .nb-col-5,
  .nb-col-4,
  .nb-col-3,
  .nb-col-7 {
    grid-column: span 12 / span 12;
  }
}

.nb-telemetry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
}

.nb-breakdown-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.nb-breakdown-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  color: var(--gem-fg1);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--gem-dur-fast) var(--gem-ease-out), background var(--gem-dur-fast) var(--gem-ease-out);
}

.nb-breakdown-tile:hover,
.nb-breakdown-tile.active {
  border-color: var(--gem-accent);
  background: color-mix(in srgb, var(--gem-accent) 8%, var(--gem-surface));
}

.nb-breakdown-tile-label {
  font-size: 10.5px;
  color: var(--gem-fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nb-breakdown-tile-val {
  font-family: var(--gem-font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gem-fg1);
}

/* Live ToolInvocation Execution Trace Strip */
.nb-tool-trace-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  font-family: var(--gem-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* High-Density Operator Data Tables (ui-craft-dense-dashboard + ../notebook) */
.op-table-scroll {
  width: 100%;
  max-height: 540px;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
}

.op-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
}

.op-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gem-fg2);
  background: var(--gem-bg-muted);
  border-bottom: 1px solid var(--gem-border);
  white-space: nowrap;
}

.op-data-table thead th.num-col,
.op-data-table tbody td.num-col {
  text-align: right;
  font-family: var(--gem-font-mono);
  font-variant-numeric: tabular-nums;
}

.op-data-table tbody tr {
  border-bottom: 1px solid var(--gem-border);
  transition: background 80ms ease;
}

.op-data-table tbody tr:hover {
  background: var(--gem-bg-muted);
}

.op-data-table tbody tr.is-selected-row {
  background: color-mix(in srgb, var(--gem-accent) 6%, var(--gem-surface));
  box-shadow: inset 2px 0 0 var(--gem-accent);
}

.op-data-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  color: var(--gem-fg1);
}

.op-proportion-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.op-proportion-track {
  flex: 1;
  height: 6px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  overflow: hidden;
}

.op-proportion-fill {
  height: 100%;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-accent);
}

/* Sticky Right-Column Inspector Card in 12-Col Split Views */
.nb-sticky-inspector {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-sm);
}

.nb-feature-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 6px;
}

.nb-flag-switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-bg-muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* Legacy embed mode for shell assistant panel (?embed=assistant) */
body[data-embed="assistant"] > *:not(#assistant-drawer-panel) {
  display: none !important;
}

body[data-embed="assistant"] {
  overflow: hidden !important;
  background: var(--gem-surface) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-embed="assistant"] #assistant-drawer-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

body[data-embed="assistant"] #btn-assistant-dock-toggle,
body[data-embed="assistant"] #btn-assistant-minimize,
body[data-embed="assistant"] #btn-assistant-close {
  display: none !important;
}