/* ==========================================================================
   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 (>= 44x44px, T42)
   -------------------------------------------------------------------------- */
.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: var(--gem-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--gem-space-2) var(--gem-space-3);
  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: var(--gem-body-size);
  font-weight: 600;
  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);
}

.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.97);
}

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

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

.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, 256px) minmax(0, 1fr);
  min-height: 100vh;
}

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

.app-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  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: var(--gem-space-3);
  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: 22px;
  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: 28px;
  height: 28px;
  border-radius: var(--gem-radius-sm);
  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: var(--gem-h5-size);
  color: var(--gem-fg1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.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: var(--btn-height-sm);
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-sm);
  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: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--gem-brand);
}

.nav-item,
.dk-nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  border-color: transparent;
  background: transparent;
  color: var(--gem-fg2);
  text-align: left;
  padding: 0 12px;
}

.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: var(--gem-tiny-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface-subtle);
  color: var(--gem-fg2);
  border: 1px solid var(--gem-border);
}

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

.dk-nav-item.active .dk-nav-count {
  background: var(--gem-brand);
  color: var(--gem-brand-on);
  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: 56px;
  padding: var(--gem-space-2) var(--gem-space-4);
  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: var(--gem-space-2);
}

.dk-search-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-width: 220px;
  background: var(--gem-surface-subtle);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  color: var(--gem-fg2);
}

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

.dk-tenant-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-2);
  padding: 4px 10px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  font-size: var(--gem-small-size);
}

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

.dk-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gem-space-3);
  padding: var(--gem-space-3) var(--gem-space-4) 0;
}

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

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

.dk-kpi-value {
  font-size: var(--gem-h3-size);
  font-weight: 700;
  color: var(--gem-fg1);
  letter-spacing: var(--gem-h3-track);
}

.dk-kpi-meta {
  font-size: var(--gem-small-size);
  color: var(--gem-fg2);
}

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

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

.topbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

.workspace-container {
  flex: 1;
  padding: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
  max-width: 100%;
  overflow-x: hidden;
}

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

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

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

.tab-btn,
.lens-tab-btn {
  position: relative;
  z-index: 1;
  border-color: transparent;
  background: transparent;
  color: var(--gem-fg2);
}

.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);
}

/* --------------------------------------------------------------------------
   CollapsiblePanel Primitive (.collapsible-panel + useCollapseState)
   -------------------------------------------------------------------------- */
.collapsible-panel {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-card);
  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: var(--gem-space-2) var(--gem-space-4);
  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: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}

/* --------------------------------------------------------------------------
   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: var(--gem-space-2) var(--gem-space-3);
  background: var(--gem-surface-subtle);
  border-bottom: 1px solid var(--gem-border);
  cursor: move;
  user-select: none;
}

.floating-panel-body {
  padding: var(--gem-space-3);
  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(280px, 1fr));
  gap: var(--gem-space-3);
}

.surface-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: var(--card-padding-compact);
  box-shadow: var(--gem-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

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

.input-field,
.select-field,
.textarea-field {
  min-height: 44px;
  padding: var(--gem-space-2) var(--gem-space-3);
  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: var(--gem-body-size);
  width: 100%;
}

.badge {
  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-small-size);
  font-weight: 600;
  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);
}

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

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

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

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

.graph-canvas-wrap {
  width: 100%;
  min-height: 360px;
  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: 360px;
  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: 680px;
  max-height: 85vh;
  background: var(--gem-surface-elevated);
  border: 1px solid var(--gem-border-strong);
  border-radius: var(--gem-radius-xl);
  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(460px, 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: var(--gem-space-4);
  overflow-y: auto;
}

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

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

.sm-toast {
  padding: var(--gem-space-3) var(--gem-space-4);
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-elevated);
  color: var(--gem-fg1);
  border: 1px solid var(--gem-border-strong);
  box-shadow: var(--gem-shadow-md);
  transition: transform var(--gem-dur-spring) var(--gem-spring), opacity var(--gem-dur-fast) var(--gem-ease-out);
}

.sm-enter {
  transition: transform var(--gem-dur-spring) var(--gem-spring), opacity var(--gem-dur) var(--gem-ease-out);
}

.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 {
  min-height: 44px;
  min-width: 44px;
  gap: var(--gem-space-2);
  background: var(--gem-surface-elevated);
  border-color: var(--gem-border-strong);
  box-shadow: var(--gem-shadow-sm);
}

.app-switcher-popover {
  position: absolute;
  top: calc(100% + var(--gem-space-2));
  left: 0;
  z-index: 55;
  width: min(440px, calc(100vw - 24px));
  max-height: 78vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  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: var(--gem-space-2);
}

.app-switcher-item {
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  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: var(--gem-space-2);
  flex-wrap: wrap;
}

.app-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

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

.cross-app-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  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: var(--gem-space-1);
  padding: 2px var(--gem-space-2);
  border-radius: var(--gem-radius-pill);
  font-size: var(--gem-small-size);
  font-weight: 600;
  background: var(--gem-accent-soft);
  color: var(--gem-accent);
  border: 1px solid var(--gem-border);
}

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-1);
  padding: 2px var(--gem-space-2);
  border-radius: var(--gem-radius-pill);
  font-family: var(--gem-font-mono);
  font-size: var(--gem-small-size);
  font-weight: 600;
  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(340px, 1fr));
  gap: var(--gem-space-4);
  align-items: start;
}

.coverage-files-list,
.generated-docs-list {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  max-height: 420px;
  overflow-y: auto;
}

.smooth-coverage-row {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  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: 8px;
  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: var(--gem-space-2);
  padding: var(--gem-space-4);
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-elevated);
  box-shadow: var(--gem-shadow-xs);
  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: var(--gem-space-3);
  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: var(--gem-small-size);
  line-height: var(--gem-small-lh);
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.feature-inject-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  margin-top: var(--gem-space-2);
}

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

.generated-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-4);
  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: var(--gem-space-1);
}

#onboarding-doc-tabs .segmented-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-weight: 600;
  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);
}

/* --------------------------------------------------------------------------
   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: var(--gem-space-2);
  padding: var(--gem-space-3);
  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: var(--gem-space-2);
  padding: var(--gem-space-3);
  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(220px, 1fr));
  gap: var(--gem-space-2);
}

.scaffold-infra-card,
.scaffold-oauth-card {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  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);
}

.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: var(--gem-space-3);
  border-color: var(--gem-border-strong);
}

#scaffold-preview-tabs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-1);
}

#scaffold-preview-tabs .segmented-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-weight: 600;
  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);
}

.scaffold-preview-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

/* --------------------------------------------------------------------------
   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: var(--gem-space-4);
}

.admin-subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: var(--gem-space-1);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
}

.admin-subtabs .segmented-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gem-fg2);
  font-weight: 600;
  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);
}

.admin-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

.admin-vendors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gem-space-4);
}

.admin-vendor-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.admin-sync-banner {
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-accent-soft);
  border: 1px solid var(--gem-border);
  color: var(--gem-fg1);
  font-size: var(--gem-small-size);
}

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

.admin-cascades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gem-space-4);
}

.admin-cascade-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.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 */
button,
.btn,
.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 {
  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: var(--gem-space-1);
  padding: 2px var(--gem-space-2);
  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: var(--gem-text-xs);
  font-weight: var(--gem-weight-semibold);
  line-height: 1.4;
  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-smoothui-pill-bg);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-1);
  gap: var(--gem-space-1);
  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-smoothui-pill-active);
  color: var(--gem-fg1);
  border-color: var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
}

.smoothui-animated-progress-bar {
  width: 100%;
  height: 8px;
  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: var(--gem-space-2);
  padding: var(--gem-space-3);
  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: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  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: var(--gem-text-sm);
  font-weight: var(--gem-weight-semibold);
  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: var(--gem-space-3);
  box-shadow: var(--gem-shadow-xs);
  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-xl);
  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);
  padding: var(--gem-space-3);
  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: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  font-size: var(--gem-text-sm);
  font-weight: var(--gem-weight-semibold);
}

.aisdk-file-diff {
  font-family: var(--gem-font-mono);
  font-size: var(--gem-text-xs);
  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(280px, 1fr));
  gap: var(--gem-space-3);
}

.gemba-specimen-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
}

.gemba-token-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--gem-space-2);
}

.gemba-token-swatch-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
}

.catalog-preview-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  overflow-y: auto;
}

.catalog-specimen-stage {
  padding: var(--gem-space-4);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg2);
  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: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
}

.kanban-gate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  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(260px, 1fr));
  gap: var(--gem-space-3);
  overflow-x: auto;
  padding-bottom: var(--gem-space-2);
  max-width: 100%;
}

.kanban-column {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
  min-height: 320px;
}

.kanban-card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
  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: var(--gem-space-2);
}

.kanban-card-move-btn,
.kanban-dossier-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gem-space-1);
  min-height: 44px;
  min-width: 44px;
  padding: var(--gem-space-1) var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  color: var(--gem-text);
  font-size: var(--gem-text-xs);
  font-weight: var(--gem-weight-semibold);
  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-brand);
  color: var(--gem-brand-on);
  border-color: var(--gem-brand);
}

.kanban-dossier-drawer {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  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: var(--gem-space-1);
  padding: var(--gem-space-1);
  border-radius: var(--gem-radius-md);
  background: var(--gem-smoothui-pill-bg);
  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: 72px;
  width: min(460px, 94vw);
  height: min(640px, calc(100vh - 96px));
  max-height: calc(100vh - 96px);
  z-index: 42;
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3);
  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;
  left: auto;
  top: 64px;
  bottom: 0;
  width: min(460px, 96vw);
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  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: var(--gem-space-2);
  padding-bottom: var(--gem-space-2);
  border-bottom: 1px solid var(--gem-border);
}

.assistant-header-brand {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

.assistant-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-1);
}

.assistant-history-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  max-height: 180px;
  overflow-y: auto;
  padding: var(--gem-space-2);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
}

.assistant-conversations-list {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
}

.assistant-conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  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);
  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: var(--gem-space-1);
  padding: var(--gem-space-1);
  border-radius: var(--gem-radius-md);
  background: var(--gem-smoothui-pill-bg);
  border: 1px solid var(--gem-border);
}

.assistant-mode-pill {
  min-height: 36px;
  padding: var(--gem-space-1) var(--gem-space-2);
  font-size: var(--gem-text-xs);
  border-radius: var(--gem-radius-sm);
}

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

.assistant-messages-list {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-2);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg2);
  border: 1px solid var(--gem-border);
}

.assistant-starter-prompts {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

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

.assistant-starter-btn {
  text-align: left;
  justify-content: flex-start;
  min-height: 44px;
}

.assistant-message-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-text);
  font-size: var(--gem-text-sm);
}

.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: var(--gem-space-2);
}

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

.assistant-provenance-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-1);
  min-height: 36px;
  padding: var(--gem-space-1) var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  border: 1px solid var(--gem-accent);
  color: var(--gem-text);
  font-size: var(--gem-text-xs);
  font-weight: var(--gem-weight-semibold);
  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: var(--gem-space-2);
  padding: var(--gem-space-3);
  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: var(--gem-space-1);
}

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

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

.assistant-minimized-pill {
  position: fixed;
  right: var(--gem-space-4);
  bottom: var(--gem-space-4);
  z-index: 43;
  min-height: 44px;
  min-width: 44px;
  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: var(--gem-space-2);
  min-height: 44px;
  padding: var(--gem-space-1) var(--gem-space-3);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-full);
  color: var(--gem-fg1);
  font-size: var(--gem-text-xs);
  font-weight: 600;
  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: var(--gem-space-2);
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-elevated);
  border: 1px dashed var(--gem-border);
  font-size: var(--gem-text-xs);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

.token-swatch-bar {
  height: 18px;
  width: 100%;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border-subtle);
  margin: var(--gem-space-1) 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 {
  min-height: 36px;
  padding: var(--gem-space-1) var(--gem-space-2);
  font-size: var(--gem-text-xs);
}

@media (max-width: 639px) {
  .btn-sm,
  .btn-xs {
    min-height: 44px;
    min-width: 44px;
  }
}

.select-control,
.input-control {
  min-height: 44px;
  padding: var(--gem-space-2) var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-text);
  font-family: var(--gem-font-sans);
  font-size: var(--gem-text-sm);
  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);
}

.select-control:focus,
.input-control:focus {
  outline: none;
  border-color: var(--gem-accent);
  box-shadow: 0 0 0 2px var(--gem-ring);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  border-radius: var(--gem-radius-lg);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  box-shadow: var(--gem-shadow-xs);
}

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

.card-title {
  margin: 0;
  font-size: var(--gem-text-base);
  font-weight: var(--gem-weight-semibold);
  color: var(--gem-text);
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

.field-row,
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-1);
}

.field-label,
.meta-label {
  font-size: var(--gem-text-xs);
  font-weight: var(--gem-weight-semibold);
  color: var(--gem-text-muted);
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gem-space-2);
  min-height: 44px;
  padding: var(--gem-space-1) var(--gem-space-3);
  border-radius: var(--gem-radius-full);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border);
  font-size: var(--gem-text-xs);
  font-weight: var(--gem-weight-medium);
  color: var(--gem-text);
  cursor: pointer;
}

.mono-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-bg-muted);
  border: 1px solid var(--gem-border-subtle);
  font-family: var(--gem-font-mono);
  font-size: var(--gem-text-xs);
  color: var(--gem-text-secondary);
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gem-space-1);
  padding: var(--gem-space-1);
  border-radius: var(--gem-radius-md);
  background: var(--gem-smoothui-pill-bg);
  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: var(--gem-space-2);
  padding: var(--gem-space-3);
  border-radius: var(--gem-radius-md);
  background: var(--gem-bg-elevated);
  border: 1px solid var(--gem-border);
}

.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--gem-space-2);
  border-radius: var(--gem-radius-full);
  background: var(--gem-accent-subtle);
  border: 1px solid var(--gem-aisdk-border);
  color: var(--gem-accent);
  font-size: var(--gem-text-xs);
  font-weight: var(--gem-weight-semibold);
  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: 11px;
  opacity: 0.85;
}

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

.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;
}

@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 {
    animation: none !important;
    transition-duration: 0ms !important;
    transform: none !important;
  }
}