/* /src/shared/design-system/compat.css */

@layer control-legacy, theme, base, components, utilities;
/* Keep layout utilities below Gaia. Legacy colour tokens and classes are
   imported after Gaia by gaia-consumer.css to preserve their original meaning. */
@layer control-legacy{

/* Cozero design system — canonical tokens + utility classes for the Control app.
   Ported from control-module/apps/web/src/styles/tokens.css (OKLCH navy
   #272C5F primary, finance indigo accent, AI green, Inter-first font stack). This file is the
   legacy utility layer; colour values and classes live in legacy-colors.css. */

* {
  box-sizing: border-box;
}
/* Gaia components own their border utility; legacy controls keep this fallback. */
*:where(:not([data-slot])) {
  border-color: oklch(var(--muted-bg));
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    'Inter',
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  background: oklch(var(--background));
  color: oklch(var(--primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button {
  font-family: inherit;
}

/* Reset all <button>s to behave like an unstyled action surface.
   Each custom button restyles itself. */
button:where(:not([data-slot='button']):not(.btn)) {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typography */
.h0 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.h3 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.body-bold {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.body {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}
.caption {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
}
.caption-bold {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
.eyebrow {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--muted) / 0.7);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

.border {
  border: 1px solid oklch(var(--muted-bg));
}
.border-b {
  border-bottom: 1px solid oklch(var(--muted-bg));
}
.border-t {
  border-top: 1px solid oklch(var(--muted-bg));
}
.border-r {
  border-right: 1px solid oklch(var(--muted-bg));
}
.border-l {
  border-left: 1px solid oklch(var(--muted-bg));
}
.divide-y > * + * {
  border-top: 1px solid oklch(var(--muted-bg));
}

.rounded-md {
  border-radius: 8px;
}
.rounded-lg {
  border-radius: 10px;
}
.rounded-xl {
  border-radius: 16px;
}
.rounded-2xl {
  border-radius: 20px;
}
.rounded-full {
  border-radius: 9999px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 150ms,
    border-color 150ms,
    opacity 150ms;
  white-space: nowrap;
}
button:not([data-slot='button']):focus-visible,
[role='button']:focus-visible,
[role='radio']:focus-visible,
a:focus-visible {
  outline: 2px solid oklch(var(--action));
  outline-offset: 2px;
}
.btn-primary {
  background: oklch(var(--primary));
  color: white;
}
.btn-primary:hover {
  background: oklch(var(--primary) / 0.92);
}
.btn-action {
  background: oklch(var(--action));
  color: white;
}
.btn-action:hover {
  background: oklch(var(--action) / 0.92);
}
.btn-outline {
  background: white;
  color: oklch(var(--primary));
  border: 1px solid oklch(var(--muted-bg));
}
.btn-outline:hover {
  border-color: oklch(var(--muted));
}
.btn-ghost {
  background: transparent;
  color: oklch(var(--primary));
}
.btn-ghost:hover {
  background: oklch(var(--muted-bg) / 0.6);
}
/* A disabled button reads as unavailable: faded, no hover, and the cursor says so. Its
   `title` carries the reason. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary:disabled:hover {
  background: oklch(var(--primary));
}
.btn-action:disabled:hover {
  background: oklch(var(--action));
}
.btn-outline:disabled:hover {
  border-color: oklch(var(--muted-bg));
}
.btn-ghost:disabled:hover {
  background: transparent;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}
.btn-pill {
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Card */
.card {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
}
.card-stat {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
  padding: 16px 18px;
}
.card-stat-accent {
  border-left: 4px solid oklch(var(--primary));
  padding-left: 14px;
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.badge-success {
  background: oklch(var(--green-bg));
  color: oklch(var(--green));
}
.badge-warning {
  background: oklch(var(--orange-bg));
  color: oklch(var(--orange));
}
.badge-error {
  background: oklch(var(--error-bg));
  color: oklch(var(--error));
}
.badge-info {
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
}
.badge-neutral {
  background: oklch(var(--muted-bg));
  color: oklch(var(--muted));
}
.badge-finance {
  background: oklch(var(--finance-soft));
  color: oklch(var(--finance));
}

/* Status dots */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.dot-success {
  background: oklch(var(--green));
}
.dot-warning {
  background: oklch(var(--orange));
}
.dot-error {
  background: oklch(var(--error));
}
.dot-info {
  background: oklch(var(--action));
}
.dot-ai {
  background: oklch(var(--ai));
}

.shadow-sm {
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.04),
    0 1px 1px rgba(20, 20, 40, 0.04);
}
.shadow-panel {
  box-shadow:
    0 30px 60px -10px rgba(20, 20, 40, 0.18),
    0 8px 20px -8px rgba(20, 20, 40, 0.08);
}
.shadow-pill {
  box-shadow: 8px 8px 12px 0px oklch(var(--muted-bg));
}

/* Flex / grid utils */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.flex-1 {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.grid {
  display: grid;
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-5 {
  gap: 20px;
}
.gap-6 {
  gap: 24px;
}
.gap-8 {
  gap: 32px;
}

/* Sidebar floating pill enter */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-left {
  animation: slideInLeft 150ms ease-out;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Overlay (Modal/Drawer) enter — see src/shared/ui/overlay.tsx */
@keyframes overlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-right {
  animation: slideInRight 200ms ease-out;
}
/* Inline row editor expand — see ledger-catalogs RowEditor */
@keyframes expandDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(var(--muted-bg));
  border-radius: 9999px;
  border: 2px solid oklch(var(--background));
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--secondary) / 0.5);
}

/* The Strategy-Builder view navigation scrolls sideways rather than wrapping,
   and a visible track would cost as much height as the row it protects. */
.sb-viewnav::-webkit-scrollbar {
  display: none;
}

/* A pill rail or chip strip that scrolls sideways inside a control of its own.
   The global scrollbar above is 10px of permanent track — a third of such a
   row's height. The partially-cut item at the edge is the affordance. */
.scroll-rail {
  scrollbar-width: none;
}
.scroll-rail::-webkit-scrollbar {
  display: none;
}

/* Page transition (opacity-only on purpose) */
@keyframes pageFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-fade {
  animation: pageFade 200ms ease-out;
}
/* A navigation the browser is already crossfading does not fade the page a second time. */
html:active-view-transition .page-fade {
  animation: none;
}

/* Subtle hover lift for clickable cards */
.hover-lift {
  transition:
    border-color 150ms,
    transform 150ms,
    box-shadow 150ms;
}
.hover-lift:hover {
  border-color: oklch(var(--muted) / 0.5);
}

/* Glow for finance-related highlight */
.finance-glow {
  box-shadow:
    0 0 0 1px oklch(var(--finance) / 0.2),
    0 8px 24px -8px oklch(var(--finance) / 0.25);
}

/* Planning exposure-slider thumb / track */
.planning-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
  margin-top: 0;
}
.planning-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
}
.planning-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
.planning-range::-moz-range-track {
  background: transparent;
  height: 4px;
}

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


/* /@fs//home/coder/control-poc/src/shared/design-system/tokens.css */
/* Cozero design system — canonical tokens + utility classes for the Control app.
   Ported from control-module/apps/web/src/styles/tokens.css (OKLCH navy
   #272C5F primary, finance indigo accent, AI green, Inter-first font stack). This file is the
   legacy utility layer; colour values and classes live in legacy-colors.css. */

* {
  box-sizing: border-box;
}
/* Gaia components own their border utility; legacy controls keep this fallback. */
*:where(:not([data-slot])) {
  border-color: oklch(var(--muted-bg));
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    'Inter',
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  background: oklch(var(--background));
  color: oklch(var(--primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button {
  font-family: inherit;
}

/* Reset all <button>s to behave like an unstyled action surface.
   Each custom button restyles itself. */
button:where(:not([data-slot='button']):not(.btn)) {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typography */
.h0 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.h3 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.body-bold {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.body {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}
.caption {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
}
.caption-bold {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
.eyebrow {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--muted) / 0.7);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

.border {
  border: 1px solid oklch(var(--muted-bg));
}
.border-b {
  border-bottom: 1px solid oklch(var(--muted-bg));
}
.border-t {
  border-top: 1px solid oklch(var(--muted-bg));
}
.border-r {
  border-right: 1px solid oklch(var(--muted-bg));
}
.border-l {
  border-left: 1px solid oklch(var(--muted-bg));
}
.divide-y > * + * {
  border-top: 1px solid oklch(var(--muted-bg));
}

.rounded-md {
  border-radius: 8px;
}
.rounded-lg {
  border-radius: 10px;
}
.rounded-xl {
  border-radius: 16px;
}
.rounded-2xl {
  border-radius: 20px;
}
.rounded-full {
  border-radius: 9999px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 150ms,
    border-color 150ms,
    opacity 150ms;
  white-space: nowrap;
}
button:not([data-slot='button']):focus-visible,
[role='button']:focus-visible,
[role='radio']:focus-visible,
a:focus-visible {
  outline: 2px solid oklch(var(--action));
  outline-offset: 2px;
}
.btn-primary {
  background: oklch(var(--primary));
  color: white;
}
.btn-primary:hover {
  background: oklch(var(--primary) / 0.92);
}
.btn-action {
  background: oklch(var(--action));
  color: white;
}
.btn-action:hover {
  background: oklch(var(--action) / 0.92);
}
.btn-outline {
  background: white;
  color: oklch(var(--primary));
  border: 1px solid oklch(var(--muted-bg));
}
.btn-outline:hover {
  border-color: oklch(var(--muted));
}
.btn-ghost {
  background: transparent;
  color: oklch(var(--primary));
}
.btn-ghost:hover {
  background: oklch(var(--muted-bg) / 0.6);
}
/* A disabled button reads as unavailable: faded, no hover, and the cursor says so. Its
   `title` carries the reason. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary:disabled:hover {
  background: oklch(var(--primary));
}
.btn-action:disabled:hover {
  background: oklch(var(--action));
}
.btn-outline:disabled:hover {
  border-color: oklch(var(--muted-bg));
}
.btn-ghost:disabled:hover {
  background: transparent;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}
.btn-pill {
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Card */
.card {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
}
.card-stat {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
  padding: 16px 18px;
}
.card-stat-accent {
  border-left: 4px solid oklch(var(--primary));
  padding-left: 14px;
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.badge-success {
  background: oklch(var(--green-bg));
  color: oklch(var(--green));
}
.badge-warning {
  background: oklch(var(--orange-bg));
  color: oklch(var(--orange));
}
.badge-error {
  background: oklch(var(--error-bg));
  color: oklch(var(--error));
}
.badge-info {
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
}
.badge-neutral {
  background: oklch(var(--muted-bg));
  color: oklch(var(--muted));
}
.badge-finance {
  background: oklch(var(--finance-soft));
  color: oklch(var(--finance));
}

/* Status dots */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.dot-success {
  background: oklch(var(--green));
}
.dot-warning {
  background: oklch(var(--orange));
}
.dot-error {
  background: oklch(var(--error));
}
.dot-info {
  background: oklch(var(--action));
}
.dot-ai {
  background: oklch(var(--ai));
}

.shadow-sm {
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.04),
    0 1px 1px rgba(20, 20, 40, 0.04);
}
.shadow-panel {
  box-shadow:
    0 30px 60px -10px rgba(20, 20, 40, 0.18),
    0 8px 20px -8px rgba(20, 20, 40, 0.08);
}
.shadow-pill {
  box-shadow: 8px 8px 12px 0px oklch(var(--muted-bg));
}

/* Flex / grid utils */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.flex-1 {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.grid {
  display: grid;
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-5 {
  gap: 20px;
}
.gap-6 {
  gap: 24px;
}
.gap-8 {
  gap: 32px;
}

/* Sidebar floating pill enter */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-left {
  animation: slideInLeft 150ms ease-out;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Overlay (Modal/Drawer) enter — see src/shared/ui/overlay.tsx */
@keyframes overlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-right {
  animation: slideInRight 200ms ease-out;
}
/* Inline row editor expand — see ledger-catalogs RowEditor */
@keyframes expandDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(var(--muted-bg));
  border-radius: 9999px;
  border: 2px solid oklch(var(--background));
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--secondary) / 0.5);
}

/* The Strategy-Builder view navigation scrolls sideways rather than wrapping,
   and a visible track would cost as much height as the row it protects. */
.sb-viewnav::-webkit-scrollbar {
  display: none;
}

/* A pill rail or chip strip that scrolls sideways inside a control of its own.
   The global scrollbar above is 10px of permanent track — a third of such a
   row's height. The partially-cut item at the edge is the affordance. */
.scroll-rail {
  scrollbar-width: none;
}
.scroll-rail::-webkit-scrollbar {
  display: none;
}

/* Page transition (opacity-only on purpose) */
@keyframes pageFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-fade {
  animation: pageFade 200ms ease-out;
}
/* A navigation the browser is already crossfading does not fade the page a second time. */
html:active-view-transition .page-fade {
  animation: none;
}

/* Subtle hover lift for clickable cards */
.hover-lift {
  transition:
    border-color 150ms,
    transform 150ms,
    box-shadow 150ms;
}
.hover-lift:hover {
  border-color: oklch(var(--muted) / 0.5);
}

/* Glow for finance-related highlight */
.finance-glow {
  box-shadow:
    0 0 0 1px oklch(var(--finance) / 0.2),
    0 8px 24px -8px oklch(var(--finance) / 0.25);
}

/* Planning exposure-slider thumb / track */
.planning-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
  margin-top: 0;
}
.planning-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
}
.planning-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
.planning-range::-moz-range-track {
  background: transparent;
  height: 4px;
}

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


/* /src/shared/design-system/gaia.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
    --container-6xl: 72rem;
    --tracking-wide: 0.025em;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --text-2xs: 0.625rem;
    --text-2xs--line-height: calc(0.875 / 0.625);
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --shadow-md: 0 30px 60px -10px rgb(var(--gaia-shadow-rgb) / 0.18), 0 8px 20px -8px rgb(var(--gaia-shadow-rgb) / 0.08);
    --radius-sm: calc(var(--gaia-radius) - 4px);
    --radius-md: calc(var(--gaia-radius) - 2px);
    --radius-xl: calc(var(--gaia-radius) + 4px);
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .row-0 {
    grid-row: 0;
  }
  .row-1 {
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-500 {
    grid-row: 500;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: 0px;
  }
  .m-1 {
    margin: var(--spacing);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .m-7 {
    margin: calc(var(--spacing) * 7);
  }
  .m-8 {
    margin: calc(var(--spacing) * 8);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-auto {
    margin-top: auto;
  }
  .box-content {
    box-sizing: content-box;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-\[7px\] {
    width: 7px;
    height: 7px;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-auto {
    height: auto;
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-\[80px\] {
    width: 80px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-\[196px\] {
    min-width: 196px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-\[var\(--gaia-destructive\)\] {
    border-color: var(--gaia-destructive);
  }
  .border-\[var\(--gaia-primary\)\] {
    border-color: var(--gaia-primary);
  }
  .border-\[var\(--gaia-secondary\)\] {
    border-color: var(--gaia-secondary);
  }
  .border-border {
    border-color: var(--gaia-border);
  }
  .border-input {
    border-color: var(--gaia-input);
  }
  .bg-\[var\(--gaia-primary\)\] {
    background-color: var(--gaia-primary);
  }
  .bg-\[var\(--gaia-secondary\)\] {
    background-color: var(--gaia-secondary);
  }
  .bg-background {
    background-color: var(--gaia-background);
  }
  .bg-card {
    background-color: var(--gaia-card);
  }
  .bg-destructive\/12 {
    background-color: var(--gaia-destructive);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gaia-destructive) 12%, transparent);
    }
  }
  .bg-muted {
    background-color: var(--gaia-muted);
  }
  .bg-muted\/50 {
    background-color: var(--gaia-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gaia-muted) 50%, transparent);
    }
  }
  .bg-primary\/12 {
    background-color: var(--gaia-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gaia-primary) 12%, transparent);
    }
  }
  .bg-sidebar-primary {
    background-color: var(--gaia-sidebar-primary);
  }
  .bg-success\/12 {
    background-color: var(--gaia-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gaia-success) 12%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warning\/12 {
    background-color: var(--gaia-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gaia-warning) 12%, transparent);
    }
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-2024 {
    padding: calc(var(--spacing) * 2024);
  }
  .p-2025 {
    padding: calc(var(--spacing) * 2025);
  }
  .px-0 {
    padding-inline: 0px;
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pr-1 {
    padding-right: var(--spacing);
  }
  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }
  .pr-1234 {
    padding-right: calc(var(--spacing) * 1234);
  }
  .text-right {
    text-align: right;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-2xs {
    font-size: var(--text-2xs);
    line-height: var(--tw-leading, var(--text-2xs--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .\[tab-size\:2\] {
    tab-size: 2;
  }
  .tab-1 {
    tab-size: 1;
  }
  .text-\[var\(--gaia-badge-destructive-foreground\)\] {
    color: var(--gaia-badge-destructive-foreground);
  }
  .text-\[var\(--gaia-badge-info-foreground\)\] {
    color: var(--gaia-badge-info-foreground);
  }
  .text-\[var\(--gaia-badge-success-foreground\)\] {
    color: var(--gaia-badge-success-foreground);
  }
  .text-\[var\(--gaia-badge-warning-foreground\)\] {
    color: var(--gaia-badge-warning-foreground);
  }
  .text-\[var\(--gaia-destructive\)\] {
    color: var(--gaia-destructive);
  }
  .text-\[var\(--gaia-foreground\)\] {
    color: var(--gaia-foreground);
  }
  .text-\[var\(--gaia-link-foreground\)\] {
    color: var(--gaia-link-foreground);
  }
  .text-\[var\(--gaia-primary\)\] {
    color: var(--gaia-primary);
  }
  .text-\[var\(--gaia-primary-foreground\)\] {
    color: var(--gaia-primary-foreground);
  }
  .text-\[var\(--gaia-secondary\)\] {
    color: var(--gaia-secondary);
  }
  .text-\[var\(--gaia-secondary-foreground\)\] {
    color: var(--gaia-secondary-foreground);
  }
  .text-ai {
    color: var(--gaia-ai);
  }
  .text-card-foreground {
    color: var(--gaia-card-foreground);
  }
  .text-destructive {
    color: var(--gaia-destructive);
  }
  .text-foreground {
    color: var(--gaia-foreground);
  }
  .text-muted {
    color: var(--gaia-muted);
  }
  .text-muted-foreground {
    color: var(--gaia-muted-foreground);
  }
  .text-primary {
    color: var(--gaia-primary);
  }
  .text-sidebar-primary-foreground {
    color: var(--gaia-sidebar-primary-foreground);
  }
  .text-success {
    color: var(--gaia-success);
  }
  .text-warning {
    color: var(--gaia-warning);
  }
  .text-white {
    color: #fff;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .shadow-md {
    --tw-shadow: 0 30px 60px -10px var(--tw-shadow-color, rgb(var(--gaia-shadow-rgb) / 0.18)), 0 8px 20px -8px var(--tw-shadow-color, rgb(var(--gaia-shadow-rgb) / 0.08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[font\:inherit\] {
    font: inherit;
  }
  .\[localstack\:init\] {
    localstack: init;
  }
  .block-1 {
    block-size: var(--spacing);
  }
  .placeholder\:text-muted-foreground::placeholder {
    color: var(--gaia-muted-foreground);
  }
  @media (hover: hover) {
    .hover\:bg-\[var\(--gaia-accent\)\]:hover {
      background-color: var(--gaia-accent);
    }
    .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
      background-color: var(--gaia-destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-destructive) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
      background-color: var(--gaia-primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-primary) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
      background-color: var(--gaia-primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
        background-color: color-mix(in oklab, var(--gaia-primary) 90%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
      background-color: var(--gaia-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-secondary) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
      background-color: var(--gaia-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
        background-color: color-mix(in oklab, var(--gaia-secondary) 90%, transparent);
      }
    }
    .hover\:text-\[var\(--gaia-accent-foreground\)\]:hover {
      color: var(--gaia-accent-foreground);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-\[var\(--gaia-ring\)\]:focus-visible {
    outline-color: var(--gaia-ring);
  }
  .focus-visible\:outline-ring:focus-visible {
    outline-color: var(--gaia-ring);
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:border-muted:disabled {
    border-color: var(--gaia-muted);
  }
  .disabled\:text-muted:disabled {
    color: var(--gaia-muted);
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--gaia-destructive);
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (width >= 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }
  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }
  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }
  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
}
.gaia-page-title, .gaia-kpi-value {
  font-size: var(--gaia-text-2xl);
  line-height: var(--gaia-text-2xl--line-height);
  font-weight: var(--gaia-font-weight-semibold);
  letter-spacing: -.025em;
  color: var(--gaia-foreground);
}
.gaia-kpi-label {
  font-size: var(--gaia-text-2xs);
  line-height: 1.3333333333;
  font-weight: var(--gaia-font-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gaia-muted-foreground);
}
.gaia-page-info {
  width: 1.3333333333rem;
  height: 1.3333333333rem;
}
.gaia-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gaia-table-detail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gaia-table-detail__table {
  isolation: isolate;
  min-width: 0;
  grid-column: span 3;
}
.gaia-table-detail__rail {
  min-width: 0;
  min-height: 260px;
  position: relative;
  grid-column: span 1;
}
.gaia-table-detail__rail-content {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.gaia-table-detail__rail-content > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}
.gaia-table-detail__grid[data-open="true"][data-table-span="1"] .gaia-table-detail__table {
  grid-column: span 1;
}
.gaia-table-detail__grid[data-open="true"][data-table-span="1"] .gaia-table-detail__rail {
  grid-column: span 3;
}
.gaia-table-detail__grid[data-open="true"][data-table-span="2"] .gaia-table-detail__table {
  grid-column: span 2;
}
.gaia-table-detail__grid[data-open="true"][data-table-span="2"] .gaia-table-detail__rail {
  grid-column: span 2;
}
.gaia-table-detail[data-filled="true"] {
  height: var(--gaia-table-detail-available);
  --gaia-scroll-cap-override: none;
}
.gaia-table-detail[data-filled="true"] .gaia-table-detail__grid {
  height: 100%;
  min-height: 0;
}
.gaia-table-detail[data-filled="true"] .gaia-table-detail__rail {
  min-height: 0;
}
.gaia-table-detail[data-filled="true"] .gaia-table-detail__table {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gaia-table-detail[data-filled="true"] .gaia-table-detail__table > *, .gaia-table-detail[data-filled="true"] .gaia-table-detail__table .card {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gaia-table-detail[data-filled="true"] [data-frozen-scroll] {
  flex: 1 1 auto;
  min-height: 0;
}
.gaia-table-detail[data-filled="true"] .gaia-data-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gaia-table-detail[data-filled="true"] .gaia-data-table__scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.gaia-detail-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
  overflow: hidden;
}
.gaia-detail-panel__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gaia-border);
}
.gaia-detail-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.gaia-panel-eyebrow {
  display: block;
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gaia-muted-foreground);
}
.gaia-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gaia-panel-section--divided {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gaia-border);
}
.gaia-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gaia-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: var(--gaia-radius-pill);
  background: oklch(from var(--gaia-muted) l c h / .7);
}
.gaia-toolbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 5px 12px;
  border-radius: var(--gaia-radius-pill);
  background: var(--gaia-foreground);
  color: white;
  font-size: var(--gaia-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.gaia-toolbar__pill--view {
  background: oklch(from var(--gaia-muted-foreground) l c h / .18);
  color: var(--gaia-foreground);
}
.gaia-toolbar__pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gaia-toolbar__remove {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 12px;
  cursor: pointer;
}
.gaia-toolbar__spacer {
  flex: 1;
  min-width: 0;
}
.gaia-toolbar__anchor {
  position: relative;
  flex: none;
}
.gaia-toolbar__trigger {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  position: relative;
  border: 0;
  border-radius: var(--gaia-radius-md);
  background: transparent;
  color: var(--gaia-muted-foreground);
  cursor: pointer;
}
.gaia-toolbar__trigger[aria-expanded="true"], .gaia-toolbar__trigger:hover {
  background: var(--gaia-card);
}
.gaia-toolbar__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gaia-primary);
}
.gaia-toolbar__actions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--gaia-foreground);
  border-radius: var(--gaia-radius-pill);
  background: transparent;
  color: var(--gaia-foreground);
  font-size: var(--gaia-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.gaia-toolbar__chevron {
  flex-shrink: 0;
}
.gaia-toolbar__actions-trigger[aria-expanded="true"] .gaia-toolbar__chevron {
  transform: rotate(180deg);
}
.gaia-toolbar__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 280px;
  max-width: min(90vw, 320px);
  max-height: 340px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-popover);
  box-shadow: var(--shadow-md);
}
.gaia-toolbar__menu {
  width: 224px;
}
.gaia-toolbar__action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--gaia-radius-md);
  background: transparent;
  color: var(--gaia-foreground);
  font-size: var(--gaia-text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.gaia-toolbar__action:hover {
  background: var(--gaia-accent);
}
.gaia-toolbar__action:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.gaia-toolbar__action--danger {
  color: var(--gaia-destructive);
  border-top: 1px solid var(--gaia-border);
  margin-top: 4px;
  padding-top: 10px;
}
.gaia-flow-card, .gaia-congrats-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
}
.gaia-flow-card {
  scroll-margin-top: 16px;
}
.gaia-flow-card[data-state="inactive"] {
  background: oklch(from var(--gaia-background) l c h / .4);
}
.gaia-flow-card[data-state="inactive"] .gaia-flow-card__body, .gaia-flow-card[data-state="inactive"] .gaia-flow-card__actions {
  opacity: .45;
}
.gaia-flow-card__head-wrap {
  display: flex;
  align-items: center;
}
.gaia-flow-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 22px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
}
.gaia-flow-card__head-wrap:has(.gaia-flow-card__info, .gaia-flow-card__control) .gaia-flow-card__head {
  width: auto;
  flex: 1;
}
.gaia-flow-card__head--button {
  cursor: pointer;
}
.gaia-flow-card__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gaia-flow-card__title-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gaia-flow-card__optional {
  padding: 2px 8px;
  border-radius: var(--gaia-radius-pill);
  background: var(--gaia-muted);
  color: var(--gaia-foreground);
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
}
.gaia-flow-card__control, .gaia-flow-card__reason, .gaia-flow-card__chevron {
  margin-left: auto;
  flex: none;
}
.gaia-flow-card__info, .gaia-flow-card__control {
  padding-right: 22px;
}
.gaia-flow-card__reason {
  color: var(--gaia-muted-foreground);
  font-size: var(--gaia-text-xs);
}
.gaia-flow-card__chevron {
  color: var(--gaia-muted-foreground);
  transition: transform .18s;
}
.gaia-flow-card__chevron--open {
  transform: rotate(180deg);
}
.gaia-flow-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 22px 22px;
}
.gaia-flow-card__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 0 22px 22px;
}
.gaia-flow-subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gaia-border);
}
.gaia-flow-fields-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gaia-flow-fields {
  display: grid;
  gap: 14px 16px;
}
.gaia-flow-fields[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gaia-flow-fields[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gaia-flow-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--gaia-radius-md);
  background: var(--gaia-background);
}
.gaia-flow-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--gaia-radius-md);
  background: oklch(from var(--gaia-warning) l c h / .12);
  color: var(--gaia-warning);
}
.gaia-selection-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gaia-selection-box {
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-md);
  background: var(--gaia-card);
}
.gaia-choice {
  border: 1px solid var(--gaia-border);
  background: var(--gaia-card);
}
.gaia-choice[aria-pressed="true"], .gaia-choice[data-selected="true"], .gaia-selection-box[data-selected="true"] {
  border-color: var(--gaia-foreground);
}
.gaia-selection-box__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
}
.gaia-selection-box__label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}
.gaia-selection-box__input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gaia-foreground);
  cursor: pointer;
}
.gaia-selection-box__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--gaia-text-base);
}
.gaia-selection-box__text span {
  color: var(--gaia-muted-foreground);
  font-size: var(--gaia-text-xs);
}
.gaia-selection-box__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.gaia-selection-box__aside {
  margin-left: auto;
}
.gaia-selection-box__toggle {
  border: 0;
  background: none;
  color: var(--gaia-muted-foreground);
  cursor: pointer;
}
.gaia-selection-box__detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
}
.gaia-selection-box[data-control] .gaia-selection-box__detail {
  padding-left: 42px;
}
.gaia-congrats-card {
  gap: 16px;
  padding: 22px;
}
.gaia-congrats-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.gaia-congrats-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gaia-muted-foreground);
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.gaia-congrats-card__title {
  max-width: 880px;
  margin: 4px 0 0;
  color: var(--gaia-foreground);
  font-size: var(--gaia-text-2xl);
  font-weight: 600;
  line-height: 1.25;
}
.gaia-congrats-card__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-md);
  overflow: hidden;
}
.gaia-congrats-card__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
}
.gaia-congrats-card__kpi:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--gaia-border);
}
.gaia-congrats-card__kpi:nth-child(n + 5) {
  border-top: 1px solid var(--gaia-border);
}
.gaia-congrats-card__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gaia-audit-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-background);
}
.gaia-audit-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gaia-audit-list {
  display: flex;
  flex-direction: column;
}
.gaia-audit-list__entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}
.gaia-audit-list__entry + .gaia-audit-list__entry {
  border-top: 1px solid var(--gaia-border);
}
.gaia-audit-list__line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gaia-audit-list__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gaia-foreground);
  font-size: var(--gaia-text-xs);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .gaia-congrats-card__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gaia-congrats-card__kpi {
    border-left: 0 !important;
    border-top: 0 !important;
  }
  .gaia-congrats-card__kpi:nth-child(2n) {
    border-left: 1px solid var(--gaia-border) !important;
  }
  .gaia-congrats-card__kpi:nth-child(n + 3) {
    border-top: 1px solid var(--gaia-border) !important;
  }
}
@media (max-width: 720px) {
  .gaia-page-grid, .gaia-table-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gaia-table-detail__table, .gaia-table-detail__rail {
    grid-column: 1 / -1 !important;
  }
  .gaia-table-detail__rail-content {
    position: static;
    min-height: 260px;
  }
  .gaia-table-detail[data-filled="true"] {
    height: auto;
    --gaia-scroll-cap-override: initial;
  }
  .gaia-table-detail[data-filled="true"] .gaia-table-detail__grid {
    height: auto;
  }
  .gaia-table-detail[data-filled="true"] .gaia-table-detail__rail {
    min-height: 260px;
  }
  .gaia-flow-fields[data-columns="2"], .gaia-flow-fields[data-columns="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .gaia-congrats-card__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .gaia-congrats-card__kpi {
    border-left: 0 !important;
    border-top: 0 !important;
  }
  .gaia-congrats-card__kpi + .gaia-congrats-card__kpi {
    border-top: 1px solid var(--gaia-border) !important;
  }
}
@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    background: var(--gaia-background);
    color: var(--gaia-foreground);
    font-family: var(--gaia-font-sans);
    font-optical-sizing: auto;
  }
  [data-slot="button"] {
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }
  [data-slot="input"] {
    font-family: inherit;
  }
  [data-slot="field"][data-invalid] [data-slot="field-description"] {
    display: none;
  }
}
:root {
  --gaia-background: oklch(96.5% 0.004 286);
  --gaia-foreground: oklch(21% 0.053 276);
  --gaia-card: oklch(100% 0 0);
  --gaia-card-foreground: oklch(21% 0.053 276);
  --gaia-popover: oklch(100% 0 0);
  --gaia-popover-foreground: oklch(21% 0.053 276);
  --gaia-primary: oklch(55% 0.22 258);
  --gaia-link-foreground: oklch(50% 0.22 258);
  --gaia-primary-foreground: oklch(100% 0 0);
  --gaia-secondary: oklch(21% 0.053 276);
  --gaia-secondary-foreground: oklch(100% 0 0);
  --gaia-muted: oklch(91% 0.01 276);
  --gaia-muted-foreground: oklch(37% 0.025 275);
  --gaia-accent: oklch(96.5% 0.004 286);
  --gaia-accent-foreground: oklch(21% 0.053 276);
  --gaia-destructive: oklch(59% 0.2 26);
  --gaia-border: oklch(91% 0.01 276);
  --gaia-input: oklch(91% 0.01 276);
  --gaia-ring: oklch(21% 0.053 276);
  --gaia-chart-1: oklch(60% 0.11 195);
  --gaia-chart-2: oklch(68% 0.12 95);
  --gaia-chart-3: oklch(55% 0.13 235);
  --gaia-chart-4: oklch(56.17% 0.1737 339.6);
  --gaia-tree-accent: oklch(39% 0.115 273);
  --gaia-chart-5: oklch(55% 0.1775 277.37);
  --gaia-sidebar: oklch(21% 0.053 276);
  --gaia-sidebar-foreground: oklch(100% 0 0);
  --gaia-sidebar-primary: oklch(44% 0.05 269);
  --gaia-sidebar-primary-foreground: oklch(100% 0 0);
  --gaia-sidebar-accent: oklch(100% 0 0 / 0.08);
  --gaia-sidebar-accent-foreground: oklch(100% 0 0);
  --gaia-sidebar-border: oklch(100% 0 0 / 0.12);
  --gaia-sidebar-ring: oklch(100% 0 0);
  --gaia-success: oklch(53% 0.17 141);
  --gaia-warning: oklch(71% 0.16 60);
  --gaia-badge-success-foreground: oklch(40% 0.13 141);
  --gaia-badge-warning-foreground: oklch(42% 0.12 60);
  --gaia-badge-destructive-foreground: oklch(43% 0.16 26);
  --gaia-badge-info-foreground: oklch(42% 0.18 258);
  --gaia-ai: oklch(70% 0.19 138);
  --gaia-ai-foreground: oklch(100% 0 0);
  --gaia-scope-1: oklch(62% 0.13 285);
  --gaia-scope-2: oklch(55% 0.09 148);
  --gaia-scope-3: oklch(61% 0.12 66);
  --gaia-radius: 0.625rem;
  --gaia-radius-sm: calc(var(--gaia-radius) - 4px);
  --gaia-radius-md: calc(var(--gaia-radius) - 2px);
  --gaia-radius-lg: var(--gaia-radius);
  --gaia-radius-xl: calc(var(--gaia-radius) + 4px);
  --gaia-shadow-rgb: 20 20 40;
  --gaia-shadow-deep-rgb: 0 0 0;
  --gaia-on-dark-rgb: 255 255 255;
  --gaia-illo-surface: white;
  --gaia-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gaia-text-2xs: 0.625rem;
  --gaia-text-2xs--line-height: calc(0.875 / 0.625);
  --gaia-text-xs: 0.75rem;
  --gaia-text-xs--line-height: calc(1 / 0.75);
  --gaia-text-sm: 0.875rem;
  --gaia-text-sm--line-height: calc(1.25 / 0.875);
  --gaia-text-base: 1rem;
  --gaia-text-base--line-height: calc(1.5 / 1);
  --gaia-text-lg: 1.125rem;
  --gaia-text-lg--line-height: calc(1.75 / 1.125);
  --gaia-text-xl: 1.25rem;
  --gaia-text-xl--line-height: calc(1.75 / 1.25);
  --gaia-text-2xl: 1.5rem;
  --gaia-text-2xl--line-height: calc(2 / 1.5);
  --gaia-text-3xl: 1.875rem;
  --gaia-text-3xl--line-height: calc(2.25 / 1.875);
  --gaia-text-4xl: 2.25rem;
  --gaia-text-4xl--line-height: calc(2.5 / 2.25);
  --gaia-leading-none: 1;
  --gaia-font-weight-normal: 400;
  --gaia-font-weight-semibold: 600;
  --gaia-radius-pill: 9999px;
  --gaia-radius-circle: 50%;
  --gaia-radius-off-1: 1px;
  --gaia-radius-off-2: 2px;
  --gaia-radius-off-3: 3px;
  --gaia-radius-off-4: 4px;
  --gaia-radius-off-5: 5px;
  --gaia-radius-off-6: 6px;
  --gaia-radius-off-7: 7px;
  --gaia-radius-off-9: 9px;
  --gaia-radius-off-11: 11px;
  --gaia-radius-off-12: 12px;
  --gaia-radius-off-13: 13px;
  --gaia-radius-off-14: 14px;
  --gaia-radius-off-18: 18px;
  --gaia-radius-off-20: 20px;
  --accent: var(--gaia-accent);
  --accent-foreground: var(--gaia-accent-foreground);
  --ai: var(--gaia-ai);
  --ai-foreground: var(--gaia-ai-foreground);
  --background: var(--gaia-background);
  --badge-destructive-foreground: var(--gaia-badge-destructive-foreground);
  --badge-info-foreground: var(--gaia-badge-info-foreground);
  --badge-success-foreground: var(--gaia-badge-success-foreground);
  --badge-warning-foreground: var(--gaia-badge-warning-foreground);
  --border: var(--gaia-border);
  --card: var(--gaia-card);
  --card-foreground: var(--gaia-card-foreground);
  --chart-1: var(--gaia-chart-1);
  --chart-2: var(--gaia-chart-2);
  --chart-3: var(--gaia-chart-3);
  --chart-4: var(--gaia-chart-4);
  --chart-5: var(--gaia-chart-5);
  --destructive: var(--gaia-destructive);
  --font-sans: var(--gaia-font-sans);
  --font-weight-normal: var(--gaia-font-weight-normal);
  --font-weight-semibold: var(--gaia-font-weight-semibold);
  --foreground: var(--gaia-foreground);
  --illo-surface: var(--gaia-illo-surface);
  --input: var(--gaia-input);
  --leading-none: var(--gaia-leading-none);
  --link-foreground: var(--gaia-link-foreground);
  --muted: var(--gaia-muted);
  --muted-foreground: var(--gaia-muted-foreground);
  --on-dark-rgb: var(--gaia-on-dark-rgb);
  --popover: var(--gaia-popover);
  --popover-foreground: var(--gaia-popover-foreground);
  --primary: var(--gaia-primary);
  --primary-foreground: var(--gaia-primary-foreground);
  --radius: var(--gaia-radius);
  --radius-circle: var(--gaia-radius-circle);
  --radius-lg: var(--gaia-radius-lg);
  --radius-md: var(--gaia-radius-md);
  --radius-off-1: var(--gaia-radius-off-1);
  --radius-off-11: var(--gaia-radius-off-11);
  --radius-off-12: var(--gaia-radius-off-12);
  --radius-off-13: var(--gaia-radius-off-13);
  --radius-off-14: var(--gaia-radius-off-14);
  --radius-off-18: var(--gaia-radius-off-18);
  --radius-off-2: var(--gaia-radius-off-2);
  --radius-off-20: var(--gaia-radius-off-20);
  --radius-off-3: var(--gaia-radius-off-3);
  --radius-off-4: var(--gaia-radius-off-4);
  --radius-off-5: var(--gaia-radius-off-5);
  --radius-off-6: var(--gaia-radius-off-6);
  --radius-off-7: var(--gaia-radius-off-7);
  --radius-off-9: var(--gaia-radius-off-9);
  --radius-pill: var(--gaia-radius-pill);
  --radius-sm: var(--gaia-radius-sm);
  --radius-xl: var(--gaia-radius-xl);
  --ring: var(--gaia-ring);
  --scope-1: var(--gaia-scope-1);
  --scope-2: var(--gaia-scope-2);
  --scope-3: var(--gaia-scope-3);
  --secondary: var(--gaia-secondary);
  --secondary-foreground: var(--gaia-secondary-foreground);
  --shadow-deep-rgb: var(--gaia-shadow-deep-rgb);
  --shadow-rgb: var(--gaia-shadow-rgb);
  --sidebar: var(--gaia-sidebar);
  --sidebar-accent: var(--gaia-sidebar-accent);
  --sidebar-accent-foreground: var(--gaia-sidebar-accent-foreground);
  --sidebar-border: var(--gaia-sidebar-border);
  --sidebar-foreground: var(--gaia-sidebar-foreground);
  --sidebar-primary: var(--gaia-sidebar-primary);
  --sidebar-primary-foreground: var(--gaia-sidebar-primary-foreground);
  --sidebar-ring: var(--gaia-sidebar-ring);
  --success: var(--gaia-success);
  --text-2xl: var(--gaia-text-2xl);
  --text-2xl--line-height: var(--gaia-text-2xl--line-height);
  --text-2xs: var(--gaia-text-2xs);
  --text-2xs--line-height: var(--gaia-text-2xs--line-height);
  --text-3xl: var(--gaia-text-3xl);
  --text-3xl--line-height: var(--gaia-text-3xl--line-height);
  --text-4xl: var(--gaia-text-4xl);
  --text-4xl--line-height: var(--gaia-text-4xl--line-height);
  --text-base: var(--gaia-text-base);
  --text-base--line-height: var(--gaia-text-base--line-height);
  --text-lg: var(--gaia-text-lg);
  --text-lg--line-height: var(--gaia-text-lg--line-height);
  --text-sm: var(--gaia-text-sm);
  --text-sm--line-height: var(--gaia-text-sm--line-height);
  --text-xl: var(--gaia-text-xl);
  --text-xl--line-height: var(--gaia-text-xl--line-height);
  --text-xs: var(--gaia-text-xs);
  --text-xs--line-height: var(--gaia-text-xs--line-height);
  --warning: var(--gaia-warning);
}
.gaia-flow {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.gaia-flow-card__validation {
  padding: 0 22px 12px;
  color: var(--gaia-destructive);
  font-size: var(--gaia-text-xs);
}
.gaia-flow-card__actions button {
  border-radius: var(--gaia-radius-pill);
}
.gaia-toolbar__popover input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--gaia-input);
  border-radius: var(--gaia-radius-md);
  background: var(--gaia-card);
  color: var(--gaia-foreground);
}
.gaia-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gaia-panel-row strong {
  font-weight: 600;
}
.gaia-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--gaia-dialog-z, 200) - 1);
  background: oklch(from var(--gaia-foreground) l c h / .28);
  transition: opacity 120ms ease-out;
}
.gaia-dialog__backdrop[data-placement="end"] {
  background: oklch(from var(--gaia-foreground) l c h / .18);
}
.gaia-dialog__backdrop[data-starting-style], .gaia-dialog__backdrop[data-ending-style] {
  opacity: 0;
}
.gaia-dialog__viewport {
  position: fixed;
  inset: 0;
  z-index: var(--gaia-dialog-z, 200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gaia-dialog__viewport[data-placement="end"] {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.gaia-dialog__surface {
  display: flex;
  flex-direction: column;
  width: min(var(--gaia-dialog-width, 560px), calc(100vw - 48px));
  height: var(--gaia-dialog-height);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
  box-shadow: var(--shadow-md);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.gaia-dialog__surface:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}
.gaia-dialog__surface[data-starting-style], .gaia-dialog__surface[data-ending-style] {
  opacity: 0;
  transform: scale(.97);
}
.gaia-dialog__surface[data-placement="end"] {
  width: min(var(--gaia-dialog-width, 480px), calc(100vw - 28px));
  height: 100%;
  max-height: none;
  border: 0;
  border-left: 1px solid var(--gaia-border);
  border-radius: 0;
}
.gaia-dialog__surface[data-placement="end"][data-starting-style], .gaia-dialog__surface[data-placement="end"][data-ending-style] {
  opacity: 1;
  transform: translateX(100%);
}
.gaia-dialog__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gaia-border);
}
.gaia-dialog__title {
  font-size: 17px;
  line-height: 22px;
}
.gaia-dialog__head .gaia-panel-eyebrow + .gaia-dialog__title {
  margin-top: 2px;
}
.gaia-dialog__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--gaia-radius-md);
  background: transparent;
  color: var(--gaia-muted-foreground);
  cursor: pointer;
}
.gaia-dialog__close svg {
  width: 14px;
  height: 14px;
}
.gaia-dialog__close:hover {
  background: var(--gaia-muted);
  color: var(--gaia-foreground);
}
.gaia-dialog__close:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}
.gaia-dialog__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 20px;
  overflow: auto;
}
.gaia-dialog__surface:not([data-placement="end"]):not([data-sized]) .gaia-dialog__body {
  flex: 0 1 auto;
}
.gaia-dialog__aside {
  flex: none;
}
.gaia-dialog__foot {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--gaia-border);
}
@media (prefers-reduced-motion: reduce) {
  .gaia-dialog__backdrop, .gaia-dialog__surface {
    transition: none;
  }
  .gaia-dialog__surface[data-starting-style], .gaia-dialog__surface[data-ending-style] {
    transform: none;
  }
}
.gaia-info__intro {
  margin: 0;
  line-height: 1.6;
  color: var(--gaia-muted-foreground);
}
.gaia-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 8px;
  align-items: start;
}
.gaia-info__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
}
.gaia-info__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.gaia-info__head:disabled {
  cursor: default;
}
.gaia-info__head:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}
.gaia-info__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--gaia-radius-md);
  background: oklch(from var(--gaia-primary) l c h / .08);
  color: var(--gaia-primary);
}
.gaia-info__name {
  flex: 1;
  min-width: 0;
  font-size: var(--gaia-text-sm);
  font-weight: 600;
  color: var(--gaia-foreground);
}
.gaia-info__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--gaia-muted-foreground);
  transition: transform 160ms ease-out;
}
.gaia-info__chevron[data-open] {
  transform: rotate(180deg);
}
.gaia-info__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--gaia-text-xs);
  line-height: 1.5;
  color: var(--gaia-muted-foreground);
}
.gaia-info__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 0;
  padding-left: 18px;
}
.gaia-info__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--gaia-border);
}
.gaia-info__block-title {
  margin: 2px 0 0;
  font-size: var(--gaia-text-base);
  font-weight: 600;
  color: var(--gaia-foreground);
}
@media (prefers-reduced-motion: reduce) {
  .gaia-info__chevron {
    transition: none;
  }
}
.gaia-dialog__viewport.gaia-page-modal {
  align-items: stretch;
  padding: 0;
}
.gaia-dialog__backdrop.gaia-page-modal-backdrop {
  background: transparent;
}
.gaia-page-modal .gaia-dialog__surface {
  position: fixed;
  inset: 0 0 0 var(--gaia-shell-sidebar-width, 0px);
  width: auto;
  min-height: 100vh;
  max-height: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--gaia-background);
  box-shadow: none;
  overflow-y: auto;
  transform: none;
}
.gaia-page-modal .gaia-dialog__head {
  height: 80px;
  min-height: 80px;
  padding: 14px 28px;
  border-bottom: 0;
  background: var(--gaia-background);
  position: sticky;
  top: 0;
  z-index: 2;
}
.gaia-page-modal .gaia-panel-eyebrow {
  text-transform: none;
}
.gaia-page-modal .gaia-dialog__title {
  font-size: 24px;
  line-height: 1.2;
}
.gaia-page-modal .gaia-dialog__body {
  width: min(880px, calc(100% - 64px));
  margin: 16px auto 60px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  flex: none;
}
.gaia-page-modal .gaia-dialog__foot {
  position: fixed;
  top: 22px;
  right: 100px;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
}
.gaia-page-modal .gaia-dialog__foot > span:first-child {
  display: none;
}
.gaia-page-modal .gaia-dialog__foot button {
  border-radius: var(--gaia-radius-pill);
  padding: 8px 14px;
}
.gaia-page-modal .gaia-dialog__foot button.btn-action {
  background: var(--gaia-primary);
  color: var(--gaia-primary-foreground);
}
.gaia-page-modal .gaia-dialog__foot button.btn-outline {
  background: var(--gaia-card);
  color: var(--gaia-primary);
  border: 1px solid var(--gaia-primary);
}
.gaia-page-modal .gaia-dialog__aside, .gaia-page-modal__steps {
  position: fixed;
  left: calc(var(--gaia-shell-sidebar-width, 0px) + 26px);
  top: 108px;
  z-index: 3;
  width: 188px;
}
.gaia-page-modal [data-slot='flow-card'] {
  scroll-margin-top: 106px;
}
.gaia-page-modal:has(.gaia-dialog__aside) .gaia-dialog__body {
  width: min(880px, calc(100vw - 368px));
  margin: 16px 32px 64px calc(var(--gaia-shell-sidebar-width, 0px) + 167px);
}
.gaia-authoring-flow {
  display: grid;
  grid-template-columns: 188px minmax(0, 880px);
  align-items: start;
  gap: 32px;
  padding-bottom: 64px;
}
.gaia-authoring-flow__rail {
  position: sticky;
  top: 8px;
}
.gaia-authoring-flow__content {
  min-width: 0;
}
.gaia-authoring-flow__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
  scroll-margin-top: 24px;
}
.gaia-editor-page {
  position: fixed;
  inset: 0 0 0 var(--gaia-shell-sidebar-width, 0px);
  z-index: 150;
  overflow-y: auto;
  background: var(--gaia-background);
}
.gaia-editor-page__content {
  position: relative;
  min-height: 100vh;
  margin: 0 32px 0 27px;
  padding: 16px 0 48px;
}
.gaia-editor-page__header {
  height: 80px;
}
.gaia-editor-page__header span {
  color: var(--gaia-muted-foreground);
  font-size: 12px;
}
.gaia-editor-page__header h2 {
  margin: 2px 0 0;
  color: var(--gaia-foreground);
  font-size: 24px;
}
.gaia-editor-page__layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 880px);
  gap: 32px;
  align-items: start;
}
.gaia-editor-page__steps {
  position: sticky;
  top: 24px;
}
.gaia-editor-cards {
  min-width: 0;
}
.gaia-editor-cards > section {
  scroll-margin-top: 24px;
}
.gaia-editor-page .gaia-editor-actions {
  position: fixed !important;
  top: 22px;
  right: 112px;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.gaia-editor-actions .btn {
  border-radius: var(--gaia-radius-pill);
}
.gaia-editor-actions [data-slot="button"] {
  margin-left: 0 !important;
}
.gaia-editor-actions [data-slot="button"][data-variant="default"] {
  order: 2;
}
.gaia-editor-actions > .caption {
  max-width: 180px;
}
@media (max-width: 900px) {
  .gaia-page-modal .gaia-dialog__aside, .gaia-page-modal__steps {
    display: none;
  }
  .gaia-page-modal .gaia-dialog__body, .gaia-page-modal:has(.gaia-dialog__aside) .gaia-dialog__body {
    width: calc(100% - 32px);
    margin: 16px auto 80px;
  }
  .gaia-page-modal .gaia-dialog__foot {
    top: auto;
    bottom: 16px;
    right: 24px;
  }
  .gaia-editor-page__layout, .gaia-authoring-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .gaia-editor-page__steps, .gaia-authoring-flow__rail {
    position: static;
  }
  .gaia-editor-page__steps nav, .gaia-authoring-flow__rail nav {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px !important;
  }
}
.gaia-badge--compact {
  font-size: var(--gaia-text-2xs);
  line-height: 1.3333333333;
  letter-spacing: .04em;
  gap: 5px;
  padding: 2px 8px;
}
.gaia-badge--compact .gaia-badge-dot {
  width: 5px;
  height: 5px;
}
.gaia-badge--compact[data-variant="success"] {
  color: var(--gaia-success);
}
.gaia-badge--compact[data-variant="info"] {
  color: var(--gaia-primary);
}
.gaia-badge--compact[data-variant="warning"] {
  color: var(--gaia-warning);
  background: oklch(from var(--gaia-warning) l c h / .14);
}
.gaia-data-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
}
.gaia-data-table__scroll {
  overflow: auto;
  max-height: var(--gaia-scroll-cap-override, 620px);
}
.gaia-data-table table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.gaia-data-table th {
  box-sizing: border-box;
  height: 64px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gaia-card);
  border-bottom: 1px solid var(--gaia-border);
  text-align: left;
}
.gaia-data-table th button, .gaia-data-table__heading {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--gaia-muted-foreground);
  font-size: var(--gaia-text-2xs);
  line-height: 1.3333333333;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gaia-data-table th button {
  cursor: pointer;
}
.gaia-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gaia-border);
  vertical-align: middle;
  white-space: nowrap;
  font-size: var(--gaia-text-xs);
  line-height: var(--gaia-text-xs--line-height);
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.gaia-data-table td:first-child {
  border-left: 2px solid transparent;
}
.gaia-data-table tr[data-selected="true"] {
  background: oklch(from var(--gaia-foreground) l c h / .06);
}
.gaia-data-table tr[data-selected="true"] td:first-child {
  border-left-color: var(--gaia-foreground);
}
.gaia-data-table tr[role="button"] {
  cursor: pointer;
}
.gaia-data-table tr[role="button"]:hover {
  background: oklch(from var(--gaia-foreground) l c h / .04);
}
.gaia-data-table tr[role="button"]:focus-visible {
  outline: 2px solid var(--gaia-foreground);
  outline-offset: -2px;
}
.gaia-data-table__empty {
  margin: 0;
  padding: 16px 12px;
  font-size: var(--gaia-text-xs);
  color: var(--gaia-muted-foreground);
}
.gaia-forecast-layout {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 380px;
}
.gaia-forecast-layout__stages {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 8px;
}
.gaia-forecast-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: oklch(from var(--gaia-muted) l c h / .18);
}
.gaia-forecast-stage[data-selected="true"] {
  border-color: var(--gaia-foreground);
}
.gaia-forecast-stage__select {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.gaia-forecast-stage__label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gaia-muted-foreground);
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.gaia-forecast-stage__swatch {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex: none;
}
.gaia-forecast-stage strong {
  font-size: var(--gaia-text-lg);
  line-height: 1.35;
  font-weight: 600;
  color: var(--gaia-foreground);
  font-variant-numeric: tabular-nums;
}
.gaia-forecast-stage small {
  font-size: var(--gaia-text-2xs);
  font-weight: 400;
  color: var(--gaia-muted-foreground);
}
.gaia-forecast-stage__check {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gaia-border);
  border-radius: 50%;
  font-size: 7px;
  line-height: 7px;
  color: var(--gaia-foreground);
}
.gaia-forecast-stage[data-selected="true"] .gaia-forecast-stage__check {
  border-color: var(--gaia-foreground);
}
.gaia-forecast-stage__action {
  display: flex;
  margin-top: 2px;
}
.gaia-forecast-stage__action a, .gaia-forecast-stage__action button {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid var(--gaia-border);
  border-radius: 999px;
  color: var(--gaia-foreground);
  background: var(--gaia-card);
  font-size: var(--gaia-text-2xs);
  line-height: 1.3333333333;
  font-weight: 600;
  cursor: pointer;
}
.gaia-forecast-stage__connector {
  position: absolute;
  bottom: -11px;
  left: calc(50% - 8px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gaia-border);
  border-radius: 50%;
  background: var(--gaia-card);
  color: var(--gaia-muted-foreground);
  font-size: 12px;
}
.gaia-forecast-layout__plot {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-xl);
  background: var(--gaia-card);
}
@media (max-width: 600px) {
  .gaia-forecast-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .gaia-forecast-layout__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gaia-forecast-stage__connector {
    display: none;
  }
}
.gaia-forecast-chart {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 390px;
}
.gaia-forecast-chart__canvas {
  flex: 1;
  min-height: 340px;
  position: relative;
}
.gaia-forecast-chart__canvas svg {
  display: block;
  cursor: crosshair;
}
.gaia-forecast-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 8px;
  font-size: var(--gaia-text-xs);
  color: var(--gaia-muted-foreground);
}
.gaia-forecast-chart__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gaia-forecast-chart__legend-mark {
  width: 12px;
  height: 0;
  border-top: 2px solid currentColor;
}
.gaia-forecast-chart__legend-mark[data-type="reference"] {
  border-top-style: dashed;
}
.gaia-forecast-chart__legend-mark[data-type="area"] {
  height: 8px;
  border: 0;
  opacity: .25;
}
.gaia-forecast-chart__tooltip {
  position: absolute;
  top: 12px;
  right: 12px;
}
.gaia-tree-node {
  position: relative;
  background: var(--gaia-card);
  border: 1.5px solid var(--gaia-border);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 132px;
  max-width: 220px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}
.gaia-tree-node[data-selected="true"] {
  border-color: var(--gaia-tree-accent);
  box-shadow: 0 6px 18px -10px var(--gaia-tree-accent);
}
.gaia-tree-node[data-dimmed="true"] {
  opacity: .5;
}
.gaia-tree-node:hover {
  border-color: var(--gaia-tree-accent);
}
.gaia-tree-node__icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--gaia-accent);
  color: var(--gaia-tree-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gaia-tree-node[data-selected="true"] .gaia-tree-node__icon {
  background: var(--gaia-tree-accent);
  color: var(--gaia-sidebar-foreground);
}
.gaia-tree-node__label {
  color: var(--gaia-foreground);
  font-weight: 600;
}
.gaia-tree-node__kind {
  padding-left: 26px;
  font-size: 10.5px;
  color: var(--gaia-muted-foreground);
}
.gaia-editor-page__header-actions {
  position: fixed;
  top: 20px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}


/* /@fs//home/coder/control-poc/node_modules/tailwindcss/theme.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */


/* /@fs//home/coder/control-poc/node_modules/tailwindcss/utilities.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
.\@container {
  container-type: inline-size;
}
.pointer-events-none {
  pointer-events: none;
}
.collapse {
  visibility: collapse;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.row-0 {
  grid-row: 0;
}
.row-1 {
  grid-row: 1;
}
.row-2 {
  grid-row: 2;
}
.row-500 {
  grid-row: 500;
}
.container {
  width: 100%;
}
.mx-auto {
  margin-inline: auto;
}
.mt-auto {
  margin-top: auto;
}
.box-content {
  box-sizing: content-box;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.list-item {
  display: list-item;
}
.table {
  display: table;
}
.size-\[7px\] {
  width: 7px;
  height: 7px;
}
.h-auto {
  height: auto;
}
.w-\[80px\] {
  width: 80px;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.min-w-\[196px\] {
  min-width: 196px;
}
.flex-1 {
  flex: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-baseline {
  align-items: baseline;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.gap-\[3px\] {
  gap: 3px;
}
:where(.divide-y > :not(:last-child)) {
  --tw-divide-y-reverse: 0;
  border-bottom-style: var(--tw-border-style);
  border-top-style: var(--tw-border-style);
  border-top-width: calc(1px * var(--tw-divide-y-reverse));
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-none {
  border-radius: 0;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-\[var\(--gaia-destructive\)\] {
  border-color: var(--gaia-destructive);
}
.border-\[var\(--gaia-primary\)\] {
  border-color: var(--gaia-primary);
}
.border-\[var\(--gaia-secondary\)\] {
  border-color: var(--gaia-secondary);
}
.bg-\[var\(--gaia-primary\)\] {
  background-color: var(--gaia-primary);
}
.bg-\[var\(--gaia-secondary\)\] {
  background-color: var(--gaia-secondary);
}
.bg-transparent {
  background-color: transparent;
}
.text-right {
  text-align: right;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.break-all {
  word-break: break-all;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.\[tab-size\:2\] {
  tab-size: 2;
}
.tab-1 {
  tab-size: 1;
}
.text-\[var\(--gaia-badge-destructive-foreground\)\] {
  color: var(--gaia-badge-destructive-foreground);
}
.text-\[var\(--gaia-badge-info-foreground\)\] {
  color: var(--gaia-badge-info-foreground);
}
.text-\[var\(--gaia-badge-success-foreground\)\] {
  color: var(--gaia-badge-success-foreground);
}
.text-\[var\(--gaia-badge-warning-foreground\)\] {
  color: var(--gaia-badge-warning-foreground);
}
.text-\[var\(--gaia-destructive\)\] {
  color: var(--gaia-destructive);
}
.text-\[var\(--gaia-foreground\)\] {
  color: var(--gaia-foreground);
}
.text-\[var\(--gaia-link-foreground\)\] {
  color: var(--gaia-link-foreground);
}
.text-\[var\(--gaia-primary\)\] {
  color: var(--gaia-primary);
}
.text-\[var\(--gaia-primary-foreground\)\] {
  color: var(--gaia-primary-foreground);
}
.text-\[var\(--gaia-secondary\)\] {
  color: var(--gaia-secondary);
}
.text-\[var\(--gaia-secondary-foreground\)\] {
  color: var(--gaia-secondary-foreground);
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.line-through {
  text-decoration-line: line-through;
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.\!filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
.\[font\:inherit\] {
  font: inherit;
}
.\[localstack\:init\] {
  localstack: init;
}
@media (hover: hover) {
  .hover\:bg-\[var\(--gaia-accent\)\]:hover {
    background-color: var(--gaia-accent);
  }
  .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
    background-color: var(--gaia-destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
      background-color: color-mix(in oklab, var(--gaia-destructive) 6%, transparent);
    }
  }
  .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
    background-color: var(--gaia-primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
      background-color: color-mix(in oklab, var(--gaia-primary) 6%, transparent);
    }
  }
  .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
    background-color: var(--gaia-primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
      background-color: color-mix(in oklab, var(--gaia-primary) 90%, transparent);
    }
  }
  .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
    background-color: var(--gaia-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
      background-color: color-mix(in oklab, var(--gaia-secondary) 6%, transparent);
    }
  }
  .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
    background-color: var(--gaia-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
      background-color: color-mix(in oklab, var(--gaia-secondary) 90%, transparent);
    }
  }
  .hover\:text-\[var\(--gaia-accent-foreground\)\]:hover {
    color: var(--gaia-accent-foreground);
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
}
.focus-visible\:outline-2:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-\[var\(--gaia-ring\)\]:focus-visible {
  outline-color: var(--gaia-ring);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 50%;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:pointer-events-none > svg {
  pointer-events: none;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}


/* /@fs//home/coder/control-poc/src/shared/design-system/components.css */
/* Cozero design system — form and band components, as classes.
   Companion to tokens.css; imported next to it in __root.tsx.

   These are the recipes that were previously written inline at every call site
   — an input's border and radius, a segmented toggle, the four coloured
   explanation bands — expressed once. A rule here may reference only tokens
   from tokens.css, never a literal colour, so a token change moves every
   component with it.

   Font family is deliberately absent: tokens.css sets the stack on `body` and
   `button`, and `input`/`select`/`textarea` do NOT inherit it by default, so
   `font: inherit` below is load-bearing rather than redundant. */

/* ---- inputs ---- */
.input,
.select,
.textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 13px;
  color: oklch(var(--primary));
  outline: none;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: oklch(var(--ring));
}
.textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.45;
}
/* The chevron is a data: URI rather than an overlaid element so a <select> stays
   one focusable node. Its stroke is #6D7181 — the one literal colour in this
   file, because a url() cannot read a CSS variable. It matches --muted-2. */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236D7181' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field > .caption-bold {
  color: oklch(var(--muted));
}
/* A unit or currency inside the input's right edge. The suffix is
   pointer-events:none so clicking it still focuses the field. */
.input-suffix {
  position: relative;
}
/* The room reserved for the suffix FOLLOWS THE SUFFIX. It was a flat 64px,
   which a long unit overruns — "kgCO₂e/t·km" printed straight over the
   placeholder. `SuffixedInput` sets `--suffix-pad` from the suffix's own
   length; the fallback keeps hand-written markup working. */
.input-suffix .input {
  padding-right: var(--suffix-pad, 64px);
}
.input-suffix > span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: oklch(var(--muted-2));
  pointer-events: none;
}
.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- segmented toggle ---- */
.seg {
  display: inline-flex;
  gap: 2px;
  background: oklch(var(--muted-bg) / 0.5);
  padding: 3px;
  border-radius: 10px;
}
.seg > button {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--muted));
  transition: background-color 120ms;
}
.seg > button.on {
  background: white;
  color: oklch(var(--primary));
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.06),
    0 0 0 1px oklch(var(--muted-bg));
}

/* ---- inline add action ---- */
.add-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--action));
  padding: 6px 4px;
  border-radius: 7px;
}
.add-link:hover {
  background: oklch(var(--muted-bg) / 0.4);
}

/* ---- separator ---- */
.hr {
  height: 1px;
  background: oklch(var(--muted-bg));
  border: 0;
  margin: 18px 0;
}

/* ---- explanation bands ----
   Four tones for one shape. The tone carries the meaning, so the copy never
   has to say "warning:" — success states a resolved fact, warn states an
   incomplete answer, error states a refusal, info states how something
   composes. */
.success-line,
.warn-line,
.error-line,
.info-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: oklch(var(--muted));
  margin-top: 14px;
}
.success-line {
  background: oklch(var(--green-bg) / 0.55);
  border: 1px solid oklch(var(--green) / 0.25);
}
.warn-line {
  background: oklch(var(--orange-bg) / 0.7);
  border: 1px solid oklch(var(--orange) / 0.3);
}
.error-line {
  background: oklch(var(--error-bg) / 0.7);
  border: 1px solid oklch(var(--error) / 0.3);
}
.info-line {
  background: oklch(var(--finance-soft));
  border: 1px solid oklch(var(--finance) / 0.18);
  font-size: 12.5px;
}

/* A read-only strip of figures the author is working against — the starting
   emissions above an editor, the operating position below one. */
.baseline-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: oklch(var(--muted-bg) / 0.35);
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: oklch(var(--muted));
}

/* ---- small chips ---- */
/* Names the per-year shape a section's values carry — "Discrete payments",
   "Step and hold". The three shapes must never be confused, so each section
   says which one it is. */
.sem-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
  background: oklch(var(--muted-bg) / 0.8);
  color: oklch(var(--muted));
}
/* Where a picked thing came from. The author never needs to care, but seeing
   it makes "we already measure this" legible at a glance. */
.src-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 6px;
}
.src-ccf {
  background: oklch(var(--green-bg));
  color: oklch(var(--green));
}
.src-core {
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
}
.src-new {
  background: oklch(var(--orange-bg));
  color: oklch(var(--orange));
}
.scope-pill {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 700;
}
.new-chip {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- card padding ---- */
.pane {
  padding: 22px 24px;
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/screens/drivers-screen.css */
.drivers-table-detail__table,
.drivers-table-detail__panel {
  min-width: 0;
}
.drivers-table-detail__panel {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
}
.drivers-table-detail__panel > .card:not(.driver-summary) {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gaia-editor-page {
  --gaia-shell-sidebar-width: 80px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/chat.css */
/* Carbon Intelligence — the few animations and scroll behaviours the chat needs.
   Everything else comes from the design system's tokens and component classes. */

/* A page change that carries the conversation with it: the rest of the page crossfades while
   the conversation itself glides from where it was to where it is now. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
}

::view-transition-group(ci-conversation) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(ci-conversation) {
  animation: ci-vt-leave 200ms ease-out both;
}

::view-transition-new(ci-conversation) {
  animation: ci-vt-arrive 280ms ease-out 140ms both;
}

@keyframes ci-vt-leave {
  to {
    opacity: 0;
  }
}

@keyframes ci-vt-arrive {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

@keyframes ci-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* A card that grows above the reading position must not push what is being read.
   `overflow-anchor` keeps the browser's scroll anchor pinned to the content below. */
.ci-stream {
  overflow-anchor: auto;
}
.ci-stream > * {
  overflow-anchor: none;
}
.ci-anchor {
  overflow-anchor: auto;
  height: 1px;
}

.ci-fade-in {
  animation: ci-fade-in 260ms ease both;
}
@keyframes ci-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The message action row appears on hover or when anything inside it has focus. It keeps its
   height either way — a row that collapses when unhovered makes the whole thread jump under
   the pointer — but its height is the only space it takes. */
.ci-actions {
  opacity: 0;
  transition: opacity 140ms;
}
.ci-turn:hover .ci-actions,
.ci-turn:focus-within .ci-actions {
  opacity: 1;
}

/* Streaming prose ends with a caret AFTER the last word. Markdown's final block is a `<p>` (or
   an `<li>`), so a caret rendered as its sibling would drop onto a line of its own underneath.
   It is drawn instead as an `::after` on that final block, which puts it in the same inline
   flow as the text it is trailing — no measurement, no negative margins, correct on a wrapped
   line and on a list. */
.ci-streaming > div > :last-child::after,
.ci-streaming > div > :last-child > li:last-child::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.92em;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: oklch(var(--ai));
  animation: ci-caret 1s steps(2, start) infinite;
}

/* A list's own `::after` would double up with its last item's. */
.ci-streaming > div > ul:last-child::after,
.ci-streaming > div > ol:last-child::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .ci-streaming > div > :last-child::after,
  .ci-streaming > div > :last-child > li:last-child::after {
    animation: none;
  }
}

/* A placeholder for something the server is still writing — the follow-up questions after an
   answer, the sources under it. It carries the shape of the real thing (a pill of about the
   right width) so nothing jumps when the content replaces it, and a slow sheen crossing it says
   the wait is expected rather than broken. */
.ci-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: oklch(var(--muted-bg) / 0.55);
}

.ci-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(var(--surface) / 0.75), transparent);
  animation: ci-sheen 1.5s ease-in-out infinite;
}

@keyframes ci-sheen {
  100% {
    transform: translateX(100%);
  }
}

/* Motion is decoration here: the placeholder still reserves the space without it. */
@media (prefers-reduced-motion: reduce) {
  .ci-skeleton::after {
    animation: none;
  }
}

/* The files travelling with the next turn, inside the composer frame above the box. Two abreast
   so a card can carry a real name and a state sentence; the rest collapse into one tile rather
   than wrapping the frame into a second panel. */
/* Two cards abreast, wrapping to the next line rather than narrowing further. A grid of
   `auto-fill` columns takes as many as the composer is wide and squeezes every name into an
   ellipsis; a card has to be wide enough to show a name and a size at once. */
.ci-file-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 10px 0 12px;
}

.ci-file-cards > .ci-file-card {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
}

/* The overflow tile is a marker, not a card: it takes only the width of its own label. */
.ci-file-cards > .ci-file-more {
  flex: 0 0 auto;
  min-width: 56px;
}

.ci-file-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px 7px 9px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: var(--radius-sm);
  background: oklch(var(--background) / 0.6);
  text-align: left;
  transition:
    border-color 140ms,
    background 140ms;
}

.ci-file-card[role='button'] {
  cursor: pointer;
}
.ci-file-card[role='button']:hover {
  border-color: oklch(var(--ai) / 0.5);
  background: oklch(var(--white));
}

.ci-file-card[data-status='failed'] {
  border-color: oklch(var(--error) / 0.45);
  background: oklch(var(--error-bg) / 0.35);
}

/* One tile standing in for the cards past the second. */
.ci-file-more {
  justify-content: center;
  min-height: 44px;
  color: oklch(var(--muted));
  cursor: pointer;
}
.ci-file-more:hover {
  border-color: oklch(var(--muted) / 0.5);
}

.ci-file-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--muted));
}
.ci-file-card[data-status='failed'] .ci-file-glyph {
  background: oklch(var(--error-bg));
  color: oklch(var(--error));
}
.ci-file-card[data-status='ready'] .ci-file-glyph {
  color: oklch(var(--ai));
}

.ci-file-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The name is shortened in the middle before it reaches the DOM, so this only guards a name
   that is one unbroken word wider than the card. */
.ci-file-name {
  overflow: hidden;
  color: oklch(var(--primary));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-file-state {
  overflow: hidden;
  color: oklch(var(--muted-2));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-file-state-failed {
  color: oklch(var(--error));
}

.ci-file-controls {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}

.ci-file-action {
  padding: 3px 7px;
  border-radius: 6px;
  color: oklch(var(--action));
  white-space: nowrap;
}
.ci-file-action:hover {
  background: oklch(var(--muted-bg) / 0.7);
}

.ci-file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: oklch(var(--muted-2));
}
.ci-file-remove:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* ---- Quotes: the floating control, the chip row, and the marks they light ---- */

/* A quoted span, painted back inside the answer it came from. The browser's own highlight
   registry does this without a wrapper element, so the rendered markdown is never touched. */
::highlight(ci-quote) {
  background: oklch(var(--ai) / 0.18);
  color: oklch(var(--primary));
}

/* The card a reference chip points at, lit while the chip is hovered. Matches the focused
   surface a card takes in the transcript. */
[data-ci-quote-focus='true'] > * {
  border-color: oklch(var(--ai) / 0.45);
  box-shadow: 0 6px 24px oklch(var(--primary) / 0.08);
}

.ci-quote-float {
  z-index: 45;
  width: max-content;
}

/* Styled in full here rather than on top of `.btn`: the shared button's own hover paints the
   background and leaves the colour to the variant, so a float button carrying `.btn` with no
   variant went invisible under the pointer. It owns every property it needs instead. */
.ci-quote-float-btn {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 9999px;
  background: oklch(var(--white));
  box-shadow: 0 6px 20px oklch(var(--primary) / 0.14);
  color: oklch(var(--primary));
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms;
}
.ci-quote-float-btn:hover,
.ci-quote-float-btn:focus-visible {
  border-color: oklch(var(--ai) / 0.45);
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--primary));
}

.ci-ask-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  background: oklch(var(--white));
  box-shadow: 0 8px 24px oklch(var(--primary) / 0.12);
}

.ci-ask-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  color: oklch(var(--primary));
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}
.ci-ask-choice:hover,
.ci-ask-choice:focus-visible {
  background: oklch(var(--muted-bg) / 0.7);
  outline: none;
}

.ci-quote-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 8px 12px 0;
  list-style: none;
}

.ci-quote-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 26px;
  padding: 0 4px 0 8px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 7px;
  background: oklch(var(--white));
  color: oklch(var(--primary));
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 140ms,
    background 140ms;
}
.ci-quote-chip:hover,
.ci-quote-chip:focus-within {
  border-color: oklch(var(--ai) / 0.45);
  outline: none;
}

/* A chip carrying a note says so without spending a word on it. */
.ci-quote-chip[data-ci-noted='true'] {
  border-color: oklch(var(--ai) / 0.45);
  background: oklch(var(--ai) / 0.06);
}

/* The chip's body is the button that opens its note; the remove control sits beside it. */
.ci-quote-chip-open {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: inherit;
  font: inherit;
}

.ci-quote-chip-numeral {
  color: oklch(var(--ai));
  font-size: 13px;
}

.ci-quote-chip-label {
  overflow: hidden;
  max-width: 220px;
  color: oklch(var(--muted));
  text-overflow: ellipsis;
}

.ci-quote-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: oklch(var(--muted-2));
}
.ci-quote-chip-remove:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* What a chip opens: the words in full, and a field for what to say about them. Anchored over
   the chip, above it, because the row sits at the bottom of the screen. */
.ci-quote-note {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 11px 12px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: oklch(var(--white));
  box-shadow: 0 14px 40px oklch(var(--primary) / 0.14);
}

/* The quoted words, readable in full and wrapping — the chip is the truncated form, not this. */
.ci-quote-note-text {
  max-height: 108px;
  overflow-y: auto;
  padding-left: 9px;
  border-left: 2px solid oklch(var(--ai) / 0.4);
  color: oklch(var(--primary));
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ci-quote-note-field {
  min-height: 54px;
  resize: vertical;
  font-family: inherit;
}

/* How much of the note is left, shown only near the cap. */
.ci-quote-note-count {
  margin: 4px 0 0;
  color: oklch(var(--muted-2));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The chip numbers, painted beside the words each one was taken from. The layer never takes the
   pointer: the answer underneath stays selectable straight through it. */
.ci-quote-marks {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
}

.ci-quote-mark {
  position: absolute;
  transform: translate(-100%, -2px);
  padding-right: 3px;
  color: oklch(var(--ai));
  font-size: 12px;
  line-height: 1;
}

/* The icon-only controls at the right end of the chip row — attach, and the allowance ring. The
   same square as a chip is tall, quiet at rest, lifted on hover like the chips beside them. */
.ci-row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: oklch(var(--muted-2));
  transition:
    background 140ms,
    color 140ms;
}
.ci-row-button:hover,
.ci-row-button[aria-expanded='true'] {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* Send, at the very end of the row: filled once there is something to send, red while an answer
   is being written and the same control stops it. */
.ci-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 9999px;
  background: oklch(var(--muted-bg));
  color: oklch(var(--muted-2));
  transition:
    background 140ms,
    color 140ms;
}
.ci-send[data-ci-ready='true'] {
  background: oklch(var(--primary));
  color: oklch(var(--white));
}
.ci-send[data-ci-busy='true'] {
  background: oklch(var(--error));
  color: oklch(var(--white));
}

/* ---- The header row ---- */

/* A control in the header. Quiet at rest, on a surface of its own when hovered or when it is the
   one that is on, so the state reads from the lift rather than from a second colour. */
.ci-header-action {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: oklch(var(--muted));
  font-size: 12.5px;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms,
    color 140ms;
}
.ci-header-action:hover {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--white));
  color: oklch(var(--primary));
}
.ci-header-action[data-ci-active='true'] {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* How many artifacts the conversation has. A numeral riding the control, not a badge stuck to
   it: the count is part of what the control says. */
.ci-header-count {
  min-width: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: oklch(var(--ai) / 0.14);
  color: oklch(var(--ai));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}

/* The line in the transcript while a proposed edit waits in the document beside the panel. The
   line already carries the assistant's colour, so the only motion is the arrow leaning toward the
   document the decision is waiting in — direction, not a pulse. */
.ci-pending-edit svg:last-of-type {
  animation: ci-pending-lean 2.6s ease-in-out infinite;
}

@keyframes ci-pending-lean {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-pending-edit svg:last-of-type {
    animation: none;
  }
}

/* The one action under an answer that starts something rather than acting on the answer itself.
   It is the same quiet shape as its neighbours until it is approached, and then it takes the
   assistant's colour — clear about what it leads to without shouting across the transcript. */
.ci-convert-action button:hover:not(:disabled) {
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

/* "Convert into insight": the same menu shell as the ask choices, opening from the action that
   raised it and wide enough for a real insight name. */
.ci-convert-menu {
  min-width: 232px;
  max-width: 320px;
  /* Placed against the action's box by the component, so it carries no offset of its own. */
  margin-top: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  transform-origin: top left;
  animation: ci-menu-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-convert-menu[data-side='above'] {
  transform-origin: bottom left;
  animation-name: ci-menu-in-up;
}

@keyframes ci-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ci-menu-in-up {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ci-convert-menu .ci-ask-choice {
  gap: 9px;
  width: 100%;
  min-width: 0;
  color: oklch(var(--primary));
  transition:
    background 120ms ease,
    color 120ms ease;
}

.ci-convert-menu .ci-ask-choice svg {
  flex-shrink: 0;
  color: oklch(var(--muted-2));
  transition: color 120ms ease;
}

.ci-convert-menu .ci-ask-choice:hover svg,
.ci-convert-menu .ci-ask-choice:focus-visible svg {
  color: oklch(var(--ai));
}

.ci-convert-menu .ci-ask-choice:disabled {
  color: oklch(var(--muted-2) / 0.6);
  cursor: default;
}

.ci-convert-menu .ci-ask-choice:disabled:hover {
  background: transparent;
}

/* The one that starts something new sits above the list, with a hairline between. */
.ci-convert-menu-section {
  margin-top: 4px;
  padding: 7px 9px 4px;
  border-top: 1px solid oklch(var(--muted-bg) / 0.8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ci-convert-menu {
    animation: none;
  }
}

/* ---- The panel beside an insight, before the first question ---- */

/* The assistant introducing itself as a co-author: a mark, an invitation in the app's own voice,
   and three ways in. It sits at the top of the room rather than floating in the middle, so the
   panel reads as ready rather than as empty. */
.ci-insight-welcome {
  padding: 4px 0 8px;
}

.ci-insight-welcome-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

.ci-insight-welcome-starters {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* One way in. A card rather than a line in a list, so the three read as offers and the pointer
   has something to land on. */
.ci-insight-starter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: oklch(var(--primary));
  transition:
    border-color 160ms ease,
    box-shadow 200ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: ci-fade-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-insight-starter:hover,
.ci-insight-starter:focus-visible {
  transform: translateY(-1px);
  border-color: oklch(var(--ai) / 0.45);
  box-shadow: 0 8px 20px -10px oklch(var(--primary) / 0.35);
}

.ci-insight-starter-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--muted));
  transition:
    background 180ms ease,
    color 180ms ease;
}

.ci-insight-starter:hover .ci-insight-starter-mark,
.ci-insight-starter:focus-visible .ci-insight-starter-mark {
  background: oklch(var(--ai) / 0.14);
  color: oklch(var(--ai));
}

.ci-insight-starter-go {
  flex-shrink: 0;
  color: oklch(var(--ai));
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-insight-starter:hover .ci-insight-starter-go,
.ci-insight-starter:focus-visible .ci-insight-starter-go {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ci-insight-starter {
    animation: none;
  }
  .ci-insight-starter:hover,
  .ci-insight-starter:focus-visible {
    transform: none;
  }
  .ci-insight-starter-go {
    transform: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/screens/bundles-screen.css */
.scenarios-overview {
  display: grid;
  /* As many as fit, each stretching to fill the row. A fixed three columns
     stranded a fourth scenario on a row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.scenarios-overview__card {
  min-height: 182px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scenarios-overview__eyebrow {
  color: oklch(var(--muted));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.scenarios-overview__card strong {
  color: oklch(var(--primary));
  font-size: 16px;
}
.scenarios-overview__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
  overflow: hidden;
}
.scenarios-overview__metrics span {
  padding: 9px 10px;
  border-right: 1px solid oklch(var(--input));
  min-width: 0;
}
.scenarios-overview__metrics span:last-child {
  border-right: 0;
}
.scenarios-overview__metrics small,
.scenarios-overview__metrics b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scenarios-overview__metrics small {
  font-size: 10px;
  color: oklch(var(--muted));
}
.scenarios-overview__metrics b {
  margin-top: 5px;
  font-size: 15px;
  color: oklch(var(--primary));
}
.scenarios-overview__card p {
  margin: auto 0 0;
  color: oklch(var(--muted));
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scenarios-table-detail__panel {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.scenarios-table-detail__panel > [data-slot='table-detail-panel'] {
  flex: 1;
}
.scenarios-table-detail__panel .gaia-detail-panel__body {
  flex: 1;
  min-height: 0;
}
.scenarios-table-detail__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: oklch(var(--muted));
  font-size: 12px;
}
@media (max-width: 900px) {
  .scenarios-overview {
    grid-template-columns: 1fr;
  }
  .scenarios-table-detail__panel {
    position: static;
    max-height: none;
  }
}
.scenario-driver-picker {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
}
.scenario-driver-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid oklch(var(--input));
  cursor: pointer;
}
.scenario-driver-picker__row:last-child {
  border-bottom: 0;
}
.scenario-driver-picker__row:hover {
  background: oklch(var(--background));
}
.scenario-driver-picker__row span:not(.gaia-badge-dot) {
  flex: 1;
  min-width: 0;
}
.scenario-driver-picker__row small {
  color: oklch(var(--muted));
}
.scenario-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.scenario-overview-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
}
.scenario-overview-metrics small {
  color: oklch(var(--muted));
  text-transform: uppercase;
}
.scenario-overview-metrics strong {
  color: oklch(var(--primary));
  font-size: 20px;
}
.scenario-overview-metrics span {
  color: oklch(var(--muted));
  font-size: 11px;
}
@media (max-width: 900px) {
  .scenario-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scenarios-overview__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: oklch(var(--muted));
}


/* /@fs//home/coder/control-poc/src/features/act/simulate/sections/wizard-components.css */
/* Simulate Action wizard — the components only this flow has.
   Imported once, from wizard-shell.tsx.

   The generic half (inputs, .seg, .field, the four explanation bands, the
   chips) lives in shared/design-system/components.css, because those recipes
   are not specific to authoring a reduction measure. What is here is: the
   pickers on steps 2-4, the two adjustment shapes on step 5, the phase-in row
   on step 6, the line-item editor on steps 7-8, and the result tiles and
   cash-flow table on step 9.

   Same rule as the shared file: tokens only, no literal colours. */

/* ---- Assistant bubble and step heading ---- */
.bubble {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.bubble .avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: oklch(var(--ai));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 2px;
}
/* The square corner points at the avatar, which is what makes it read as
   speech rather than as a card. */
.bubble .say {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 4px 14px 14px 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: oklch(var(--muted));
  max-width: 620px;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.step-title .ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex: none;
}

/* ---- steps 2-4: pickable rows ---- */
.pick-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid oklch(var(--muted-bg));
  background: white;
  margin-bottom: 6px;
  transition:
    border-color 120ms,
    background-color 120ms;
  font-size: 13px;
}
.pick-row:hover {
  border-color: oklch(var(--secondary));
}
.pick-row.sel {
  border-color: oklch(var(--finance));
  background: oklch(var(--finance-soft));
  box-shadow: 0 0 0 1px oklch(var(--finance) / 0.35);
}
.pick-row .amt {
  margin-left: auto;
  font-size: 11.5px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- step 4: narrowing ---- */
.narrow-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 11px 0 4px;
  color: oklch(var(--muted));
  font-size: 13px;
  font-weight: 600;
}
.narrow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.narrow-card {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 11px 12px;
  background: white;
}
.narrow-card .hint {
  font-size: 11px;
  color: oklch(var(--muted-2));
  margin: 2px 0 8px;
}
.narrow-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  color: oklch(var(--muted));
}
.narrow-opt:hover {
  background: oklch(var(--muted-bg) / 0.4);
}
.narrow-opt .cb {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1.5px solid oklch(var(--secondary));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.narrow-opt.on .cb {
  background: oklch(var(--finance));
  border-color: oklch(var(--finance));
}
.narrow-opt .sub {
  margin-left: auto;
  font-size: 10.5px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}

/* ---- step 4: the switch's receiving activities ---- */
.recv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: white;
}
/* One wide panel: search, a grouped list, and create-new in its footer. Three
   sources of a receiving activity are presented as one picker on purpose —
   the author never needs to know which of the three they used. */
.picker-pop {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: white;
  box-shadow:
    0 30px 60px -10px rgba(20, 20, 40, 0.18),
    0 8px 20px -8px rgba(20, 20, 40, 0.08);
  padding: 10px;
  margin-top: 8px;
}
.picker-pop .grp {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--muted-2));
  padding: 8px 8px 4px;
}
.picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.picker-opt:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.picker-opt .sub {
  margin-left: auto;
  font-size: 11px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}

/* ---- step 5: the two adjustment shapes ---- */
.adj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adj-card {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 14px 15px;
  background: white;
  position: relative;
}
/* `.live` marks the adjustments the author has actually authored. Either alone
   is a complete measure, so neither card can be styled as the primary one. */
.adj-card.live {
  border-color: oklch(var(--finance) / 0.45);
  box-shadow: 0 0 0 1px oklch(var(--finance) / 0.2);
}
.delta-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}
/* Claims against the donor activity, which are validated together against
   100% — an initiative cannot switch away more than it has. */
.total-bar {
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--muted-bg));
  overflow: hidden;
  margin-top: 6px;
}
.total-bar > div {
  height: 100%;
  border-radius: 9999px;
  background: oklch(var(--finance));
  transition: width 200ms;
}
.total-bar.over > div {
  background: oklch(var(--error));
}

/* ---- step 6: the phase-in ----
   One cell per year of the lifetime, all on one row, so each year lines up
   with its bar in the preview below. Long lifetimes scroll horizontally
   rather than wrapping, which would break that alignment.

   ONE SCROLLER AROUND BOTH the cells and the preview, which is what keeps
   that alignment true past ~13 years: with a scrollbar on the cells alone, a
   15-year lifetime scrolled the cells while the bars stayed put, so the year
   under a bar was not the year in the cell above it. Both tracks share
   `flex: 1 1 0` and the same min-width, so a column is one year wide in both. */
.phase-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.phase-grid {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.phase-cell {
  flex: 1 1 0;
  min-width: 58px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 9px;
  padding: 6px 7px;
  background: white;
}
.phase-cell .yr {
  font-size: 10.5px;
  font-weight: 600;
  color: oklch(var(--muted-2));
  display: flex;
  justify-content: space-between;
}
.phase-cell input {
  width: 100%;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--primary));
  padding: 2px 0 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.phase-preview {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
  margin-top: 14px;
}
.phase-preview .pb {
  flex: 1 1 0;
  min-width: 58px;
  background: oklch(var(--finance) / 0.75);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
}
.phase-preview .pb span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  color: oklch(var(--muted-2));
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ---- steps 7-8: the line-item editor ----
   One shape for capex, opex and revenue. A name, a value, and the period it
   applies to — the per-year semantics differ, and the section's .sem-chip
   says which, but the editor does not. */
.line-item {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
  background: white;
}
.li-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.li-head .input {
  flex: 1;
}
.li-del {
  color: oklch(var(--muted-2));
  padding: 6px;
  border-radius: 7px;
  flex: none;
}
.li-del:hover {
  color: oklch(var(--error));
  background: oklch(var(--error-bg) / 0.5);
}
.li-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 10px;
}
.sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

/* ---- step 9: the metric tiles ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.kpi {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
  padding: 14px 16px;
  position: relative;
}
.kpi .lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--muted-2));
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .val {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.kpi .hint {
  font-size: 10.5px;
  color: oklch(var(--muted-2));
  margin-top: 3px;
}
/* The two tiles the cash-flow table's cumulative columns reconcile to. The
   lift is the visual claim that nothing is unaccounted for between them. */
.kpi.reconciled {
  box-shadow:
    0 0 0 1px oklch(var(--finance) / 0.2),
    0 8px 24px -8px oklch(var(--finance) / 0.25);
}

/* ---- step 9: the working ---- */
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cf-table th {
  text-align: right;
  padding: 9px 10px;
  background: oklch(var(--muted-bg) / 0.25);
  border-bottom: 1px solid oklch(var(--muted-bg));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: oklch(var(--table-header));
  white-space: nowrap;
}
.cf-table th:first-child,
.cf-table td:first-child {
  text-align: left;
}
.cf-table td {
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid oklch(var(--muted-bg) / 0.6);
  font-variant-numeric: tabular-nums;
  color: oklch(var(--muted));
  white-space: nowrap;
}
.cf-table tr:last-child td {
  border-bottom: 0;
  font-weight: 600;
  color: oklch(var(--primary));
  background: oklch(var(--finance-soft) / 0.6);
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.legend .li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: oklch(var(--muted));
}
.legend .box {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}
.chart-tip {
  position: fixed;
  z-index: 90;
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.12);
  padding: 9px 12px;
  min-width: 170px;
  max-width: 280px;
  pointer-events: none;
  display: none;
}
.jump-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.jump-links button {
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--action));
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

/* Two columns rather than four once four will not fit, then one. The
   adjustment pair collapses on the same breakpoints. */
@media (max-width: 900px) {
  .adj-grid,
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .adj-grid,
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/sections/driver-table.css */
.driver-table {
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.driver-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.driver-table th {
  height: 64px;
  padding: 0 12px;
  text-align: left;
  color: oklch(var(--muted));
  background: white;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.driver-table th.driver-table__check-column {
  width: 42px;
  padding: 0 0 0 16px;
}
.driver-table th:nth-child(2) {
  width: 38%;
}
.driver-table th:nth-child(3) {
  width: 24%;
}
.driver-table th:nth-child(4) {
  width: 17%;
}
.driver-table th:nth-child(5) {
  width: 9%;
  text-align: center;
}
.driver-table th:last-child {
  width: 24px;
}
.driver-table[data-open='true'] th:nth-child(4),
.driver-table[data-open='true'] td:nth-child(4),
.driver-table[data-open='true'] th:nth-child(5),
.driver-table[data-open='true'] td:nth-child(5) {
  display: none;
}
.driver-table[data-open='true'] th:nth-child(2) {
  width: 56%;
}
.driver-table[data-open='true'] th:nth-child(3) {
  width: 32%;
}
.driver-table td {
  height: 62px;
  border-top: 1px solid oklch(var(--input));
  padding: 8px 12px;
  font-size: 12px;
  color: oklch(var(--primary));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.driver-table td.driver-table__check-column {
  padding: 0 0 0 16px;
  overflow: visible;
}
.driver-table__check-column input {
  accent-color: oklch(var(--primary));
  cursor: pointer;
}
.driver-table__check-column input:disabled {
  cursor: not-allowed;
}
.driver-table tr[data-selected='true'] td {
  background: oklch(var(--background));
}
.driver-table tr:hover td {
  background: oklch(var(--background));
}
.driver-table__name {
  padding: 0;
  border: 0;
  background: none;
  color: oklch(var(--primary));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driver-table__name:hover {
  text-decoration: underline;
}
.driver-table__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  overflow: hidden;
}
.driver-table__source {
  color: oklch(var(--muted)) !important;
}
.driver-table__curve {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-weight: 600;
}
.driver-table__usage {
  text-align: center;
}
.driver-table__open {
  border: 0;
  background: none;
  color: oklch(var(--muted));
  padding: 3px;
  cursor: pointer;
}
.driver-table__empty {
  text-align: center;
  height: 120px !important;
  color: oklch(var(--muted)) !important;
}
@media (max-width: 900px) {
  .driver-table th:nth-child(3),
  .driver-table td:nth-child(3),
  .driver-table th:nth-child(5),
  .driver-table td:nth-child(5) {
    display: none;
  }
  .driver-table th:nth-child(2) {
    width: 60%;
  }
  .driver-table th:nth-child(4) {
    width: 24%;
  }
}


/* /@fs//home/coder/control-poc/src/shared/ui/filter-panel.css */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-panel__group {
  min-width: 0;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid oklch(var(--input));
}
.filter-panel__group:last-of-type {
  border-bottom: 0;
}
.filter-panel__group legend {
  width: 100%;
  padding: 8px 9px 4px;
  color: oklch(var(--muted));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.filter-panel__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  text-align: left;
  font-size: 12px;
  color: oklch(var(--primary));
}
.filter-panel__option:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.filter-panel__mark {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid oklch(var(--muted));
  color: white;
}
.filter-panel__mark[data-shape='circle'] {
  border-radius: 50%;
}
.filter-panel__mark[data-shape='square'] {
  border-radius: 4px;
}
.filter-panel__mark[data-selected='true'] {
  background: oklch(var(--primary));
  border-color: oklch(var(--primary));
}
.filter-panel__label {
  flex: 1;
  min-width: 0;
}
.filter-panel__count {
  color: oklch(var(--muted));
  font-variant-numeric: tabular-nums;
}
.filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 9px 2px;
  color: oklch(var(--muted));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.filter-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-panel__option[role='checkbox'][aria-checked='true'] {
  background: oklch(var(--muted-bg) / 0.6);
}


/* /@fs//home/coder/control-poc/src/shared/design-system/gaia-consumer.css */
/* Compatibility for pages that still consume OKLCH channels and legacy colour classes.
   Import after Gaia, outside control-legacy: Gaia's public aliases contain complete
   colours, while existing Control styles wrap these channels in oklch(...).
   Registry components use --gaia-* and retain their own colour utilities. */

:root {
  /* Core */
  --background: 96.5% 0.004 286; /* #F4F4F6 */
  --white: 100% 0 0;
  --white-foreground: 27% 0.085 269; /* #272C5F */

  --primary: 27% 0.085 269; /* navy #272C5F */
  --primary-foreground: 100% 0 0;
  --primary-active: 27% 0.085 269;

  --secondary: 64% 0.04 276; /* #888BAA */
  --secondary-foreground: 100% 0 0;

  --accent: 44% 0.05 269; /* #4F5484 */
  --accent-foreground: 100% 0 0;

  --muted-bg: 91% 0.01 276; /* #E0E2EB */
  --muted: 37% 0.025 275; /* #46475C */
  --muted-2: 55% 0.025 275; /* lighter muted text */

  --input: 91% 0.01 276;
  --ring: 44% 0.05 269;
  --radius: 0.625rem;

  /* Sidebar (uses primary navy in this build) */
  --sidebar-background: 27% 0.085 269;
  --sidebar-foreground: 100% 0 0;
  --sidebar-accent: 44% 0.05 269;

  /* AI green #5CC63C */
  --ai: 70% 0.19 138;
  --ai-foreground: 100% 0 0;

  /* Action blue #2871FF */
  --action: 55% 0.22 258;
  --action-foreground: 100% 0 0;

  /* Brand green #28A003 */
  --brand: 56% 0.17 142;
  --brand-foreground: 100% 0 0;

  /* Scope colors */
  --scope-1: 62% 0.13 285; /* purple */
  --scope-2: 55% 0.09 148; /* sage */
  --scope-3: 61% 0.12 66; /* amber */

  /* Semantic */
  --green-bg: 91% 0.03 140;
  --green: 53% 0.17 141;
  --orange-bg: 94% 0.04 70;
  --orange: 71% 0.16 60;
  --error-bg: 90% 0.03 20;
  --error: 59% 0.2 26;

  /* CONTROL-specific finance accent (deep indigo with warmth) */
  --finance: 38% 0.1 270;
  --finance-soft: 95% 0.015 270;

  /* Tables */
  --table-header: 64% 0.04 276;
  --table-row-hover: 96.77% 0.0027 286.35;
  --table-row-selected: 91% 0.01 276;

  /* Surface radii */
  --radius-sm: 8px;
  --radius-surface: 16px;
}

/* Color utility classes */
.text-primary:where(:not([data-slot])) {
  color: oklch(var(--primary));
}
.text-accent:where(:not([data-slot])) {
  color: oklch(var(--accent));
}
.text-secondary:where(:not([data-slot])) {
  color: oklch(var(--secondary));
}
.text-muted:where(:not([data-slot])) {
  color: oklch(var(--muted));
}
.text-muted-2:where(:not([data-slot])) {
  color: oklch(var(--muted-2));
}
.text-white:where(:not([data-slot])) {
  color: white;
}
.text-action:where(:not([data-slot])) {
  color: oklch(var(--action));
}
.text-ai:where(:not([data-slot])) {
  color: oklch(var(--ai));
}
.text-brand:where(:not([data-slot])) {
  color: oklch(var(--brand));
}
.text-green:where(:not([data-slot])) {
  color: oklch(var(--green));
}
.text-error:where(:not([data-slot])) {
  color: oklch(var(--error));
}
.text-orange:where(:not([data-slot])) {
  color: oklch(var(--orange));
}
.text-finance:where(:not([data-slot])) {
  color: oklch(var(--finance));
}

.bg-background:where(:not([data-slot])) {
  background: oklch(var(--background));
}
.bg-white:where(:not([data-slot])) {
  background: white;
}
.bg-primary:where(:not([data-slot])) {
  background: oklch(var(--primary));
}
.bg-accent:where(:not([data-slot])) {
  background: oklch(var(--accent));
}
.bg-action:where(:not([data-slot])) {
  background: oklch(var(--action));
}
.bg-ai:where(:not([data-slot])) {
  background: oklch(var(--ai));
}
.bg-brand:where(:not([data-slot])) {
  background: oklch(var(--brand));
}
.bg-muted-bg:where(:not([data-slot])) {
  background: oklch(var(--muted-bg));
}
.bg-finance-soft:where(:not([data-slot])) {
  background: oklch(var(--finance-soft));
}
.bg-green-bg:where(:not([data-slot])) {
  background: oklch(var(--green-bg));
}
.bg-orange-bg:where(:not([data-slot])) {
  background: oklch(var(--orange-bg));
}
.bg-error-bg:where(:not([data-slot])) {
  background: oklch(var(--error-bg));
}

/* App composition only. Component appearance comes from the Gaia registry. */
.control-gaia-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.control-gaia-toolbar > [data-slot='toolbar'] {
  flex: 1;
  min-width: 0;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/screens/insight-page.css */
/* The frame around one insight. The header is chrome and the document is the work, so the two are
   separated by a hairline and a change of ground: the header sits on the app's canvas, the document
   on paper. Nothing in the header competes with the writing — the controls are quiet until they are
   approached, and the one coloured thing is the assistant. */

.ci-insight-header {
  position: relative;
  z-index: 1;
  background: oklch(var(--background));
  border-bottom: 1px solid oklch(var(--muted-bg));
}

/* The document's ground. Paper under the writing, so the page reads as something being written
   rather than as a panel of an app. */
.ci-insight-paper {
  background: oklch(var(--white));
}

/* The assistant, and the only round control in the row. It is the assistant's colour when closed —
   an invitation — and the app's navy when open, because then the panel beside it is doing the
   talking and the button is just the way back. */
.ci-insight-assistant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: 6px;
  border-radius: 9999px;
  color: oklch(var(--white));
  background: oklch(var(--ai));
  box-shadow: 0 2px 10px -2px oklch(var(--ai) / 0.55);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 200ms ease,
    box-shadow 220ms ease;
}

.ci-insight-assistant:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px -2px oklch(var(--ai) / 0.7);
}

.ci-insight-assistant:active {
  transform: scale(0.96);
}

.ci-insight-assistant[data-ci-open='true'] {
  background: oklch(var(--primary));
  box-shadow: 0 2px 10px -2px oklch(var(--primary) / 0.45);
}

.ci-insight-assistant[data-ci-open='true']:hover {
  box-shadow: 0 4px 16px -2px oklch(var(--primary) / 0.6);
}

/* The document's shape while it is on its way: lines where the words will be, one chart-sized
   block where the chart will be. It breathes as a whole rather than each line on its own, so the
   wait reads as one thing arriving. */
.ci-insight-lines {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 48px;
  animation: ci-insight-lines 1.6s ease-in-out infinite;
}

.ci-insight-lines > span {
  display: block;
  height: 13px;
  border-radius: 6px;
  background: oklch(var(--muted-bg) / 0.75);
}

@keyframes ci-insight-lines {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-insight-assistant:hover,
  .ci-insight-assistant:active {
    transform: none;
  }
  .ci-insight-lines {
    animation: none;
  }
}


/* /@fs//home/coder/control-poc/scripts/gaia-consumer-fixture/src/index.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-xl: 0.75rem;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .row-0 {
    grid-row: 0;
  }
  .row-1 {
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-500 {
    grid-row: 500;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: 0px;
  }
  .m-1 {
    margin: var(--spacing);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .m-7 {
    margin: calc(var(--spacing) * 7);
  }
  .m-8 {
    margin: calc(var(--spacing) * 8);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-auto {
    margin-top: auto;
  }
  .box-content {
    box-sizing: content-box;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-\[7px\] {
    width: 7px;
    height: 7px;
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-auto {
    height: auto;
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-\[80px\] {
    width: 80px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-\[196px\] {
    min-width: 196px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-\[var\(--gaia-destructive\)\] {
    border-color: var(--gaia-destructive);
  }
  .border-\[var\(--gaia-primary\)\] {
    border-color: var(--gaia-primary);
  }
  .border-\[var\(--gaia-secondary\)\] {
    border-color: var(--gaia-secondary);
  }
  .bg-\[var\(--gaia-primary\)\] {
    background-color: var(--gaia-primary);
  }
  .bg-\[var\(--gaia-secondary\)\] {
    background-color: var(--gaia-secondary);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-2024 {
    padding: calc(var(--spacing) * 2024);
  }
  .p-2025 {
    padding: calc(var(--spacing) * 2025);
  }
  .px-0 {
    padding-inline: 0px;
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pr-1 {
    padding-right: var(--spacing);
  }
  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }
  .pr-1234 {
    padding-right: calc(var(--spacing) * 1234);
  }
  .text-right {
    text-align: right;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .\[tab-size\:2\] {
    tab-size: 2;
  }
  .tab-1 {
    tab-size: 1;
  }
  .text-\[var\(--gaia-badge-destructive-foreground\)\] {
    color: var(--gaia-badge-destructive-foreground);
  }
  .text-\[var\(--gaia-badge-info-foreground\)\] {
    color: var(--gaia-badge-info-foreground);
  }
  .text-\[var\(--gaia-badge-success-foreground\)\] {
    color: var(--gaia-badge-success-foreground);
  }
  .text-\[var\(--gaia-badge-warning-foreground\)\] {
    color: var(--gaia-badge-warning-foreground);
  }
  .text-\[var\(--gaia-destructive\)\] {
    color: var(--gaia-destructive);
  }
  .text-\[var\(--gaia-foreground\)\] {
    color: var(--gaia-foreground);
  }
  .text-\[var\(--gaia-link-foreground\)\] {
    color: var(--gaia-link-foreground);
  }
  .text-\[var\(--gaia-primary\)\] {
    color: var(--gaia-primary);
  }
  .text-\[var\(--gaia-primary-foreground\)\] {
    color: var(--gaia-primary-foreground);
  }
  .text-\[var\(--gaia-secondary\)\] {
    color: var(--gaia-secondary);
  }
  .text-\[var\(--gaia-secondary-foreground\)\] {
    color: var(--gaia-secondary-foreground);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\!filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[font\:inherit\] {
    font: inherit;
  }
  .\[localstack\:init\] {
    localstack: init;
  }
  .block-1 {
    block-size: var(--spacing);
  }
  @media (hover: hover) {
    .hover\:bg-\[var\(--gaia-accent\)\]:hover {
      background-color: var(--gaia-accent);
    }
    .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
      background-color: var(--gaia-destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-destructive\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-destructive) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
      background-color: var(--gaia-primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-primary\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-primary) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
      background-color: var(--gaia-primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-primary\)\]\/90:hover {
        background-color: color-mix(in oklab, var(--gaia-primary) 90%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
      background-color: var(--gaia-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-secondary\)\]\/6:hover {
        background-color: color-mix(in oklab, var(--gaia-secondary) 6%, transparent);
      }
    }
    .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
      background-color: var(--gaia-secondary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[var\(--gaia-secondary\)\]\/90:hover {
        background-color: color-mix(in oklab, var(--gaia-secondary) 90%, transparent);
      }
    }
    .hover\:text-\[var\(--gaia-accent-foreground\)\]:hover {
      color: var(--gaia-accent-foreground);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-\[var\(--gaia-ring\)\]:focus-visible {
    outline-color: var(--gaia-ring);
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  @media (width >= 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (width >= 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\[\&_strong\]\:font-bold strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }
  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }
  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .\[\&\>svg\]\:pointer-events-none > svg {
    pointer-events: none;
  }
  .\[\&\>svg\]\:size-3 > svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/sections/scenario-table.css */
.scenario-table__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.scenario-table__name {
  color: var(--foreground);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
}
.scenario-table__tags {
  display: flex;
  align-items: center;
  gap: 6px;
}
.scenario-table__draft-note {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/screens/driver-compare-screen.css */
.driver-compare {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
}
.driver-compare__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.driver-compare__header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.driver-compare__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.driver-compare__cards > * {
  min-width: 0;
}
.driver-compare__card {
  padding: 0;
  overflow: hidden;
  border-top: 3px solid;
}
.driver-compare__card-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 16px;
}
.driver-compare__swatch {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  flex: none;
}
.driver-compare__card-head > div {
  flex: 1;
  min-width: 0;
}
.driver-compare__card-head h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}
.driver-compare__card-head p {
  margin: 3px 0 0;
  color: oklch(var(--muted));
  font-size: 12px;
  text-transform: capitalize;
}
.driver-compare__card-head button {
  border: 0;
  background: transparent;
  color: oklch(var(--muted));
  cursor: pointer;
}
.driver-compare__value {
  padding: 6px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.driver-compare__value strong {
  font-size: 25px;
  line-height: 1;
}
.driver-compare__value span {
  color: oklch(var(--muted));
  font-size: 12px;
}
.driver-compare__card dl {
  margin: 0;
  border-top: 1px solid oklch(var(--input));
}
.driver-compare__card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid oklch(var(--input));
  font-size: 12px;
}
.driver-compare__card dl div:last-child {
  border-bottom: 0;
}
.driver-compare__card dt {
  color: oklch(var(--muted));
}
.driver-compare__card dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}
.driver-compare__slot {
  min-height: 310px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: oklch(var(--muted));
  border-style: dashed;
}
.driver-compare__slot select {
  max-width: 100%;
  min-width: 180px;
  padding: 8px;
  border: 1px solid oklch(var(--input));
  border-radius: 8px;
  background: white;
  color: oklch(var(--primary));
}
.driver-compare__chart {
  padding: 20px;
}
.driver-compare__chart h2 {
  margin: 0 0 12px;
  font-size: 16px;
}
.driver-compare__chart p {
  margin: 0;
  color: oklch(var(--muted));
  font-size: 13px;
}
.driver-compare__plot svg {
  display: block;
  width: 100%;
  height: auto;
}
.driver-compare__plot text {
  fill: oklch(var(--muted));
  font-size: 12px;
}
.driver-compare__grid {
  stroke: oklch(var(--input));
  stroke-width: 1;
}
.driver-compare__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
}
.driver-compare__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.driver-compare__legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.driver-compare__message {
  padding: 16px;
}
@media (max-width: 600px) {
  .driver-compare__header {
    flex-wrap: wrap;
  }
  .driver-compare__cards {
    grid-template-columns: 1fr;
  }
  .driver-compare__slot {
    min-height: 180px;
  }
}


/* /@fs//home/coder/control-poc/src/shared/ui/overlay-page.css */
/* OverlayShell's surface is only the lifecycle: the child owns its own frame,
   so Gaia's card treatment and width would fight it. */
.gaia-dialog__surface.control-overlay-bare {
  width: auto;
  max-width: calc(100vw - 48px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gaia-page-modal {
  --gaia-shell-sidebar-width: 80px;
}
@media (max-width: 900px) {
  .gaia-page-modal {
    --gaia-shell-sidebar-width: 68px;
  }
}
.scenario-create-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scenario-create-seed {
  border-top: 1px solid var(--gaia-border);
  padding-top: 14px;
}


/* /@fs//home/coder/control-poc/src/shared/ui/ai-elements/ai-elements.css */
/* The ported AI Elements. Tokens only — every colour is an oklch(var(--token)) from
   design-system/tokens.css, and every animation degrades to a static, legible resting state
   under prefers-reduced-motion. */

/* Text that is still being worked on: a bright band crossing the glyphs, clipped to the text,
   so a running line reads as live without a spinner anywhere on screen.

   Two stacked layers. Underneath, a flat muted fill is the text's resting colour. Above it, a
   250%-wide band travelling right to left whose centre is the full-contrast ink — on a light
   surface the sweep therefore reads as the sentence brightening rather than as a pale wash,
   which is what a page-background highlight would give here. The band's half-width comes from
   `--ci-shimmer-spread`, which the component sets from the length of the sentence, so a short
   step and a long one sweep at the same apparent speed. */
@keyframes ci-shimmer-sweep {
  0% {
    background-position:
      100% center,
      0 0;
  }
  100% {
    background-position:
      0% center,
      0 0;
  }
}

.ci-shimmer {
  --ci-shimmer-spread: 24px;
  --ci-shimmer-duration: 2s;
  position: relative;
  display: inline-block;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(50% - var(--ci-shimmer-spread)),
      oklch(var(--primary)),
      transparent calc(50% + var(--ci-shimmer-spread))
    ),
    linear-gradient(oklch(var(--muted-2)), oklch(var(--muted-2)));
  background-size:
    250% 100%,
    auto;
  background-repeat: no-repeat, padding-box;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: ci-shimmer-sweep var(--ci-shimmer-duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ci-shimmer {
    animation: none;
    color: oklch(var(--muted));
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* A disclosure whose body slides rather than snapping. The height is animated by the component;
   this only carries the easing and the reduced-motion opt-out. */
.ci-disclosure-body {
  overflow: hidden;
}

/* One step of a chain of thought. The pending steps sit back so the running one is the only
   line at full contrast — status drives opacity, never colour. */
.ci-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  transition: opacity 180ms ease;
}

.ci-step-pending {
  opacity: 0.55;
}

.ci-step-active {
  opacity: 1;
}

.ci-step-complete {
  opacity: 0.72;
}

.ci-step-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  align-self: center;
  background: oklch(var(--muted-2));
}

.ci-step-active .ci-step-dot {
  background: oklch(var(--ai));
  box-shadow: 0 0 0 3px oklch(var(--ai) / 0.18);
}

.ci-step-complete .ci-step-dot {
  background: oklch(var(--ai));
}

.ci-step-error .ci-step-dot {
  background: oklch(var(--error));
}

.ci-step-label {
  flex: 1;
  min-width: 0;
  color: oklch(var(--muted));
}

.ci-step-error .ci-step-label,
.ci-step-error .ci-step-result {
  color: oklch(var(--error));
}

.ci-step-result {
  flex-shrink: 0;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/sections/scenario-forecast-glance.css */
.scenario-glance {
  min-height: 250px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.scenario-glance__heading {
  min-width: 0;
}
.scenario-glance__eyebrow {
  display: block;
  color: oklch(var(--muted));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scenario-glance__heading strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: oklch(var(--primary));
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-glance__heading strong i {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.scenario-glance__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid oklch(var(--input));
  border-radius: 11px;
  overflow: hidden;
}
.scenario-glance__metrics > span {
  padding: 9px 12px;
  border-right: 1px solid oklch(var(--input));
  min-width: 0;
}
.scenario-glance__metrics > span:last-child {
  border-right: 0;
}
.scenario-glance__metrics small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.scenario-glance__metrics small i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--chart-1);
}
.scenario-glance__metrics small i.scenario-glance__drivers {
  background: #f28c18;
}
.scenario-glance__metrics small i.scenario-glance__actions {
  background: #268315;
}
.scenario-glance__metrics b {
  display: block;
  margin-top: 3px;
  color: oklch(var(--primary));
  font-size: 16px;
  white-space: nowrap;
}
.scenario-glance__metrics em {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}
.scenario-glance__chart {
  flex: 1;
  min-height: 85px;
  position: relative;
}
.scenario-glance__chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* The marker on the hovered data point. A white ring lifts it off the area
   fill the way the chart's own line is lifted.
   Above the tooltip, which is opaque and anchored at a fixed 45%: a series
   running below that line was covered by the very tooltip describing it, which
   is the "no dots on hover" QA reported. It has no pointer events, so nothing
   is blocked by stacking it on top. */
.scenario-glance__point {
  position: absolute;
  z-index: 11;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px white;
  pointer-events: none;
}
.scenario-glance__tooltip {
  position: absolute;
  z-index: 10;
  top: 45%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border-radius: 8px;
  background: white;
  border: 1px solid oklch(var(--input));
  box-shadow: 0 8px 20px rgb(20 20 40 / 0.16);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.scenario-glance__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: oklch(var(--muted));
  font-size: 12px;
}
@media (max-width: 520px) {
  .scenario-glance__metrics em {
    display: none;
  }
  .scenario-glance__metrics > span {
    padding: 8px;
  }
}


/* /@fs//home/coder/control-poc/src/shared/ui/info.css */
/* THE ⓘ INHERITS ITS SIZE FROM THE TEXT IT SITS BESIDE. `font: inherit` is what
   carries the step down, and every measurement below is in `em` of it — so the
   button next to an .h3 is an h3-sized button and the one next to a .text-xs is
   caption-sized, with no call site choosing a number. */
.info-hint {
  font: inherit;
  /* THE RATIO THE APP HEADER ALREADY USED: a 32px button holding a 16px glyph
     beside 24px type. Expressed against the inherited step, that is 1.333em and
     0.667em — so the header is pixel-identical to what it was, and every other
     placement is the same proportion at its own size. */
  width: 1.333em;
  height: 1.333em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: none;
  border-radius: 9999px;
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--muted));
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms;
}
.info-hint:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* One shape for every Info modal, so the reader recognises it before reading
   it. Paragraphs are the only thing it holds; a modal that grows controls is
   not an explanation any more. */
.info-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.55;
}
.info-modal-body p {
  margin: 0;
}
.info-modal-body b,
.info-modal-body strong {
  color: oklch(var(--primary));
}


/* /@fs//home/coder/control-poc/src/app/shell/header.css */
/* Detail rail actions use the same compact outline pill as the prototype. */
.gaia-detail-panel__head .btn-outline {
  border-color: oklch(var(--primary));
  border-radius: 9999px;
}

@media (max-width: 700px) {
  .app-header {
    position: relative;
    height: auto !important;
    min-height: 96px;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 8px 0;
    padding: 12px 12px 12px 0 !important;
  }

  .app-header__title {
    min-width: 0;
    flex: 1;
    padding-left: 16px !important;
  }

  .app-header__grow {
    display: none;
  }

  .app-header__actions {
    width: calc(100% - var(--header-spacer));
    height: auto !important;
    margin-left: var(--header-spacer);
    padding-right: 0 !important;
    flex-wrap: wrap;
  }

  .app-header__actions > div {
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .app-header__actions > button {
    position: absolute !important;
    top: 30px;
    right: 16px;
  }
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/screens/insights-list.css */
/* The list of saved insights. Each one is a card rather than a row in a slab, because an insight
   is a document someone wrote and a list of them should read like a shelf. A card lifts toward the
   pointer, its mark takes the assistant's colour, and "Open" arrives from the right — the whole
   card is the target, so Delete stays a quiet corner action that only shows when the card is
   under the pointer. Cards arrive in sequence on first paint and never move again. */

.ci-insights-lede {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.ci-insights-new {
  flex-shrink: 0;
  box-shadow: 0 1px 2px oklch(var(--primary) / 0.14);
  transition:
    background-color 150ms,
    box-shadow 200ms,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-insights-new:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px oklch(var(--primary) / 0.45);
}

.ci-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.ci-insight-card {
  position: relative;
  display: flex;
  border-radius: 14px;
  border: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
  box-shadow: 0 1px 2px oklch(var(--primary) / 0.04);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
  animation: ci-insight-card-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-insight-card:hover,
.ci-insight-card:focus-within {
  transform: translateY(-2px);
  border-color: oklch(var(--ai) / 0.4);
  box-shadow:
    0 1px 2px oklch(var(--primary) / 0.04),
    0 14px 30px -14px oklch(var(--primary) / 0.32);
}

.ci-insight-card-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'mark title title'
    '.    meta  open';
  align-items: start;
  gap: 10px 11px;
  flex: 1;
  min-width: 0;
  /* Room on the right of the first line for Delete, which sits in that corner on hover. */
  padding: 15px 16px 14px;
}

.ci-insight-card-link > .ci-insight-card-title {
  padding-right: 22px;
}

.ci-insight-card-mark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  border-radius: 9px;
  background: oklch(var(--muted-bg) / 0.65);
  color: oklch(var(--muted));
  transition:
    background 220ms ease,
    color 220ms ease;
}

.ci-insight-card:hover .ci-insight-card-mark,
.ci-insight-card:focus-within .ci-insight-card-mark {
  background: oklch(var(--ai) / 0.14);
  color: oklch(var(--ai));
}

.ci-insight-card-title {
  grid-area: title;
  min-width: 0;
  padding-top: 4px;
  font-size: 14.5px;
  line-height: 1.35;
  /* Two lines of a real name, then an ellipsis, and the room for both either way: the shelf
     stays even without cutting short names off. */
  min-height: calc(2 * 1.35em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ci-insight-card-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  align-self: center;
}

.ci-insight-card-shared {
  color: oklch(var(--accent));
  font-weight: 600;
}

/* The invitation, which only exists on approach. It holds its height at rest so nothing reflows. */
.ci-insight-card-open {
  grid-area: open;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  flex-shrink: 0;
  color: oklch(var(--ai));
  font-weight: 600;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 200ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-insight-card:hover .ci-insight-card-open,
.ci-insight-card:focus-within .ci-insight-card-open {
  opacity: 1;
  transform: none;
}

/* Delete: present, but never the loudest thing on a card someone wrote. */
.ci-insight-card-remove {
  position: absolute;
  top: 9px;
  right: 9px;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* In this corner the icon is the whole control: the word would sit over the insight's name, and
   the button keeps its label for a screen reader either way. */
.ci-insight-card-remove span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ci-insight-card-remove button {
  justify-content: center;
  width: 26px;
  padding: 0;
  border-radius: 8px;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.ci-insight-card-remove button:hover:not(:disabled) {
  background: oklch(var(--error) / 0.12);
  color: oklch(var(--error));
}

.ci-insight-card:hover .ci-insight-card-remove,
.ci-insight-card:focus-within .ci-insight-card-remove {
  opacity: 1;
}

/* While the list is being read: cards with no content, in the shape the real ones will take. */
.ci-insight-card-ghost {
  height: 118px;
  border-style: dashed;
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--white) / 0.5);
  box-shadow: none;
  animation: ci-insight-ghost 1.6s ease-in-out infinite;
}

.ci-insight-card-ghost:nth-child(2) {
  animation-delay: 160ms;
}
.ci-insight-card-ghost:nth-child(3) {
  animation-delay: 320ms;
}

@keyframes ci-insight-ghost {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes ci-insight-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Nothing here yet: the room to start, not an apology. */
.ci-insights-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 24px 56px;
  border-radius: 18px;
  border: 1px dashed oklch(var(--muted-bg));
  background: oklch(var(--white) / 0.6);
}

.ci-insights-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

@media (prefers-reduced-motion: reduce) {
  .ci-insight-card,
  .ci-insight-card-ghost {
    animation: none;
  }
  .ci-insight-card:hover,
  .ci-insight-card:focus-within,
  .ci-insights-new:hover:not(:disabled) {
    transform: none;
  }
  .ci-insight-card-open {
    transform: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/artifacts.css */
/* Artifacts: the panel beside the conversation, the list inside it, the modal it expands into,
   and the page that lists everything across conversations. All three share the row and the
   viewer, so their styles live together rather than in chat.css, which is about the thread. */

.ci-artifact-panel {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
}

/* Sits over the border, wide enough to grab without hunting for it. */
.ci-artifact-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  z-index: 5;
  width: 6px;
  cursor: col-resize;
}
.ci-artifact-resize:hover,
.ci-artifact-resize:focus-visible {
  background: oklch(var(--ai) / 0.25);
}

.ci-artifact-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 11px 16px;
  border-bottom: 1px solid oklch(var(--muted-bg));
}

.ci-artifact-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-header-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: oklch(var(--muted-2));
}
.ci-artifact-header-btn:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

.ci-artifact-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.ci-artifact-body-scroll {
  overflow-y: auto;
}

/* ---- the list ---- */

.ci-artifact-list {
  padding: 12px 14px 18px;
}

.ci-artifact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ci-artifact-filters .btn-pill {
  height: 26px;
  padding: 0 11px;
  font-size: 12px;
}

.ci-artifact-empty {
  margin: 0;
  padding: 6px 2px;
  line-height: 1.5;
}

.ci-artifact-family + .ci-artifact-family {
  margin-top: 16px;
}

.ci-artifact-family-label {
  margin: 0 0 6px 2px;
}

.ci-artifact-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-artifact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  transition:
    background-color 140ms,
    border-color 140ms;
}
.ci-artifact-row:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.ci-artifact-row[data-open='true'] {
  border-color: oklch(var(--ai) / 0.35);
  background: oklch(var(--ai) / 0.08);
}

/* Uploaded and generated are told apart by the glyph's tint, not by a word on every row. */
.ci-artifact-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: oklch(var(--muted-bg) / 0.8);
  color: oklch(var(--muted));
}
.ci-artifact-glyph[data-origin='generated'] {
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

.ci-artifact-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ci-artifact-name {
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-kind,
.ci-artifact-thread {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-time {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- the modal ---- */

.ci-artifact-modal {
  display: flex;
  flex-direction: column;
  width: min(1200px, 100vw - 48px);
  height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: oklch(var(--white));
}

.ci-artifact-modal-title {
  gap: 0;
}

/* ---- the page ---- */

.ci-artifacts-page {
  max-width: 900px;
  margin: 0 auto;
}

.ci-artifacts-search {
  margin-bottom: 14px;
}
.ci-artifacts-search .input {
  padding-left: 32px;
}
.ci-artifacts-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  color: oklch(var(--muted-2));
  pointer-events: none;
  transform: translateY(-50%);
}
.ci-artifacts-page .ci-artifact-list {
  padding: 0;
}
.ci-artifacts-page .ci-artifact-row {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--white));
}
.ci-artifacts-page .ci-artifact-row:hover {
  border-color: oklch(var(--muted));
}

/* ---- the actions row, shared by panel and modal ---- */

.ci-artifact-actions {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
}

/* The card an artifact came from, lit for a moment after "Show in conversation" found it. */
[data-ci-found='true'] {
  border-radius: var(--radius-surface);
  outline: 2px solid oklch(var(--ai) / 0.55);
  outline-offset: 3px;
  transition: outline-color 300ms ease;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/message-actions.css */
/* The action row under an answer, the overflow menu it opens, and the affordance that carries
   one figure out of a view into the next question — the controls a person acts on an answer
   with, wherever on the answer they sit.

   The row's reveal-on-hover is chat.css's (`.ci-turn:hover .ci-actions`). What is here are the
   two cases where hovering is not how it gets found: a touch screen, which has no hover at all,
   and the last answer, which is the one being acted on. */

/* Both selectors are written against `.ci-turn` so they outweigh the single-class rule in
   chat.css that hides the row. Bundlers are free to order two stylesheets either way, and at
   equal specificity the later one wins — which would leave the row hidden on a touch screen
   half the time. */
@media (hover: none) {
  .ci-turn .ci-actions {
    opacity: 1;
  }
}

/* The newest answer keeps its row on screen: it is where a rating, a retry or a follow-up is
   most likely, and nothing above it is competing for the same attention. */
.ci-turn .ci-actions-last {
  opacity: 1;
}

/* Small, quiet, and only lit under the pointer — the row states what is possible without
   drawing the eye away from the answer it belongs to. */
.ci-actions button {
  transition:
    background 120ms,
    color 120ms;
}
.ci-actions > button:hover:not(:disabled),
.ci-actions-menu-wrap > button:hover:not(:disabled) {
  background: oklch(var(--muted-bg) / 0.6);
}

.ci-actions-menu-wrap {
  position: relative;
  display: inline-flex;
}

.ci-actions-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 216px;
  padding: 5px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  background: oklch(var(--white));
  box-shadow: 0 10px 30px oklch(var(--primary) / 0.12);
}

.ci-actions-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  text-align: left;
  color: oklch(var(--primary));
  background: transparent;
}
.ci-actions-menu-item:hover:not([aria-disabled='true']),
.ci-actions-menu-item:focus-visible:not([aria-disabled='true']) {
  background: oklch(var(--muted-bg) / 0.6);
}
.ci-actions-menu-item[aria-disabled='true'] {
  color: oklch(var(--muted-2) / 0.7);
  cursor: default;
}

/* Flipped below the trigger when there is not room above it — near the top of the stream the
   scroll container clips anything that reaches past it. */
.ci-actions-menu-down {
  top: calc(100% + 6px);
  bottom: auto;
}

/* Why a disabled item cannot be used, on the line under its name — the same sentence its
   tooltip carries, said where it does not need hovering to be read. */
.ci-actions-menu-why {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: oklch(var(--muted-2) / 0.7);
}

/* Quoting one figure out of a view. The control belongs to the row or tile it sits in and
   surfaces when that is hovered or holds focus — a table of thirty rows showing thirty of these
   at once would be louder than the figures. Opacity only: it stays in the tab order unhovered,
   so a keyboard finds it, and it lights up as soon as it takes focus. */
.ci-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: oklch(var(--muted-2));
  opacity: 0;
  transition:
    opacity 120ms,
    background 120ms;
}
.ci-quote-host:hover .ci-quote,
.ci-quote-host:focus-within .ci-quote,
.ci-quote:focus-visible {
  opacity: 1;
}
.ci-quote:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* Under a chart, where the figure being pointed at has to be named for the control to mean
   anything — the bar itself cannot hold a button the pointer could reach. */
.ci-quote-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
  color: oklch(var(--muted));
  transition: background 120ms;
}
.ci-quote-inline:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* On a tile the control has no column of its own, so it sits in the corner over the figure. */
.ci-quote-corner {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* A tile is the positioning context for the corner control above. */
.ci-quote-host-tile {
  position: relative;
}

@media (hover: none) {
  .ci-quote {
    opacity: 1;
  }
}

/* The one field a rating opens. Optional — Send with it empty and the rating still lands. */
.ci-feedback {
  margin-top: 8px;
  max-width: 460px;
  padding: 12px 14px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: oklch(var(--white));
}
.ci-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}


/* /@fs//home/coder/control-poc/src/shared/design-system/compat.css */

@layer control-legacy, theme, base, components, utilities;
/* Keep layout utilities below Gaia. Legacy colour tokens and classes are
   imported after Gaia by gaia-consumer.css to preserve their original meaning. */
@layer control-legacy{

/* Cozero design system — canonical tokens + utility classes for the Control app.
   Ported from control-module/apps/web/src/styles/tokens.css (OKLCH navy
   #272C5F primary, finance indigo accent, AI green, Inter-first font stack). This file is the
   legacy utility layer; colour values and classes live in legacy-colors.css. */

* {
  box-sizing: border-box;
}
/* Gaia components own their border utility; legacy controls keep this fallback. */
*:where(:not([data-slot])) {
  border-color: oklch(var(--muted-bg));
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    'Inter',
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  background: oklch(var(--background));
  color: oklch(var(--primary));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button {
  font-family: inherit;
}

/* Reset all <button>s to behave like an unstyled action surface.
   Each custom button restyles itself. */
button:where(:not([data-slot='button']):not(.btn)) {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Typography */
.h0 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.h3 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.body-bold {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.body {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}
.caption {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
}
.caption-bold {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
.eyebrow {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--muted) / 0.7);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

.border {
  border: 1px solid oklch(var(--muted-bg));
}
.border-b {
  border-bottom: 1px solid oklch(var(--muted-bg));
}
.border-t {
  border-top: 1px solid oklch(var(--muted-bg));
}
.border-r {
  border-right: 1px solid oklch(var(--muted-bg));
}
.border-l {
  border-left: 1px solid oklch(var(--muted-bg));
}
.divide-y > * + * {
  border-top: 1px solid oklch(var(--muted-bg));
}

.rounded-md {
  border-radius: 8px;
}
.rounded-lg {
  border-radius: 10px;
}
.rounded-xl {
  border-radius: 16px;
}
.rounded-2xl {
  border-radius: 20px;
}
.rounded-full {
  border-radius: 9999px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 150ms,
    border-color 150ms,
    opacity 150ms;
  white-space: nowrap;
}
button:not([data-slot='button']):focus-visible,
[role='button']:focus-visible,
[role='radio']:focus-visible,
a:focus-visible {
  outline: 2px solid oklch(var(--action));
  outline-offset: 2px;
}
.btn-primary {
  background: oklch(var(--primary));
  color: white;
}
.btn-primary:hover {
  background: oklch(var(--primary) / 0.92);
}
.btn-action {
  background: oklch(var(--action));
  color: white;
}
.btn-action:hover {
  background: oklch(var(--action) / 0.92);
}
.btn-outline {
  background: white;
  color: oklch(var(--primary));
  border: 1px solid oklch(var(--muted-bg));
}
.btn-outline:hover {
  border-color: oklch(var(--muted));
}
.btn-ghost {
  background: transparent;
  color: oklch(var(--primary));
}
.btn-ghost:hover {
  background: oklch(var(--muted-bg) / 0.6);
}
/* A disabled button reads as unavailable: faded, no hover, and the cursor says so. Its
   `title` carries the reason. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary:disabled:hover {
  background: oklch(var(--primary));
}
.btn-action:disabled:hover {
  background: oklch(var(--action));
}
.btn-outline:disabled:hover {
  border-color: oklch(var(--muted-bg));
}
.btn-ghost:disabled:hover {
  background: transparent;
}
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}
.btn-pill {
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Card */
.card {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
}
.card-stat {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
  padding: 16px 18px;
}
.card-stat-accent {
  border-left: 4px solid oklch(var(--primary));
  padding-left: 14px;
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.badge-success {
  background: oklch(var(--green-bg));
  color: oklch(var(--green));
}
.badge-warning {
  background: oklch(var(--orange-bg));
  color: oklch(var(--orange));
}
.badge-error {
  background: oklch(var(--error-bg));
  color: oklch(var(--error));
}
.badge-info {
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
}
.badge-neutral {
  background: oklch(var(--muted-bg));
  color: oklch(var(--muted));
}
.badge-finance {
  background: oklch(var(--finance-soft));
  color: oklch(var(--finance));
}

/* Status dots */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}
.dot-success {
  background: oklch(var(--green));
}
.dot-warning {
  background: oklch(var(--orange));
}
.dot-error {
  background: oklch(var(--error));
}
.dot-info {
  background: oklch(var(--action));
}
.dot-ai {
  background: oklch(var(--ai));
}

.shadow-sm {
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.04),
    0 1px 1px rgba(20, 20, 40, 0.04);
}
.shadow-panel {
  box-shadow:
    0 30px 60px -10px rgba(20, 20, 40, 0.18),
    0 8px 20px -8px rgba(20, 20, 40, 0.08);
}
.shadow-pill {
  box-shadow: 8px 8px 12px 0px oklch(var(--muted-bg));
}

/* Flex / grid utils */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.flex-1 {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.grid {
  display: grid;
}
.gap-1 {
  gap: 4px;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-5 {
  gap: 20px;
}
.gap-6 {
  gap: 24px;
}
.gap-8 {
  gap: 32px;
}

/* Sidebar floating pill enter */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-left {
  animation: slideInLeft 150ms ease-out;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Overlay (Modal/Drawer) enter — see src/shared/ui/overlay.tsx */
@keyframes overlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anim-slide-in-right {
  animation: slideInRight 200ms ease-out;
}
/* Inline row editor expand — see ledger-catalogs RowEditor */
@keyframes expandDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(var(--muted-bg));
  border-radius: 9999px;
  border: 2px solid oklch(var(--background));
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(var(--secondary) / 0.5);
}

/* The Strategy-Builder view navigation scrolls sideways rather than wrapping,
   and a visible track would cost as much height as the row it protects. */
.sb-viewnav::-webkit-scrollbar {
  display: none;
}

/* A pill rail or chip strip that scrolls sideways inside a control of its own.
   The global scrollbar above is 10px of permanent track — a third of such a
   row's height. The partially-cut item at the edge is the affordance. */
.scroll-rail {
  scrollbar-width: none;
}
.scroll-rail::-webkit-scrollbar {
  display: none;
}

/* Page transition (opacity-only on purpose) */
@keyframes pageFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-fade {
  animation: pageFade 200ms ease-out;
}
/* A navigation the browser is already crossfading does not fade the page a second time. */
html:active-view-transition .page-fade {
  animation: none;
}

/* Subtle hover lift for clickable cards */
.hover-lift {
  transition:
    border-color 150ms,
    transform 150ms,
    box-shadow 150ms;
}
.hover-lift:hover {
  border-color: oklch(var(--muted) / 0.5);
}

/* Glow for finance-related highlight */
.finance-glow {
  box-shadow:
    0 0 0 1px oklch(var(--finance) / 0.2),
    0 8px 24px -8px oklch(var(--finance) / 0.25);
}

/* Planning exposure-slider thumb / track */
.planning-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
  margin-top: 0;
}
.planning-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  border: 2px solid oklch(var(--finance));
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.18);
  cursor: pointer;
}
.planning-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
.planning-range::-moz-range-track {
  background: transparent;
  height: 4px;
}

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


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/sections/proposal.css */
/* A proposed change inside the document.

   The change carries the presence; the controls stay quiet. A proposed block is lifted onto its
   own surface — white card, soft shadow, a solid rail down its left edge in the change's colour —
   so at a glance the document reads as "something has been laid in here". The two decisions float
   off the top-right corner on that surface, always in view, but they are not coloured until the
   pointer is on them: the block says "look at me", the buttons say "when you are ready".

   Motion carries arrival and departure only. A block rises in once and settles, and a decided
   block flashes its colour once on the way out. Nothing idles, nothing pulses: what is waiting is
   said by the lift and the rail, which hold without moving. */

.ci-proposal {
  --ci-proposal-tint: var(--ai);
  position: relative;
  margin: 18px 0 10px -22px;
  padding: 12px 16px 10px 20px;
  border-radius: 4px 12px 12px 4px;
  background: oklch(var(--white));
  box-shadow:
    inset 0 0 0 1px oklch(var(--ci-proposal-tint) / 0.16),
    0 1px 2px oklch(var(--primary) / 0.05),
    0 8px 24px -10px oklch(var(--ci-proposal-tint) / 0.35);
  transition:
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: ci-proposal-land 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The rail: its own element rather than a border, so it can be inset to the text, can carry the
   waiting sheen, and can retract when the block is decided. */
.ci-proposal::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: oklch(var(--ci-proposal-tint));
  transform-origin: top;
  animation: ci-proposal-rail 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-proposal[data-kind='insert'] {
  --ci-proposal-tint: var(--ai);
}

.ci-proposal[data-kind='replace'] {
  --ci-proposal-tint: var(--ai);
}

.ci-proposal[data-kind='remove'] {
  --ci-proposal-tint: var(--error);
}

.ci-proposal[data-kind='move'] {
  --ci-proposal-tint: var(--accent);
}

.ci-proposal:hover {
  box-shadow:
    inset 0 0 0 1px oklch(var(--ci-proposal-tint) / 0.24),
    0 1px 2px oklch(var(--primary) / 0.05),
    0 12px 30px -10px oklch(var(--ci-proposal-tint) / 0.42);
}

.ci-proposal-body {
  animation: ci-proposal-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

/* A heading opens with a large top margin, and the block wrapper's `flow-root` keeps that margin
   INSIDE the mark — which would lift a tall empty slab above the words and start the rail there.
   The margin is moved out to the mark itself, so the document keeps its rhythm while the rail,
   the controls and the first line all begin at the text. */
.ci-proposal:has(.slate-h1) {
  margin-top: 1.6em;
}
.ci-proposal:has(.slate-h2) {
  margin-top: 1.4em;
}
.ci-proposal:has(.slate-h3) {
  margin-top: 1.1em;
}
.ci-proposal:has(:is(.slate-h4, .slate-h5, .slate-h6)) {
  margin-top: 0.9em;
}

.ci-proposal :where(.slate-h1, .slate-h2, .slate-h3, .slate-h4, .slate-h5, .slate-h6) {
  margin-top: 0;
}

/* A chart block brings its own card. The proposal surface would then be a card inside a card, so
   here the surface steps back to a tint and lets the chart's own card carry the edge. */
.ci-proposal:has(.slate-ci_view) {
  margin-top: 20px;
  margin-bottom: 14px;
  padding-top: 18px;
  padding-bottom: 12px;
  background: oklch(var(--ci-proposal-tint) / 0.05);
  box-shadow: none;
}

.ci-proposal:has(.slate-ci_view):hover {
  background: oklch(var(--ci-proposal-tint) / 0.08);
  box-shadow: none;
}

.ci-proposal .slate-ci_view {
  margin-top: 0;
  margin-bottom: 0;
}

.ci-proposal[data-kind='remove'] > .ci-proposal-body {
  text-decoration: line-through;
  text-decoration-color: oklch(var(--error) / 0.5);
  text-decoration-thickness: 1px;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* What a rewrite replaces: the old words, struck, tucked under the new version behind a hairline
   so the pair reads as one decision — this instead of that — rather than as two things. */
.ci-proposal-before {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid oklch(var(--muted-bg) / 0.9);
  font-size: 12px;
  line-height: 1.45;
  color: oklch(var(--muted-2));
  user-select: none;
  animation: ci-proposal-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

.ci-proposal-before-label {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(var(--muted-2));
}

.ci-proposal-before-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: oklch(var(--muted-2) / 0.55);
}

@keyframes ci-proposal-land {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ci-proposal-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ci-proposal-rail {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* The two decisions, floating off the block's top-right corner on their own small surface. They
   keep the label beside them so the person knows what kind of change they are deciding, but the
   label is quiet type on the surface rather than a coloured capsule. */
.ci-proposal-pill {
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 3px 4px 3px 10px;
  border-radius: 9999px;
  background: oklch(var(--white));
  border: 1px solid oklch(var(--muted-bg));
  box-shadow:
    0 1px 2px oklch(var(--primary) / 0.06),
    0 4px 14px -4px oklch(var(--primary) / 0.16);
  user-select: none;
  animation: ci-proposal-pill-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
  transition:
    box-shadow 200ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms ease;
}

.ci-proposal:hover .ci-proposal-pill,
.ci-proposal-pill:hover,
.ci-proposal-pill:focus-within {
  transform: translateY(-1px);
  border-color: oklch(var(--ci-proposal-tint) / 0.4);
  box-shadow:
    0 1px 2px oklch(var(--primary) / 0.06),
    0 8px 22px -6px oklch(var(--primary) / 0.22);
}

/* The label: the kind of change, in the change's colour, as type rather than as a filled chip. */
.ci-proposal-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-right: 5px;
  color: oklch(var(--ci-proposal-tint));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes ci-proposal-pill-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- The bar above the document, while a proposal is open ---- */

/* Who wrote this. The bar is the only place the assistant is named inside the document, so the
   words below it read as a proposal from someone rather than as a system message. */
.ci-proposal-bar-who {
  display: block;
  margin-bottom: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(var(--ai));
}

.ci-proposal-bar-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 9px;
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

/* How far through the proposal the person is, along the bar's top edge. */
.ci-proposal-bar-track {
  display: block;
  height: 2px;
  flex-shrink: 0;
  background: oklch(var(--muted-bg) / 0.7);
}

.ci-proposal-bar-fill {
  display: block;
  height: 100%;
  transform-origin: left;
  background: oklch(var(--ai));
}

/* The count of what is still open. It reads as a number first, so the size of the decision is
   legible from across the page. */
.ci-proposal-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  margin-right: 4px;
  padding-right: 13px;
  border-right: 1px solid oklch(var(--muted-bg));
  white-space: nowrap;
  color: oklch(var(--muted));
  font-size: 12px;
}

.ci-proposal-count b {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: oklch(var(--primary));
}

/* The same pair in the bar above, beside the rename. */
.ci-proposal-actions {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9999px;
  background: oklch(var(--white));
  border: 1px solid oklch(var(--muted-bg));
  box-shadow: 0 1px 3px oklch(var(--primary) / 0.07);
}

:is(.ci-proposal-pill, .ci-proposal-actions) button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  color: oklch(var(--muted-2));
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Neither decision is pre-coloured: an accept that is already lit reads as the app's answer
   rather than the person's. Colour arrives on approach, and it is the only colour on the pill. */
:is(.ci-proposal-pill, .ci-proposal-actions) .ci-proposal-accept:hover,
:is(.ci-proposal-pill, .ci-proposal-actions) .ci-proposal-accept:focus-visible {
  background: oklch(var(--ai));
  color: oklch(var(--white));
  transform: scale(1.1);
}

:is(.ci-proposal-pill, .ci-proposal-actions) .ci-proposal-reject:hover,
:is(.ci-proposal-pill, .ci-proposal-actions) .ci-proposal-reject:focus-visible {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
  transform: scale(1.1);
}

:is(.ci-proposal-pill, .ci-proposal-actions) button:active {
  transform: scale(0.92);
}

:is(.ci-proposal-pill, .ci-proposal-actions) button:focus-visible {
  outline: 2px solid oklch(var(--accent) / 0.55);
  outline-offset: 1px;
}

/* The moment a block is decided, before the document is rebuilt: the surface flattens into the
   page, the rail retracts and the controls leave, so the change is seen settling rather than
   blinking out. A kept block flashes its colour once on the way down — the receipt for the click. */
.ci-proposal[data-settling] {
  background: transparent;
  box-shadow: none;
  transition:
    background 240ms ease,
    box-shadow 240ms ease;
}

.ci-proposal[data-settling='accept'] {
  animation: ci-proposal-kept 420ms ease both;
}

@keyframes ci-proposal-kept {
  0% {
    box-shadow: 0 0 0 0 oklch(var(--ci-proposal-tint) / 0.28);
  }
  35% {
    box-shadow: 0 0 0 4px oklch(var(--ci-proposal-tint) / 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 oklch(var(--ci-proposal-tint) / 0);
  }
}

.ci-proposal[data-settling] > .ci-proposal-pill {
  animation: none;
  opacity: 0;
  transform: translateY(-5px) scale(0.9);
  transition:
    opacity 160ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.ci-proposal[data-settling] > .ci-proposal-before {
  opacity: 0;
  transition: opacity 160ms ease;
}

.ci-proposal[data-settling]::before {
  animation: none;
  transform: scaleY(0);
  opacity: 0;
  transition:
    transform 240ms cubic-bezier(0.4, 0, 1, 1),
    opacity 240ms ease;
}

.ci-proposal[data-settling='reject'] > .ci-proposal-body {
  opacity: 0.25;
  transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ci-proposal,
  .ci-proposal-body,
  .ci-proposal-before,
  .ci-proposal-pill,
  .ci-proposal::before {
    animation: none;
  }
  .ci-proposal:hover .ci-proposal-pill,
  .ci-proposal-pill:hover,
  .ci-proposal-pill:focus-within,
  :is(.ci-proposal-pill, .ci-proposal-actions) button:hover {
    transform: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/control/scenarios/sections/scenario-forecast-detail.css */
.scenario-forecast-detail__state {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  padding: 24px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/sections/editor.css */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --ci-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --ci-color-red-100: oklch(93.6% 0.032 17.717);
  --ci-color-red-700: oklch(50.5% 0.213 27.518);
  --ci-color-emerald-100: oklch(95% 0.052 163.051);
  --ci-color-emerald-700: oklch(50.8% 0.118 165.612);
  --ci-color-slate-200: oklch(92.9% 0.013 255.508);
  --ci-color-zinc-200: oklch(92% 0.004 286.32);
  --ci-color-neutral-500: oklch(55.6% 0 none);
  --ci-color-white: #fff;
  --ci-spacing: 0.25rem;
  --ci-text-xs: 0.75rem;
  --ci-text-xs--line-height: calc(1 / 0.75);
  --ci-text-sm: 0.875rem;
  --ci-text-sm--line-height: calc(1.25 / 0.875);
  --ci-text-base: 1rem;
  --ci-text-base--line-height: calc(1.5 / 1);
  --ci-text-lg: 1.125rem;
  --ci-text-lg--line-height: calc(1.75 / 1.125);
  --ci-text-xl: 1.25rem;
  --ci-text-xl--line-height: calc(1.75 / 1.25);
  --ci-text-2xl: 1.5rem;
  --ci-text-2xl--line-height: calc(2 / 1.5);
  --ci-text-4xl: 2.25rem;
  --ci-text-4xl--line-height: calc(2.5 / 2.25);
  --ci-font-weight-medium: 500;
  --ci-font-weight-semibold: 600;
  --ci-font-weight-bold: 700;
  --ci-tracking-tight: -0.025em;
  --ci-radius-sm: 0.25rem;
  --ci-radius-md: 0.375rem;
  --ci-default-transition-duration: 150ms;
  --ci-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --ci-radius: 8px;
  --ci-color-background: oklch(var(--background));
  --ci-color-foreground: oklch(var(--primary));
  --ci-color-muted: oklch(var(--muted-bg));
  --ci-color-muted-foreground: oklch(var(--muted));
  --ci-color-border: oklch(var(--muted-bg));
  --ci-color-input: oklch(var(--muted-bg));
  --ci-color-ring: oklch(var(--accent));
  --ci-color-primary: oklch(var(--primary));
  --ci-color-primary-foreground: oklch(var(--background));
  --ci-color-secondary: oklch(var(--muted-bg));
  --ci-color-secondary-foreground: oklch(var(--primary));
  --ci-color-accent: oklch(var(--muted-bg));
  --ci-color-accent-foreground: oklch(var(--primary));
  --ci-color-popover: oklch(var(--background));
  --ci-color-popover-foreground: oklch(var(--primary));
  --ci-color-brand: oklch(var(--accent));
  --ci-color-destructive: oklch(var(--error));
}
.ci\:pointer-events-auto {
  pointer-events: auto;
}
.ci\:pointer-events-none {
  pointer-events: none;
}
.ci\:invisible {
  visibility: hidden;
}
.ci\:absolute {
  position: absolute;
}
.ci\:relative {
  position: relative;
}
.ci\:inset-0 {
  inset: 0px;
}
.ci\:inset-x-0 {
  inset-inline: 0px;
}
.ci\:inset-y-0 {
  inset-block: 0px;
}
.ci\:-top-px {
  top: -1px;
}
.ci\:top-0 {
  top: 0px;
}
.ci\:top-1 {
  top: var(--ci-spacing);
}
.ci\:-right-1\.5 {
  right: calc(var(--ci-spacing) * -1.5);
}
.ci\:right-2 {
  right: calc(var(--ci-spacing) * 2);
}
.ci\:right-\[-11px\] {
  right: -11px;
}
.ci\:-bottom-px {
  bottom: -1px;
}
.ci\:-left-0 {
  left: 0px;
}
.ci\:-left-1\.5 {
  left: calc(var(--ci-spacing) * -1.5);
}
.ci\:-left-6 {
  left: calc(var(--ci-spacing) * -6);
}
.ci\:left-0 {
  left: 0px;
}
.ci\:left-\[-10\.5px\] {
  left: -10.5px;
}
.ci\:z-1 {
  z-index: 1;
}
.ci\:z-10 {
  z-index: 10;
}
.ci\:z-50 {
  z-index: 50;
}
.ci\:z-500 {
  z-index: 500;
}
.ci\:z-\[100\] {
  z-index: 100;
}
.ci\:m-0 {
  margin: 0px;
}
.ci\:-mx-1 {
  margin-inline: calc(var(--ci-spacing) * -1);
}
.ci\:mx-1 {
  margin-inline: var(--ci-spacing);
}
.ci\:mx-1\.5 {
  margin-inline: calc(var(--ci-spacing) * 1.5);
}
.ci\:mx-2 {
  margin-inline: calc(var(--ci-spacing) * 2);
}
.ci\:my-1 {
  margin-block: var(--ci-spacing);
}
.ci\:my-3 {
  margin-block: calc(var(--ci-spacing) * 3);
}
.ci\:my-4 {
  margin-block: calc(var(--ci-spacing) * 4);
}
.ci\:my-auto {
  margin-block: auto;
}
.ci\:mt-1\.5 {
  margin-top: calc(var(--ci-spacing) * 1.5);
}
.ci\:mt-2 {
  margin-top: calc(var(--ci-spacing) * 2);
}
.ci\:mt-\[0\.75em\] {
  margin-top: 0.75em;
}
.ci\:mt-\[1\.4em\] {
  margin-top: 1.4em;
}
.ci\:mt-\[1\.6em\] {
  margin-top: 1.6em;
}
.ci\:mt-\[1em\] {
  margin-top: 1em;
}
.ci\:mr-1 {
  margin-right: var(--ci-spacing);
}
.ci\:mr-1\.5 {
  margin-right: calc(var(--ci-spacing) * 1.5);
}
.ci\:mr-2 {
  margin-right: calc(var(--ci-spacing) * 2);
}
.ci\:mb-1 {
  margin-bottom: var(--ci-spacing);
}
.ci\:mb-2 {
  margin-bottom: calc(var(--ci-spacing) * 2);
}
.ci\:scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
.ci\:block {
  display: block;
}
.ci\:flex {
  display: flex;
}
.ci\:flow-root {
  display: flow-root;
}
.ci\:grid {
  display: grid;
}
.ci\:hidden {
  display: none;
}
.ci\:inline-block {
  display: inline-block;
}
.ci\:inline-flex {
  display: inline-flex;
}
.ci\:size-2\.5 {
  width: calc(var(--ci-spacing) * 2.5);
  height: calc(var(--ci-spacing) * 2.5);
}
.ci\:size-3\.5 {
  width: calc(var(--ci-spacing) * 3.5);
  height: calc(var(--ci-spacing) * 3.5);
}
.ci\:size-4 {
  width: calc(var(--ci-spacing) * 4);
  height: calc(var(--ci-spacing) * 4);
}
.ci\:size-6 {
  width: calc(var(--ci-spacing) * 6);
  height: calc(var(--ci-spacing) * 6);
}
.ci\:size-8 {
  width: calc(var(--ci-spacing) * 8);
  height: calc(var(--ci-spacing) * 8);
}
.ci\:size-9 {
  width: calc(var(--ci-spacing) * 9);
  height: calc(var(--ci-spacing) * 9);
}
.ci\:size-10 {
  width: calc(var(--ci-spacing) * 10);
  height: calc(var(--ci-spacing) * 10);
}
.ci\:size-full {
  width: 100%;
  height: 100%;
}
.ci\:h-0\.5 {
  height: calc(var(--ci-spacing) * 0.5);
}
.ci\:h-4 {
  height: calc(var(--ci-spacing) * 4);
}
.ci\:h-6 {
  height: calc(var(--ci-spacing) * 6);
}
.ci\:h-7 {
  height: calc(var(--ci-spacing) * 7);
}
.ci\:h-8 {
  height: calc(var(--ci-spacing) * 8);
}
.ci\:h-9 {
  height: calc(var(--ci-spacing) * 9);
}
.ci\:h-10 {
  height: calc(var(--ci-spacing) * 10);
}
.ci\:h-\[1\.5em\] {
  height: 1.5em;
}
.ci\:h-\[19px\] {
  height: 19px;
}
.ci\:h-\[28px\] {
  height: 28px;
}
.ci\:h-\[650px\] {
  height: 650px;
}
.ci\:h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.ci\:h-full {
  height: 100%;
}
.ci\:h-px {
  height: 1px;
}
.ci\:max-h-\(--radix-select-content-available-height\) {
  max-height: var(--radix-select-content-available-height);
}
.ci\:max-h-\[50vh\] {
  max-height: 50vh;
}
.ci\:max-h-\[288px\] {
  max-height: 288px;
}
.ci\:max-h-\[min\(70vh\,320px\)\] {
  max-height: min(70vh, 320px);
}
.ci\:max-h-full {
  max-height: 100%;
}
.ci\:min-h-0 {
  min-height: 0px;
}
.ci\:min-h-\[1lh\] {
  min-height: 1lh;
}
.ci\:w-1 {
  width: var(--ci-spacing);
}
.ci\:w-4 {
  width: calc(var(--ci-spacing) * 4);
}
.ci\:w-4\.5 {
  width: calc(var(--ci-spacing) * 4.5);
}
.ci\:w-6 {
  width: calc(var(--ci-spacing) * 6);
}
.ci\:w-8 {
  width: calc(var(--ci-spacing) * 8);
}
.ci\:w-72 {
  width: calc(var(--ci-spacing) * 72);
}
.ci\:w-\[300px\] {
  width: 300px;
}
.ci\:w-auto {
  width: auto;
}
.ci\:w-fit {
  width: fit-content;
}
.ci\:w-full {
  width: 100%;
}
.ci\:w-px {
  width: 1px;
}
.ci\:max-w-\[80vw\] {
  max-width: 80vw;
}
.ci\:max-w-full {
  max-width: 100%;
}
.ci\:min-w-0 {
  min-width: 0px;
}
.ci\:min-w-8 {
  min-width: calc(var(--ci-spacing) * 8);
}
.ci\:min-w-9 {
  min-width: calc(var(--ci-spacing) * 9);
}
.ci\:min-w-10 {
  min-width: calc(var(--ci-spacing) * 10);
}
.ci\:min-w-\[8rem\] {
  min-width: 8rem;
}
.ci\:min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.ci\:flex-1 {
  flex: 1;
}
.ci\:shrink-0 {
  flex-shrink: 0;
}
.ci\:grow {
  flex-grow: 1;
}
.ci\:origin-\(--radix-popover-content-transform-origin\) {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.ci\:origin-\(--radix-select-content-transform-origin\) {
  transform-origin: var(--radix-select-content-transform-origin);
}
.ci\:origin-\(--radix-tooltip-content-transform-origin\) {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.ci\:-translate-x-full {
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:rotate-45 {
  rotate: 45deg;
}
.ci\:cursor-default {
  cursor: default;
}
.ci\:cursor-not-allowed {
  cursor: not-allowed;
}
.ci\:cursor-pointer {
  cursor: pointer;
}
.ci\:cursor-text {
  cursor: text;
}
.ci\:resize-none {
  resize: none;
}
.ci\:scroll-my-1 {
  scroll-margin-block: var(--ci-spacing);
}
.ci\:list-none {
  list-style-type: none;
}
.ci\:flex-col {
  flex-direction: column;
}
.ci\:flex-col-reverse {
  flex-direction: column-reverse;
}
.ci\:flex-wrap {
  flex-wrap: wrap;
}
.ci\:place-content-center {
  place-content: center;
}
.ci\:items-center {
  align-items: center;
}
.ci\:items-stretch {
  align-items: stretch;
}
.ci\:justify-between {
  justify-content: space-between;
}
.ci\:justify-center {
  justify-content: center;
}
.ci\:justify-end {
  justify-content: flex-end;
}
.ci\:gap-0 {
  gap: 0px;
}
.ci\:gap-1 {
  gap: var(--ci-spacing);
}
.ci\:gap-1\.5 {
  gap: calc(var(--ci-spacing) * 1.5);
}
.ci\:gap-2 {
  gap: calc(var(--ci-spacing) * 2);
}
.ci\:overflow-auto {
  overflow: auto;
}
.ci\:overflow-hidden {
  overflow: hidden;
}
.ci\:overflow-x-auto {
  overflow-x: auto;
}
.ci\:overflow-x-hidden {
  overflow-x: hidden;
}
.ci\:overflow-y-auto {
  overflow-y: auto;
}
.ci\:rounded {
  border-radius: var(--ci-radius);
}
.ci\:rounded-\[2px\] {
  border-radius: 2px;
}
.ci\:rounded-\[4px\] {
  border-radius: 4px;
}
.ci\:rounded-md {
  border-radius: var(--ci-radius-md);
}
.ci\:rounded-none {
  border-radius: 0;
}
.ci\:rounded-sm {
  border-radius: var(--ci-radius-sm);
}
.ci\:rounded-r-md {
  border-top-right-radius: var(--ci-radius-md);
  border-bottom-right-radius: var(--ci-radius-md);
}
.ci\:rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ci\:border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.ci\:border-0 {
  border-style: var(--tw-border-style);
  border-width: 0px;
}
.ci\:border-\[1\.5px\] {
  border-style: var(--tw-border-style);
  border-width: 1.5px;
}
.ci\:border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.ci\:border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.ci\:border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.ci\:border-l-0 {
  border-left-style: var(--tw-border-style);
  border-left-width: 0px;
}
.ci\:border-l-2 {
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
}
.ci\:border-none {
  --tw-border-style: none;
  border-style: none;
}
.ci\:border-border {
  border-color: var(--ci-color-border);
}
.ci\:border-input {
  border-color: var(--ci-color-input);
}
.ci\:border-slate-200\/80 {
  border-color: var(--ci-color-slate-200);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--ci-color-slate-200) 80%, transparent);
  }
}
.ci\:border-transparent {
  border-color: transparent;
}
.ci\:bg-background {
  background-color: var(--ci-color-background);
}
.ci\:bg-border {
  background-color: var(--ci-color-border);
}
.ci\:bg-brand\/50 {
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 50%, transparent);
  }
}
.ci\:bg-brand\/\[\.13\] {
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 13%, transparent);
  }
}
.ci\:bg-destructive {
  background-color: var(--ci-color-destructive);
}
.ci\:bg-foreground {
  background-color: var(--ci-color-foreground);
}
.ci\:bg-highlight\/30 {
  background-color: var(--highlight);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--highlight) 30%, transparent);
  }
}
.ci\:bg-muted {
  background-color: var(--ci-color-muted);
}
.ci\:bg-muted\/30 {
  background-color: var(--ci-color-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-muted) 30%, transparent);
  }
}
.ci\:bg-muted\/50 {
  background-color: var(--ci-color-muted);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-muted) 50%, transparent);
  }
}
.ci\:bg-popover {
  background-color: var(--ci-color-popover);
}
.ci\:bg-primary {
  background-color: var(--ci-color-primary);
}
.ci\:bg-secondary {
  background-color: var(--ci-color-secondary);
}
.ci\:bg-transparent {
  background-color: transparent;
}
.ci\:bg-clip-content {
  background-clip: content-box;
}
.ci\:fill-foreground {
  fill: var(--ci-color-foreground);
}
.ci\:object-contain {
  object-fit: contain;
}
.ci\:p-0 {
  padding: 0px;
}
.ci\:p-1 {
  padding: var(--ci-spacing);
}
.ci\:p-1\.5 {
  padding: calc(var(--ci-spacing) * 1.5);
}
.ci\:p-2 {
  padding: calc(var(--ci-spacing) * 2);
}
.ci\:p-3 {
  padding: calc(var(--ci-spacing) * 3);
}
.ci\:p-4 {
  padding: calc(var(--ci-spacing) * 4);
}
.ci\:p-8 {
  padding: calc(var(--ci-spacing) * 8);
}
.ci\:px-0 {
  padding-inline: 0px;
}
.ci\:px-1 {
  padding-inline: var(--ci-spacing);
}
.ci\:px-1\.5 {
  padding-inline: calc(var(--ci-spacing) * 1.5);
}
.ci\:px-2 {
  padding-inline: calc(var(--ci-spacing) * 2);
}
.ci\:px-2\.5 {
  padding-inline: calc(var(--ci-spacing) * 2.5);
}
.ci\:px-3 {
  padding-inline: calc(var(--ci-spacing) * 3);
}
.ci\:px-4 {
  padding-inline: calc(var(--ci-spacing) * 4);
}
.ci\:px-6 {
  padding-inline: calc(var(--ci-spacing) * 6);
}
.ci\:px-12 {
  padding-inline: calc(var(--ci-spacing) * 12);
}
.ci\:px-16 {
  padding-inline: calc(var(--ci-spacing) * 16);
}
.ci\:px-\[0\.3em\] {
  padding-inline: 0.3em;
}
.ci\:py-0\.5 {
  padding-block: calc(var(--ci-spacing) * 0.5);
}
.ci\:py-1 {
  padding-block: var(--ci-spacing);
}
.ci\:py-1\.5 {
  padding-block: calc(var(--ci-spacing) * 1.5);
}
.ci\:py-2 {
  padding-block: calc(var(--ci-spacing) * 2);
}
.ci\:py-6 {
  padding-block: calc(var(--ci-spacing) * 6);
}
.ci\:py-\[0\.2em\] {
  padding-block: 0.2em;
}
.ci\:py-\[1\.5px\] {
  padding-block: 1.5px;
}
.ci\:pt-2 {
  padding-top: calc(var(--ci-spacing) * 2);
}
.ci\:pt-4 {
  padding-top: calc(var(--ci-spacing) * 4);
}
.ci\:pr-1 {
  padding-right: var(--ci-spacing);
}
.ci\:pr-4 {
  padding-right: calc(var(--ci-spacing) * 4);
}
.ci\:pr-8 {
  padding-right: calc(var(--ci-spacing) * 8);
}
.ci\:pr-9 {
  padding-right: calc(var(--ci-spacing) * 9);
}
.ci\:pb-1 {
  padding-bottom: var(--ci-spacing);
}
.ci\:pb-40 {
  padding-bottom: calc(var(--ci-spacing) * 40);
}
.ci\:pb-72 {
  padding-bottom: calc(var(--ci-spacing) * 72);
}
.ci\:pb-px {
  padding-bottom: 1px;
}
.ci\:pl-2 {
  padding-left: calc(var(--ci-spacing) * 2);
}
.ci\:pl-6 {
  padding-left: calc(var(--ci-spacing) * 6);
}
.ci\:align-text-bottom {
  vertical-align: text-bottom;
}
.ci\:font-mono {
  font-family: var(--ci-font-mono);
}
.ci\:text-2xl {
  font-size: var(--ci-text-2xl);
  line-height: var(--tw-leading, var(--ci-text-2xl--line-height));
}
.ci\:text-4xl {
  font-size: var(--ci-text-4xl);
  line-height: var(--tw-leading, var(--ci-text-4xl--line-height));
}
.ci\:text-base {
  font-size: var(--ci-text-base);
  line-height: var(--tw-leading, var(--ci-text-base--line-height));
}
.ci\:text-lg {
  font-size: var(--ci-text-lg);
  line-height: var(--tw-leading, var(--ci-text-lg--line-height));
}
.ci\:text-sm {
  font-size: var(--ci-text-sm);
  line-height: var(--tw-leading, var(--ci-text-sm--line-height));
}
.ci\:text-xl {
  font-size: var(--ci-text-xl);
  line-height: var(--tw-leading, var(--ci-text-xl--line-height));
}
.ci\:text-xs {
  font-size: var(--ci-text-xs);
  line-height: var(--tw-leading, var(--ci-text-xs--line-height));
}
.ci\:leading-\[normal\] {
  --tw-leading: normal;
  line-height: normal;
}
.ci\:leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.ci\:font-bold {
  --tw-font-weight: var(--ci-font-weight-bold);
  font-weight: var(--ci-font-weight-bold);
}
.ci\:font-medium {
  --tw-font-weight: var(--ci-font-weight-medium);
  font-weight: var(--ci-font-weight-medium);
}
.ci\:font-semibold {
  --tw-font-weight: var(--ci-font-weight-semibold);
  font-weight: var(--ci-font-weight-semibold);
}
.ci\:tracking-tight {
  --tw-tracking: var(--ci-tracking-tight);
  letter-spacing: var(--ci-tracking-tight);
}
.ci\:text-balance {
  text-wrap: balance;
}
.ci\:text-nowrap {
  text-wrap: nowrap;
}
.ci\:break-words {
  overflow-wrap: break-word;
}
.ci\:whitespace-break-spaces {
  white-space: break-spaces;
}
.ci\:whitespace-nowrap {
  white-space: nowrap;
}
.ci\:whitespace-pre-wrap {
  white-space: pre-wrap;
}
.ci\:text-background {
  color: var(--ci-color-background);
}
.ci\:text-current {
  color: currentcolor;
}
.ci\:text-foreground {
  color: var(--ci-color-foreground);
}
.ci\:text-inherit {
  color: inherit;
}
.ci\:text-muted-foreground {
  color: var(--ci-color-muted-foreground);
}
.ci\:text-muted-foreground\/80 {
  color: var(--ci-color-muted-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--ci-color-muted-foreground) 80%, transparent);
  }
}
.ci\:text-popover-foreground {
  color: var(--ci-color-popover-foreground);
}
.ci\:text-primary {
  color: var(--ci-color-primary);
}
.ci\:text-primary-foreground {
  color: var(--ci-color-primary-foreground);
}
.ci\:text-secondary-foreground {
  color: var(--ci-color-secondary-foreground);
}
.ci\:text-white {
  color: var(--ci-color-white);
}
.ci\:italic {
  font-style: italic;
}
.ci\:line-through {
  text-decoration-line: line-through;
}
.ci\:underline {
  text-decoration-line: underline;
}
.ci\:underline-offset-4 {
  text-underline-offset: 4px;
}
.ci\:caret-primary {
  caret-color: var(--ci-color-primary);
}
.ci\:opacity-0 {
  opacity: 0%;
}
.ci\:opacity-50 {
  opacity: 50%;
}
.ci\:opacity-100 {
  opacity: 100%;
}
.ci\:shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:shadow-xs {
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(248\,_249\,_250\)_0px_1px_5px_0px_inset\,_rgb\(193\,_200\,_205\)_0px_0px_0px_0\.5px\,_rgb\(193\,_200\,_205\)_0px_2px_1px_-1px\,_rgb\(193\,_200\,_205\)_0px_1px_0px_0px\] {
  --tw-shadow-color: rgba(255, 255, 255, 0.1);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset, rgb(248, 249, 250) 0px 1px 5px 0px inset, rgb(193, 200, 205) 0px 0px 0px 0.5px, rgb(193, 200, 205) 0px 2px 1px -1px, rgb(193, 200, 205) 0px 1px 0px 0px var(--tw-shadow-alpha), transparent);
  }
}
.ci\:ring-ring {
  --tw-ring-color: var(--ci-color-ring);
}
.ci\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.ci\:ring-offset-background {
  --tw-ring-offset-color: var(--ci-color-background);
}
.ci\:outline-hidden {
  --tw-outline-style: none;
  outline-style: none;
  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}
.ci\:transition-\[color\,box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: var(--tw-ease, var(--ci-default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--ci-default-transition-duration));
}
.ci\:transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--ci-default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--ci-default-transition-duration));
}
.ci\:transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--ci-default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--ci-default-transition-duration));
}
.ci\:transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--ci-default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--ci-default-transition-duration));
}
.ci\:transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--ci-default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--ci-default-transition-duration));
}
.ci\:transition-none {
  transition-property: none;
}
.ci\:outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.ci\:select-none {
  -webkit-user-select: none;
  user-select: none;
}
.ci\:select-text {
  -webkit-user-select: text;
  user-select: text;
}
.ci\:not-last\:border-b:not(:last-child) {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.ci\:group-first\/column\:-left-1:is(:where(.ci\:group\/column):first-child *) {
  left: calc(var(--ci-spacing) * -1);
}
.ci\:group-first\/column\:pl-0:is(:where(.ci\:group\/column):first-child *) {
  padding-left: 0px;
}
.ci\:group-last\/column\:-right-1:is(:where(.ci\:group\/column):last-child *) {
  right: calc(var(--ci-spacing) * -1);
}
.ci\:group-last\/column\:pr-0:is(:where(.ci\:group\/column):last-child *) {
  padding-right: 0px;
}
.ci\:group-last\/toolbar-group\:hidden\!:is(:where(.ci\:group\/toolbar-group):last-child *) {
  display: none !important;
}
@media (hover: hover) {
  .ci\:group-hover\:opacity-100:is(:where(.ci\:group):hover *) {
    opacity: 100%;
  }
  .ci\:group-hover\/container\:opacity-100:is(:where(.ci\:group\/container):hover *) {
    opacity: 100%;
  }
}
.ci\:group-data-\[pressed\=true\]\:bg-accent:is(:where(.ci\:group)[data-pressed="true"] *) {
  background-color: var(--ci-color-accent);
}
.ci\:group-data-\[pressed\=true\]\:text-accent-foreground:is(:where(.ci\:group)[data-pressed="true"] *) {
  color: var(--ci-color-accent-foreground);
}
.ci\:selection\:bg-brand\/25 ::selection {
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 25%, transparent);
  }
}
.ci\:selection\:bg-brand\/25::selection {
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 25%, transparent);
  }
}
.ci\:placeholder\:text-muted-foreground\/80::placeholder {
  color: var(--ci-color-muted-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--ci-color-muted-foreground) 80%, transparent);
  }
}
.ci\:before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.ci\:before\:cursor-text::before {
  content: var(--tw-content);
  cursor: text;
}
.ci\:before\:text-muted-foreground\/80::before {
  content: var(--tw-content);
  color: var(--ci-color-muted-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--ci-color-muted-foreground) 80%, transparent);
  }
}
.ci\:before\:content-\[attr\(placeholder\)\]::before {
  --tw-content: attr(placeholder);
  content: var(--tw-content);
}
.ci\:after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.ci\:after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.ci\:after\:-top-0\.5::after {
  content: var(--tw-content);
  top: calc(var(--ci-spacing) * -0.5);
}
.ci\:after\:-left-1::after {
  content: var(--tw-content);
  left: calc(var(--ci-spacing) * -1);
}
.ci\:after\:z-1::after {
  content: var(--tw-content);
  z-index: 1;
}
.ci\:after\:h-\[calc\(100\%\)\+4px\]::after {
  content: var(--tw-content);
  height: calc(100%)+4px;
}
.ci\:after\:w-\[calc\(100\%\+8px\)\]::after {
  content: var(--tw-content);
  width: calc(100% + 8px);
}
.ci\:after\:rounded-sm::after {
  content: var(--tw-content);
  border-radius: var(--ci-radius-sm);
}
.ci\:after\:bg-brand\/15::after {
  content: var(--tw-content);
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 15%, transparent);
  }
}
.ci\:after\:bg-neutral-500\/10::after {
  content: var(--tw-content);
  background-color: var(--ci-color-neutral-500);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-neutral-500) 10%, transparent);
  }
}
.ci\:first\:border-l-0:first-child {
  border-left-style: var(--tw-border-style);
  border-left-width: 0px;
}
.ci\:focus-within\:ring-2:focus-within {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:focus-within\:ring-ring:focus-within {
  --tw-ring-color: var(--ci-color-ring);
}
.ci\:focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
@media (hover: hover) {
  .ci\:hover\:bg-accent:hover {
    background-color: var(--ci-color-accent);
  }
  .ci\:hover\:bg-destructive\/90:hover {
    background-color: var(--ci-color-destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:hover\:bg-destructive\/90:hover {
      background-color: color-mix(in oklab, var(--ci-color-destructive) 90%, transparent);
    }
  }
  .ci\:hover\:bg-muted:hover {
    background-color: var(--ci-color-muted);
  }
  .ci\:hover\:bg-primary\/10:hover {
    background-color: var(--ci-color-primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:hover\:bg-primary\/10:hover {
      background-color: color-mix(in oklab, var(--ci-color-primary) 10%, transparent);
    }
  }
  .ci\:hover\:bg-primary\/90:hover {
    background-color: var(--ci-color-primary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:hover\:bg-primary\/90:hover {
      background-color: color-mix(in oklab, var(--ci-color-primary) 90%, transparent);
    }
  }
  .ci\:hover\:bg-secondary\/80:hover {
    background-color: var(--ci-color-secondary);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:hover\:bg-secondary\/80:hover {
      background-color: color-mix(in oklab, var(--ci-color-secondary) 80%, transparent);
    }
  }
  .ci\:hover\:bg-transparent:hover {
    background-color: transparent;
  }
  .ci\:hover\:bg-zinc-200:hover {
    background-color: var(--ci-color-zinc-200);
  }
  .ci\:hover\:text-accent-foreground:hover {
    color: var(--ci-color-accent-foreground);
  }
  .ci\:hover\:text-muted-foreground:hover {
    color: var(--ci-color-muted-foreground);
  }
  .ci\:hover\:underline:hover {
    text-decoration-line: underline;
  }
  .ci\:hover\:opacity-100:hover {
    opacity: 100%;
  }
}
.ci\:focus\:bg-accent:focus {
  background-color: var(--ci-color-accent);
}
.ci\:focus\:text-accent-foreground:focus {
  color: var(--ci-color-accent-foreground);
}
.ci\:focus-visible\:border-ring:focus-visible {
  border-color: var(--ci-color-ring);
}
.ci\:focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: var(--ci-color-destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-destructive) 20%, transparent);
  }
}
.ci\:focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: var(--ci-color-ring);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-ring) 50%, transparent);
  }
}
.ci\:focus-visible\:outline-none:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
}
.ci\:disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.ci\:disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.ci\:disabled\:opacity-50:disabled {
  opacity: 50%;
}
:where([data-inline-suggestion="insert"]) .ci\:in-data-\[inline-suggestion\=insert\]\:bg-emerald-100\! {
  background-color: var(--ci-color-emerald-100) !important;
}
:where([data-inline-suggestion="insert"]) .ci\:in-data-\[inline-suggestion\=insert\]\:text-emerald-700\! {
  color: var(--ci-color-emerald-700) !important;
}
:where([data-inline-suggestion="remove"]) .ci\:in-data-\[inline-suggestion\=remove\]\:bg-red-100\! {
  background-color: var(--ci-color-red-100) !important;
}
:where([data-inline-suggestion="remove"]) .ci\:in-data-\[inline-suggestion\=remove\]\:text-red-700\! {
  color: var(--ci-color-red-700) !important;
}
.ci\:has-aria-disabled\:border-input:has([aria-disabled="true"]) {
  border-color: var(--ci-color-input);
}
.ci\:has-aria-disabled\:bg-muted:has([aria-disabled="true"]) {
  background-color: var(--ci-color-muted);
}
.ci\:has-data-readonly\:w-fit:has([data-readonly]) {
  width: fit-content;
}
.ci\:has-data-readonly\:cursor-default:has([data-readonly]) {
  cursor: default;
}
.ci\:has-data-readonly\:border-transparent:has([data-readonly]) {
  border-color: transparent;
}
.ci\:has-data-readonly\:focus-within\:\[box-shadow\:none\]:has([data-readonly]):focus-within {
  box-shadow: none;
}
.ci\:has-\[\[data-slate-editor\]\:focus\]\:border-brand\/50:has(:is([data-slate-editor]:focus)) {
  border-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--ci-color-brand) 50%, transparent);
  }
}
.ci\:has-\[\[data-slate-editor\]\:focus\]\:ring-2:has(:is([data-slate-editor]:focus)) {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ci\:has-\[\[data-slate-editor\]\:focus\]\:ring-brand\/30:has(:is([data-slate-editor]:focus)) {
  --tw-ring-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-brand) 30%, transparent);
  }
}
.ci\:has-\[button\]\:flex:has(:is(button)) {
  display: flex;
}
.ci\:has-\[\>svg\]\:px-1\.5:has( > svg) {
  padding-inline: calc(var(--ci-spacing) * 1.5);
}
.ci\:has-\[\>svg\]\:px-2\.5:has( > svg) {
  padding-inline: calc(var(--ci-spacing) * 2.5);
}
.ci\:has-\[\>svg\]\:px-3:has( > svg) {
  padding-inline: calc(var(--ci-spacing) * 3);
}
.ci\:has-\[\>svg\]\:px-4:has( > svg) {
  padding-inline: calc(var(--ci-spacing) * 4);
}
.ci\:aria-checked\:bg-accent[aria-checked="true"] {
  background-color: var(--ci-color-accent);
}
.ci\:aria-checked\:text-accent-foreground[aria-checked="true"] {
  color: var(--ci-color-accent-foreground);
}
.ci\:aria-invalid\:border-destructive[aria-invalid="true"] {
  border-color: var(--ci-color-destructive);
}
.ci\:aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
  --tw-ring-color: var(--ci-color-destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-destructive) 20%, transparent);
  }
}
.ci\:data-readonly\:w-fit[data-readonly] {
  width: fit-content;
}
:is(.ci\:\*\*\:data-slate-placeholder\:top-1\/2\! *)[data-slate-placeholder] {
  top: calc(1 / 2 * 100%) !important;
}
:is(.ci\:\*\*\:data-slate-placeholder\:-translate-y-1\/2 *)[data-slate-placeholder] {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
:is(.ci\:\*\*\:data-slate-placeholder\:text-muted-foreground\/80 *)[data-slate-placeholder] {
  color: var(--ci-color-muted-foreground);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--ci-color-muted-foreground) 80%, transparent);
  }
}
:is(.ci\:\*\*\:data-slate-placeholder\:opacity-100\! *)[data-slate-placeholder] {
  opacity: 100% !important;
}
.ci\:data-\[active-item\=true\]\:bg-accent[data-active-item="true"] {
  background-color: var(--ci-color-accent);
}
.ci\:data-\[active-item\=true\]\:text-accent-foreground[data-active-item="true"] {
  color: var(--ci-color-accent-foreground);
}
.ci\:data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.ci\:data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 50%;
}
.ci\:data-\[inline-suggestion\=insert\]\:bg-emerald-100\![data-inline-suggestion="insert"] {
  background-color: var(--ci-color-emerald-100) !important;
}
.ci\:data-\[inline-suggestion\=insert\]\:text-emerald-700\![data-inline-suggestion="insert"] {
  color: var(--ci-color-emerald-700) !important;
}
.ci\:data-\[inline-suggestion\=remove\]\:bg-red-100\![data-inline-suggestion="remove"] {
  background-color: var(--ci-color-red-100) !important;
}
.ci\:data-\[inline-suggestion\=remove\]\:text-red-700\![data-inline-suggestion="remove"] {
  color: var(--ci-color-red-700) !important;
}
.ci\:data-\[nav-target\=true\]\:rounded-md[data-nav-target="true"] {
  border-radius: var(--ci-radius-md);
}
.ci\:data-\[nav-target\=true\]\:bg-\(--color-highlight\)[data-nav-target="true"] {
  background-color: var(--color-highlight);
}
.ci\:data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.ci\:data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.ci\:data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.ci\:data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.ci\:data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: var(--ci-color-muted-foreground);
}
.ci\:data-\[selected\=true\]\:bg-primary\/10[data-selected="true"] {
  background-color: var(--ci-color-primary);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-primary) 10%, transparent);
  }
}
.ci\:data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: var(--ci-spacing);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: calc(var(--ci-spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: var(--ci-spacing);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: calc(var(--ci-spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.ci\:data-\[size\=default\]\:h-9[data-size="default"] {
  height: calc(var(--ci-spacing) * 9);
}
.ci\:data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: calc(var(--ci-spacing) * 8);
}
:is(.ci\:\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
:is(.ci\:\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
  display: flex;
}
:is(.ci\:\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
  align-items: center;
}
:is(.ci\:\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
  gap: calc(var(--ci-spacing) * 2);
}
.ci\:data-\[state\=checked\]\:border-primary[data-state="checked"] {
  border-color: var(--ci-color-primary);
}
.ci\:data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: var(--ci-color-primary);
}
.ci\:data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: var(--ci-color-primary-foreground);
}
@media (width >= 40rem) {
  .ci\:sm\:px-12 {
    padding-inline: calc(var(--ci-spacing) * 12);
  }
  .ci\:sm\:px-24 {
    padding-inline: calc(var(--ci-spacing) * 24);
  }
  .ci\:sm\:px-\[max\(64px\,calc\(50\%-350px\)\)\] {
    padding-inline: max(64px, calc(50% - 350px));
  }
  .ci\:sm\:opacity-0 {
    opacity: 0%;
  }
}
@media (width >= 48rem) {
  .ci\:md\:flex-row {
    flex-direction: row;
  }
  .ci\:md\:text-sm {
    font-size: var(--ci-text-sm);
    line-height: var(--tw-leading, var(--ci-text-sm--line-height));
  }
}
.ci\:dark\:border-input:is(.dark *) {
  border-color: var(--ci-color-input);
}
.ci\:dark\:bg-destructive\/60:is(.dark *) {
  background-color: var(--ci-color-destructive);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-destructive) 60%, transparent);
  }
}
.ci\:dark\:bg-input\/30:is(.dark *) {
  background-color: var(--ci-color-input);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-input) 30%, transparent);
  }
}
.ci\:dark\:shadow-\[rgba\(255\,_255\,_255\,_0\.1\)_0px_0\.5px_0px_0px_inset\,_rgb\(26\,_29\,_30\)_0px_1px_5px_0px_inset\,_rgb\(76\,_81\,_85\)_0px_0px_0px_0\.5px\,_rgb\(76\,_81\,_85\)_0px_2px_1px_-1px\,_rgb\(76\,_81\,_85\)_0px_1px_0px_0px\]:is(.dark *) {
  --tw-shadow-color: rgba(255, 255, 255, 0.1);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset, rgb(26, 29, 30) 0px 1px 5px 0px inset, rgb(76, 81, 85) 0px 0px 0px 0.5px, rgb(76, 81, 85) 0px 2px 1px -1px, rgb(76, 81, 85) 0px 1px 0px 0px var(--tw-shadow-alpha), transparent);
  }
}
@media (hover: hover) {
  .ci\:dark\:hover\:bg-accent\/50:is(.dark *):hover {
    background-color: var(--ci-color-accent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:dark\:hover\:bg-accent\/50:is(.dark *):hover {
      background-color: color-mix(in oklab, var(--ci-color-accent) 50%, transparent);
    }
  }
  .ci\:dark\:hover\:bg-input\/50:is(.dark *):hover {
    background-color: var(--ci-color-input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ci\:dark\:hover\:bg-input\/50:is(.dark *):hover {
      background-color: color-mix(in oklab, var(--ci-color-input) 50%, transparent);
    }
  }
}
.ci\:dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
  --tw-ring-color: var(--ci-color-destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-destructive) 40%, transparent);
  }
}
.ci\:dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
  --tw-ring-color: var(--ci-color-destructive);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--ci-color-destructive) 40%, transparent);
  }
}
.ci\:dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
  background-color: var(--ci-color-primary);
}
@media print {
  .ci\:print\:hidden {
    display: none;
  }
  .ci\:print\:break-inside-avoid {
    break-inside: avoid;
  }
}
.ci\:\[\&_\.katex-display\]\:my-0\! .katex-display {
  margin-block: 0px !important;
}
.ci\:\[\&_\.slate-selection-area\]\:z-50 .slate-selection-area {
  z-index: 50;
}
.ci\:\[\&_\.slate-selection-area\]\:border .slate-selection-area {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.ci\:\[\&_\.slate-selection-area\]\:border-brand\/25 .slate-selection-area {
  border-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--ci-color-brand) 25%, transparent);
  }
}
.ci\:\[\&_\.slate-selection-area\]\:bg-brand\/15 .slate-selection-area {
  background-color: var(--ci-color-brand);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--ci-color-brand) 15%, transparent);
  }
}
.ci\:\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.ci\:\[\&_svg\]\:size-4 svg {
  width: calc(var(--ci-spacing) * 4);
  height: calc(var(--ci-spacing) * 4);
}
.ci\:\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.ci\:\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-3 svg:not([class*=size-]) {
  width: calc(var(--ci-spacing) * 3);
  height: calc(var(--ci-spacing) * 3);
}
.ci\:\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-4 svg:not([class*=size-]) {
  width: calc(var(--ci-spacing) * 4);
  height: calc(var(--ci-spacing) * 4);
}
.ci\:\[\&_svg\:not\(\[class\*\=text-\]\)\]\:text-muted-foreground svg:not([class*=text-]) {
  color: var(--ci-color-muted-foreground);
}
.ci\:\[\&\:has\(\[role\=option\]\)\]\:block:has([role=option]) {
  display: block;
}
:is(.ci\:\*\:\[span\]\:last\:flex > *):is(span):last-child {
  display: flex;
}
:is(.ci\:\*\:\[span\]\:last\:items-center > *):is(span):last-child {
  align-items: center;
}
:is(.ci\:\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
  gap: calc(var(--ci-spacing) * 2);
}
:root {
  --highlight: oklch(0.852 0.199 91.936);
}
.dark {
  --highlight: oklch(0.852 0.199 91.936);
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-content: "";
    }
  }
}


/* /@fs//home/coder/control-poc/src/features/act/reduction-plan/screens/reduction-plan-screen.css */
.actions-toolbar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.actions-toolbar__tabs button {
  padding: 6px 8px;
  border: 1px solid oklch(var(--input));
  border-radius: 8px;
  background: white;
  color: oklch(var(--muted));
  font-size: 11px;
  cursor: pointer;
}
.actions-toolbar__tabs button[aria-pressed='true'] {
  background: oklch(var(--primary));
  color: white;
}
.actions-toolbar__tabs span {
  margin-left: 4px;
  opacity: 0.7;
}
.actions-toolbar button.btn-action {
  background: oklch(var(--action));
  color: white;
  padding: 7px 12px;
  border-radius: 999px;
}
.actions-toolbar button.btn-outline {
  background: white;
  border: 1px solid oklch(var(--primary));
  color: oklch(var(--primary));
  padding: 7px 12px;
  border-radius: 999px;
}
.actions-table-detail__panel {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.actions-table-detail__empty {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--muted));
  font-size: 12px;
  text-align: center;
}
.actions-advanced summary {
  color: oklch(var(--muted));
  font-size: 12px;
  cursor: pointer;
}
.actions-advanced > *:not(summary) {
  margin-top: 10px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/sent-quotes.css */
/* What a question was asked about, above the person's own words. Right-aligned with the bubble
   it belongs to, quiet enough that the question is still what the eye lands on. */
.ci-sent-quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  margin: 0 0 5px;
  padding: 0;
  max-width: 76%;
  list-style: none;
}

.ci-sent-quote {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  max-width: 320px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 7px;
  color: oklch(var(--muted-2));
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 140ms,
    border-color 140ms;
}
.ci-sent-quote:hover,
.ci-sent-quote:focus-visible {
  border-color: oklch(var(--ai) / 0.45);
  color: oklch(var(--primary));
  outline: none;
}

.ci-sent-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-quote-numeral {
  flex-shrink: 0;
  color: oklch(var(--ai));
  font-size: 12px;
}


/* /@fs//home/coder/control-poc/src/features/act/simulate/sections/wizard-visual.css */
/* Authoring layout and component appearance are provided by Gaia. */


/* /@fs//home/coder/control-poc/src/features/control/scenarios/sections/scenario-stage-detail.css */
/* The stage detail that replaces the chart when a stage is opened. */
.scenario-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  /* Height, not `flex: 1`: the host slot is a grid item, so `flex` is inert
     here and the slot clips (`overflow: hidden`). */
  height: 100%;
}

.scenario-stage__tiles {
  display: grid;
  /* Fills the row at any width. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  flex: none;
}

.scenario-stage__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-lg);
  background: var(--gaia-card);
  min-width: 0;
}

.scenario-stage__tile-label {
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__tile-value {
  font-size: var(--gaia-text-lg);
  font-weight: 600;
  color: var(--gaia-foreground);
  font-variant-numeric: tabular-nums;
}

.scenario-stage__tile-sub {
  font-size: var(--gaia-text-2xs);
  line-height: 1.35;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-lg);
  background: var(--gaia-card);
}

.scenario-stage__table {
  width: 100%;
  border-collapse: collapse;
}

.scenario-stage__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background: var(--gaia-card);
  border-bottom: 1px solid var(--gaia-border);
  text-align: left;
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gaia-border);
  font-size: var(--gaia-text-xs);
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.scenario-stage__table tr:last-child td {
  border-bottom: 0;
}

.scenario-stage__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gaia-foreground);
  font-weight: 500;
}

/* The type dot, coloured like the driver type tags in the library. */
.scenario-stage__name i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gaia-muted-foreground);
}
.scenario-stage__name i[data-driver-type='activity'] {
  background: var(--gaia-success);
}
.scenario-stage__name i[data-driver-type='intensity'] {
  background: var(--gaia-warning);
}
.scenario-stage__name i[data-driver-type='financial'] {
  background: var(--gaia-destructive);
}

.scenario-stage__table [data-impact='down'] {
  color: var(--gaia-success);
}
.scenario-stage__table [data-impact='up'] {
  color: var(--gaia-destructive);
}

.scenario-stage__muted,
.scenario-stage__empty {
  color: var(--gaia-muted-foreground);
}

.scenario-stage__empty {
  padding: 16px;
  font-size: var(--gaia-text-xs);
}


/* /@fs//home/coder/control-poc/src/shared/design-system/legacy-colors.css */
/* Compatibility for pages that still consume OKLCH channels and legacy colour classes.
   Import after Gaia, outside control-legacy: Gaia's public aliases contain complete
   colours, while existing Control styles wrap these channels in oklch(...).
   Registry components use --gaia-* and retain their own colour utilities. */

:root {
  /* Core */
  --background: 96.5% 0.004 286; /* #F4F4F6 */
  --white: 100% 0 0;
  --white-foreground: 27% 0.085 269; /* #272C5F */

  --primary: 27% 0.085 269; /* navy #272C5F */
  --primary-foreground: 100% 0 0;
  --primary-active: 27% 0.085 269;

  --secondary: 64% 0.04 276; /* #888BAA */
  --secondary-foreground: 100% 0 0;

  --accent: 44% 0.05 269; /* #4F5484 */
  --accent-foreground: 100% 0 0;

  --muted-bg: 91% 0.01 276; /* #E0E2EB */
  --muted: 37% 0.025 275; /* #46475C */
  --muted-2: 55% 0.025 275; /* lighter muted text */

  --input: 91% 0.01 276;
  --ring: 44% 0.05 269;
  --radius: 0.625rem;

  /* Sidebar (uses primary navy in this build) */
  --sidebar-background: 27% 0.085 269;
  --sidebar-foreground: 100% 0 0;
  --sidebar-accent: 44% 0.05 269;

  /* AI green #5CC63C */
  --ai: 70% 0.19 138;
  --ai-foreground: 100% 0 0;

  /* Action blue #2871FF */
  --action: 55% 0.22 258;
  --action-foreground: 100% 0 0;

  /* Brand green #28A003 */
  --brand: 56% 0.17 142;
  --brand-foreground: 100% 0 0;

  /* Scope colors */
  --scope-1: 62% 0.13 285; /* purple */
  --scope-2: 55% 0.09 148; /* sage */
  --scope-3: 61% 0.12 66; /* amber */

  /* Semantic */
  --green-bg: 91% 0.03 140;
  --green: 53% 0.17 141;
  --orange-bg: 94% 0.04 70;
  --orange: 71% 0.16 60;
  --error-bg: 90% 0.03 20;
  --error: 59% 0.2 26;

  /* CONTROL-specific finance accent (deep indigo with warmth) */
  --finance: 38% 0.1 270;
  --finance-soft: 95% 0.015 270;

  /* Tables */
  --table-header: 64% 0.04 276;
  --table-row-hover: 96.77% 0.0027 286.35;
  --table-row-selected: 91% 0.01 276;

  /* Surface radii */
  --radius-sm: 8px;
  --radius-surface: 16px;
}

/* Color utility classes */
.text-primary:where(:not([data-slot])) {
  color: oklch(var(--primary));
}
.text-accent:where(:not([data-slot])) {
  color: oklch(var(--accent));
}
.text-secondary:where(:not([data-slot])) {
  color: oklch(var(--secondary));
}
.text-muted:where(:not([data-slot])) {
  color: oklch(var(--muted));
}
.text-muted-2:where(:not([data-slot])) {
  color: oklch(var(--muted-2));
}
.text-white:where(:not([data-slot])) {
  color: white;
}
.text-action:where(:not([data-slot])) {
  color: oklch(var(--action));
}
.text-ai:where(:not([data-slot])) {
  color: oklch(var(--ai));
}
.text-brand:where(:not([data-slot])) {
  color: oklch(var(--brand));
}
.text-green:where(:not([data-slot])) {
  color: oklch(var(--green));
}
.text-error:where(:not([data-slot])) {
  color: oklch(var(--error));
}
.text-orange:where(:not([data-slot])) {
  color: oklch(var(--orange));
}
.text-finance:where(:not([data-slot])) {
  color: oklch(var(--finance));
}

.bg-background:where(:not([data-slot])) {
  background: oklch(var(--background));
}
.bg-white:where(:not([data-slot])) {
  background: white;
}
.bg-primary:where(:not([data-slot])) {
  background: oklch(var(--primary));
}
.bg-accent:where(:not([data-slot])) {
  background: oklch(var(--accent));
}
.bg-action:where(:not([data-slot])) {
  background: oklch(var(--action));
}
.bg-ai:where(:not([data-slot])) {
  background: oklch(var(--ai));
}
.bg-brand:where(:not([data-slot])) {
  background: oklch(var(--brand));
}
.bg-muted-bg:where(:not([data-slot])) {
  background: oklch(var(--muted-bg));
}
.bg-finance-soft:where(:not([data-slot])) {
  background: oklch(var(--finance-soft));
}
.bg-green-bg:where(:not([data-slot])) {
  background: oklch(var(--green-bg));
}
.bg-orange-bg:where(:not([data-slot])) {
  background: oklch(var(--orange-bg));
}
.bg-error-bg:where(:not([data-slot])) {
  background: oklch(var(--error-bg));
}


/* /src/shared/design-system/components.css */
/* Cozero design system — form and band components, as classes.
   Companion to tokens.css; imported next to it in __root.tsx.

   These are the recipes that were previously written inline at every call site
   — an input's border and radius, a segmented toggle, the four coloured
   explanation bands — expressed once. A rule here may reference only tokens
   from tokens.css, never a literal colour, so a token change moves every
   component with it.

   Font family is deliberately absent: tokens.css sets the stack on `body` and
   `button`, and `input`/`select`/`textarea` do NOT inherit it by default, so
   `font: inherit` below is load-bearing rather than redundant. */

/* ---- inputs ---- */
.input,
.select,
.textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 8px;
  background: white;
  font: inherit;
  font-size: 13px;
  color: oklch(var(--primary));
  outline: none;
}
.input:focus,
.select:focus,
.textarea:focus {
  border-color: oklch(var(--ring));
}
.textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.45;
}
/* The chevron is a data: URI rather than an overlaid element so a <select> stays
   one focusable node. Its stroke is #6D7181 — the one literal colour in this
   file, because a url() cannot read a CSS variable. It matches --muted-2. */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236D7181' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field > .caption-bold {
  color: oklch(var(--muted));
}
/* A unit or currency inside the input's right edge. The suffix is
   pointer-events:none so clicking it still focuses the field. */
.input-suffix {
  position: relative;
}
/* The room reserved for the suffix FOLLOWS THE SUFFIX. It was a flat 64px,
   which a long unit overruns — "kgCO₂e/t·km" printed straight over the
   placeholder. `SuffixedInput` sets `--suffix-pad` from the suffix's own
   length; the fallback keeps hand-written markup working. */
.input-suffix .input {
  padding-right: var(--suffix-pad, 64px);
}
.input-suffix > span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: oklch(var(--muted-2));
  pointer-events: none;
}
.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- segmented toggle ---- */
.seg {
  display: inline-flex;
  gap: 2px;
  background: oklch(var(--muted-bg) / 0.5);
  padding: 3px;
  border-radius: 10px;
}
.seg > button {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--muted));
  transition: background-color 120ms;
}
.seg > button.on {
  background: white;
  color: oklch(var(--primary));
  box-shadow:
    0 1px 2px rgba(20, 20, 40, 0.06),
    0 0 0 1px oklch(var(--muted-bg));
}

/* ---- inline add action ---- */
.add-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--action));
  padding: 6px 4px;
  border-radius: 7px;
}
.add-link:hover {
  background: oklch(var(--muted-bg) / 0.4);
}

/* ---- separator ---- */
.hr {
  height: 1px;
  background: oklch(var(--muted-bg));
  border: 0;
  margin: 18px 0;
}

/* ---- explanation bands ----
   Four tones for one shape. The tone carries the meaning, so the copy never
   has to say "warning:" — success states a resolved fact, warn states an
   incomplete answer, error states a refusal, info states how something
   composes. */
.success-line,
.warn-line,
.error-line,
.info-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: oklch(var(--muted));
  margin-top: 14px;
}
.success-line {
  background: oklch(var(--green-bg) / 0.55);
  border: 1px solid oklch(var(--green) / 0.25);
}
.warn-line {
  background: oklch(var(--orange-bg) / 0.7);
  border: 1px solid oklch(var(--orange) / 0.3);
}
.error-line {
  background: oklch(var(--error-bg) / 0.7);
  border: 1px solid oklch(var(--error) / 0.3);
}
.info-line {
  background: oklch(var(--finance-soft));
  border: 1px solid oklch(var(--finance) / 0.18);
  font-size: 12.5px;
}

/* A read-only strip of figures the author is working against — the starting
   emissions above an editor, the operating position below one. */
.baseline-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: oklch(var(--muted-bg) / 0.35);
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: oklch(var(--muted));
}

/* ---- small chips ---- */
/* Names the per-year shape a section's values carry — "Discrete payments",
   "Step and hold". The three shapes must never be confused, so each section
   says which one it is. */
.sem-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
  background: oklch(var(--muted-bg) / 0.8);
  color: oklch(var(--muted));
}
/* Where a picked thing came from. The author never needs to care, but seeing
   it makes "we already measure this" legible at a glance. */
.src-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 6px;
}
.src-ccf {
  background: oklch(var(--green-bg));
  color: oklch(var(--green));
}
.src-core {
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
}
.src-new {
  background: oklch(var(--orange-bg));
  color: oklch(var(--orange));
}
.scope-pill {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 700;
}
.new-chip {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  background: oklch(0.93 0.04 258);
  color: oklch(var(--action));
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---- card padding ---- */
.pane {
  padding: 22px 24px;
}


/* /src/shared/design-system/gaia-consumer.css */
/* Compatibility for pages that still consume OKLCH channels and legacy colour classes.
   Import after Gaia, outside control-legacy: Gaia's public aliases contain complete
   colours, while existing Control styles wrap these channels in oklch(...).
   Registry components use --gaia-* and retain their own colour utilities. */

:root {
  /* Core */
  --background: 96.5% 0.004 286; /* #F4F4F6 */
  --white: 100% 0 0;
  --white-foreground: 27% 0.085 269; /* #272C5F */

  --primary: 27% 0.085 269; /* navy #272C5F */
  --primary-foreground: 100% 0 0;
  --primary-active: 27% 0.085 269;

  --secondary: 64% 0.04 276; /* #888BAA */
  --secondary-foreground: 100% 0 0;

  --accent: 44% 0.05 269; /* #4F5484 */
  --accent-foreground: 100% 0 0;

  --muted-bg: 91% 0.01 276; /* #E0E2EB */
  --muted: 37% 0.025 275; /* #46475C */
  --muted-2: 55% 0.025 275; /* lighter muted text */

  --input: 91% 0.01 276;
  --ring: 44% 0.05 269;
  --radius: 0.625rem;

  /* Sidebar (uses primary navy in this build) */
  --sidebar-background: 27% 0.085 269;
  --sidebar-foreground: 100% 0 0;
  --sidebar-accent: 44% 0.05 269;

  /* AI green #5CC63C */
  --ai: 70% 0.19 138;
  --ai-foreground: 100% 0 0;

  /* Action blue #2871FF */
  --action: 55% 0.22 258;
  --action-foreground: 100% 0 0;

  /* Brand green #28A003 */
  --brand: 56% 0.17 142;
  --brand-foreground: 100% 0 0;

  /* Scope colors */
  --scope-1: 62% 0.13 285; /* purple */
  --scope-2: 55% 0.09 148; /* sage */
  --scope-3: 61% 0.12 66; /* amber */

  /* Semantic */
  --green-bg: 91% 0.03 140;
  --green: 53% 0.17 141;
  --orange-bg: 94% 0.04 70;
  --orange: 71% 0.16 60;
  --error-bg: 90% 0.03 20;
  --error: 59% 0.2 26;

  /* CONTROL-specific finance accent (deep indigo with warmth) */
  --finance: 38% 0.1 270;
  --finance-soft: 95% 0.015 270;

  /* Tables */
  --table-header: 64% 0.04 276;
  --table-row-hover: 96.77% 0.0027 286.35;
  --table-row-selected: 91% 0.01 276;

  /* Surface radii */
  --radius-sm: 8px;
  --radius-surface: 16px;
}

/* Color utility classes */
.text-primary:where(:not([data-slot])) {
  color: oklch(var(--primary));
}
.text-accent:where(:not([data-slot])) {
  color: oklch(var(--accent));
}
.text-secondary:where(:not([data-slot])) {
  color: oklch(var(--secondary));
}
.text-muted:where(:not([data-slot])) {
  color: oklch(var(--muted));
}
.text-muted-2:where(:not([data-slot])) {
  color: oklch(var(--muted-2));
}
.text-white:where(:not([data-slot])) {
  color: white;
}
.text-action:where(:not([data-slot])) {
  color: oklch(var(--action));
}
.text-ai:where(:not([data-slot])) {
  color: oklch(var(--ai));
}
.text-brand:where(:not([data-slot])) {
  color: oklch(var(--brand));
}
.text-green:where(:not([data-slot])) {
  color: oklch(var(--green));
}
.text-error:where(:not([data-slot])) {
  color: oklch(var(--error));
}
.text-orange:where(:not([data-slot])) {
  color: oklch(var(--orange));
}
.text-finance:where(:not([data-slot])) {
  color: oklch(var(--finance));
}

.bg-background:where(:not([data-slot])) {
  background: oklch(var(--background));
}
.bg-white:where(:not([data-slot])) {
  background: white;
}
.bg-primary:where(:not([data-slot])) {
  background: oklch(var(--primary));
}
.bg-accent:where(:not([data-slot])) {
  background: oklch(var(--accent));
}
.bg-action:where(:not([data-slot])) {
  background: oklch(var(--action));
}
.bg-ai:where(:not([data-slot])) {
  background: oklch(var(--ai));
}
.bg-brand:where(:not([data-slot])) {
  background: oklch(var(--brand));
}
.bg-muted-bg:where(:not([data-slot])) {
  background: oklch(var(--muted-bg));
}
.bg-finance-soft:where(:not([data-slot])) {
  background: oklch(var(--finance-soft));
}
.bg-green-bg:where(:not([data-slot])) {
  background: oklch(var(--green-bg));
}
.bg-orange-bg:where(:not([data-slot])) {
  background: oklch(var(--orange-bg));
}
.bg-error-bg:where(:not([data-slot])) {
  background: oklch(var(--error-bg));
}

/* App composition only. Component appearance comes from the Gaia registry. */
.control-gaia-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.control-gaia-toolbar > [data-slot='toolbar'] {
  flex: 1;
  min-width: 0;
}


/* /src/app/shell/header.css */
/* Detail rail actions use the same compact outline pill as the prototype. */
.gaia-detail-panel__head .btn-outline {
  border-color: oklch(var(--primary));
  border-radius: 9999px;
}

@media (max-width: 700px) {
  .app-header {
    position: relative;
    height: auto !important;
    min-height: 96px;
    flex-wrap: wrap;
    align-content: flex-end;
    gap: 8px 0;
    padding: 12px 12px 12px 0 !important;
  }

  .app-header__title {
    min-width: 0;
    flex: 1;
    padding-left: 16px !important;
  }

  .app-header__grow {
    display: none;
  }

  .app-header__actions {
    width: calc(100% - var(--header-spacer));
    height: auto !important;
    margin-left: var(--header-spacer);
    padding-right: 0 !important;
    flex-wrap: wrap;
  }

  .app-header__actions > div {
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .app-header__actions > button {
    position: absolute !important;
    top: 30px;
    right: 16px;
  }
}


/* /src/features/carbon-intelligence/chat/sections/message-actions.css */
/* The action row under an answer, the overflow menu it opens, and the affordance that carries
   one figure out of a view into the next question — the controls a person acts on an answer
   with, wherever on the answer they sit.

   The row's reveal-on-hover is chat.css's (`.ci-turn:hover .ci-actions`). What is here are the
   two cases where hovering is not how it gets found: a touch screen, which has no hover at all,
   and the last answer, which is the one being acted on. */

/* Both selectors are written against `.ci-turn` so they outweigh the single-class rule in
   chat.css that hides the row. Bundlers are free to order two stylesheets either way, and at
   equal specificity the later one wins — which would leave the row hidden on a touch screen
   half the time. */
@media (hover: none) {
  .ci-turn .ci-actions {
    opacity: 1;
  }
}

/* The newest answer keeps its row on screen: it is where a rating, a retry or a follow-up is
   most likely, and nothing above it is competing for the same attention. */
.ci-turn .ci-actions-last {
  opacity: 1;
}

/* Small, quiet, and only lit under the pointer — the row states what is possible without
   drawing the eye away from the answer it belongs to. */
.ci-actions button {
  transition:
    background 120ms,
    color 120ms;
}
.ci-actions > button:hover:not(:disabled),
.ci-actions-menu-wrap > button:hover:not(:disabled) {
  background: oklch(var(--muted-bg) / 0.6);
}

.ci-actions-menu-wrap {
  position: relative;
  display: inline-flex;
}

.ci-actions-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 216px;
  padding: 5px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  background: oklch(var(--white));
  box-shadow: 0 10px 30px oklch(var(--primary) / 0.12);
}

.ci-actions-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  text-align: left;
  color: oklch(var(--primary));
  background: transparent;
}
.ci-actions-menu-item:hover:not([aria-disabled='true']),
.ci-actions-menu-item:focus-visible:not([aria-disabled='true']) {
  background: oklch(var(--muted-bg) / 0.6);
}
.ci-actions-menu-item[aria-disabled='true'] {
  color: oklch(var(--muted-2) / 0.7);
  cursor: default;
}

/* Flipped below the trigger when there is not room above it — near the top of the stream the
   scroll container clips anything that reaches past it. */
.ci-actions-menu-down {
  top: calc(100% + 6px);
  bottom: auto;
}

/* Why a disabled item cannot be used, on the line under its name — the same sentence its
   tooltip carries, said where it does not need hovering to be read. */
.ci-actions-menu-why {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: oklch(var(--muted-2) / 0.7);
}

/* Quoting one figure out of a view. The control belongs to the row or tile it sits in and
   surfaces when that is hovered or holds focus — a table of thirty rows showing thirty of these
   at once would be louder than the figures. Opacity only: it stays in the tab order unhovered,
   so a keyboard finds it, and it lights up as soon as it takes focus. */
.ci-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: oklch(var(--muted-2));
  opacity: 0;
  transition:
    opacity 120ms,
    background 120ms;
}
.ci-quote-host:hover .ci-quote,
.ci-quote-host:focus-within .ci-quote,
.ci-quote:focus-visible {
  opacity: 1;
}
.ci-quote:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* Under a chart, where the figure being pointed at has to be named for the control to mean
   anything — the bar itself cannot hold a button the pointer could reach. */
.ci-quote-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
  color: oklch(var(--muted));
  transition: background 120ms;
}
.ci-quote-inline:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* On a tile the control has no column of its own, so it sits in the corner over the figure. */
.ci-quote-corner {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* A tile is the positioning context for the corner control above. */
.ci-quote-host-tile {
  position: relative;
}

@media (hover: none) {
  .ci-quote {
    opacity: 1;
  }
}

/* The one field a rating opens. Optional — Send with it empty and the rating still lands. */
.ci-feedback {
  margin-top: 8px;
  max-width: 460px;
  padding: 12px 14px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: oklch(var(--white));
}
.ci-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}


/* /src/features/carbon-intelligence/chat/components/artifacts.css */
/* Artifacts: the panel beside the conversation, the list inside it, the modal it expands into,
   and the page that lists everything across conversations. All three share the row and the
   viewer, so their styles live together rather than in chat.css, which is about the thread. */

.ci-artifact-panel {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
}

/* Sits over the border, wide enough to grab without hunting for it. */
.ci-artifact-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  z-index: 5;
  width: 6px;
  cursor: col-resize;
}
.ci-artifact-resize:hover,
.ci-artifact-resize:focus-visible {
  background: oklch(var(--ai) / 0.25);
}

.ci-artifact-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 11px 16px;
  border-bottom: 1px solid oklch(var(--muted-bg));
}

.ci-artifact-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-header-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: oklch(var(--muted-2));
}
.ci-artifact-header-btn:hover {
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

.ci-artifact-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.ci-artifact-body-scroll {
  overflow-y: auto;
}

/* ---- the list ---- */

.ci-artifact-list {
  padding: 12px 14px 18px;
}

.ci-artifact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ci-artifact-filters .btn-pill {
  height: 26px;
  padding: 0 11px;
  font-size: 12px;
}

.ci-artifact-empty {
  margin: 0;
  padding: 6px 2px;
  line-height: 1.5;
}

.ci-artifact-family + .ci-artifact-family {
  margin-top: 16px;
}

.ci-artifact-family-label {
  margin: 0 0 6px 2px;
}

.ci-artifact-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-artifact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  transition:
    background-color 140ms,
    border-color 140ms;
}
.ci-artifact-row:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.ci-artifact-row[data-open='true'] {
  border-color: oklch(var(--ai) / 0.35);
  background: oklch(var(--ai) / 0.08);
}

/* Uploaded and generated are told apart by the glyph's tint, not by a word on every row. */
.ci-artifact-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: oklch(var(--muted-bg) / 0.8);
  color: oklch(var(--muted));
}
.ci-artifact-glyph[data-origin='generated'] {
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

.ci-artifact-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ci-artifact-name {
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-kind,
.ci-artifact-thread {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-artifact-time {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---- the modal ---- */

.ci-artifact-modal {
  display: flex;
  flex-direction: column;
  width: min(1200px, 100vw - 48px);
  height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: oklch(var(--white));
}

.ci-artifact-modal-title {
  gap: 0;
}

/* ---- the page ---- */

.ci-artifacts-page {
  max-width: 900px;
  margin: 0 auto;
}

.ci-artifacts-search {
  margin-bottom: 14px;
}
.ci-artifacts-search .input {
  padding-left: 32px;
}
.ci-artifacts-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  color: oklch(var(--muted-2));
  pointer-events: none;
  transform: translateY(-50%);
}
.ci-artifacts-page .ci-artifact-list {
  padding: 0;
}
.ci-artifacts-page .ci-artifact-row {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--white));
}
.ci-artifacts-page .ci-artifact-row:hover {
  border-color: oklch(var(--muted));
}

/* ---- the actions row, shared by panel and modal ---- */

.ci-artifact-actions {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
}

/* The card an artifact came from, lit for a moment after "Show in conversation" found it. */
[data-ci-found='true'] {
  border-radius: var(--radius-surface);
  outline: 2px solid oklch(var(--ai) / 0.55);
  outline-offset: 3px;
  transition: outline-color 300ms ease;
}


/* /src/shared/ui/overlay-page.css */
/* OverlayShell's surface is only the lifecycle: the child owns its own frame,
   so Gaia's card treatment and width would fight it. */
.gaia-dialog__surface.control-overlay-bare {
  width: auto;
  max-width: calc(100vw - 48px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gaia-page-modal {
  --gaia-shell-sidebar-width: 80px;
}
@media (max-width: 900px) {
  .gaia-page-modal {
    --gaia-shell-sidebar-width: 68px;
  }
}
.scenario-create-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scenario-create-seed {
  border-top: 1px solid var(--gaia-border);
  padding-top: 14px;
}


/* /src/features/carbon-intelligence/chat/sections/chat.css */
/* Carbon Intelligence — the few animations and scroll behaviours the chat needs.
   Everything else comes from the design system's tokens and component classes. */

/* A page change that carries the conversation with it: the rest of the page crossfades while
   the conversation itself glides from where it was to where it is now. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
}

::view-transition-group(ci-conversation) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(ci-conversation) {
  animation: ci-vt-leave 200ms ease-out both;
}

::view-transition-new(ci-conversation) {
  animation: ci-vt-arrive 280ms ease-out 140ms both;
}

@keyframes ci-vt-leave {
  to {
    opacity: 0;
  }
}

@keyframes ci-vt-arrive {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

@keyframes ci-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* A card that grows above the reading position must not push what is being read.
   `overflow-anchor` keeps the browser's scroll anchor pinned to the content below. */
.ci-stream {
  overflow-anchor: auto;
}
.ci-stream > * {
  overflow-anchor: none;
}
.ci-anchor {
  overflow-anchor: auto;
  height: 1px;
}

.ci-fade-in {
  animation: ci-fade-in 260ms ease both;
}
@keyframes ci-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The message action row appears on hover or when anything inside it has focus. It keeps its
   height either way — a row that collapses when unhovered makes the whole thread jump under
   the pointer — but its height is the only space it takes. */
.ci-actions {
  opacity: 0;
  transition: opacity 140ms;
}
.ci-turn:hover .ci-actions,
.ci-turn:focus-within .ci-actions {
  opacity: 1;
}

/* Streaming prose ends with a caret AFTER the last word. Markdown's final block is a `<p>` (or
   an `<li>`), so a caret rendered as its sibling would drop onto a line of its own underneath.
   It is drawn instead as an `::after` on that final block, which puts it in the same inline
   flow as the text it is trailing — no measurement, no negative margins, correct on a wrapped
   line and on a list. */
.ci-streaming > div > :last-child::after,
.ci-streaming > div > :last-child > li:last-child::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 0.92em;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: oklch(var(--ai));
  animation: ci-caret 1s steps(2, start) infinite;
}

/* A list's own `::after` would double up with its last item's. */
.ci-streaming > div > ul:last-child::after,
.ci-streaming > div > ol:last-child::after {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .ci-streaming > div > :last-child::after,
  .ci-streaming > div > :last-child > li:last-child::after {
    animation: none;
  }
}

/* A placeholder for something the server is still writing — the follow-up questions after an
   answer, the sources under it. It carries the shape of the real thing (a pill of about the
   right width) so nothing jumps when the content replaces it, and a slow sheen crossing it says
   the wait is expected rather than broken. */
.ci-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: oklch(var(--muted-bg) / 0.55);
}

.ci-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(var(--surface) / 0.75), transparent);
  animation: ci-sheen 1.5s ease-in-out infinite;
}

@keyframes ci-sheen {
  100% {
    transform: translateX(100%);
  }
}

/* Motion is decoration here: the placeholder still reserves the space without it. */
@media (prefers-reduced-motion: reduce) {
  .ci-skeleton::after {
    animation: none;
  }
}

/* The files travelling with the next turn, inside the composer frame above the box. Two abreast
   so a card can carry a real name and a state sentence; the rest collapse into one tile rather
   than wrapping the frame into a second panel. */
/* Two cards abreast, wrapping to the next line rather than narrowing further. A grid of
   `auto-fill` columns takes as many as the composer is wide and squeezes every name into an
   ellipsis; a card has to be wide enough to show a name and a size at once. */
.ci-file-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 10px 0 12px;
}

.ci-file-cards > .ci-file-card {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
}

/* The overflow tile is a marker, not a card: it takes only the width of its own label. */
.ci-file-cards > .ci-file-more {
  flex: 0 0 auto;
  min-width: 56px;
}

.ci-file-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px 7px 9px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: var(--radius-sm);
  background: oklch(var(--background) / 0.6);
  text-align: left;
  transition:
    border-color 140ms,
    background 140ms;
}

.ci-file-card[role='button'] {
  cursor: pointer;
}
.ci-file-card[role='button']:hover {
  border-color: oklch(var(--ai) / 0.5);
  background: oklch(var(--white));
}

.ci-file-card[data-status='failed'] {
  border-color: oklch(var(--error) / 0.45);
  background: oklch(var(--error-bg) / 0.35);
}

/* One tile standing in for the cards past the second. */
.ci-file-more {
  justify-content: center;
  min-height: 44px;
  color: oklch(var(--muted));
  cursor: pointer;
}
.ci-file-more:hover {
  border-color: oklch(var(--muted) / 0.5);
}

.ci-file-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--muted));
}
.ci-file-card[data-status='failed'] .ci-file-glyph {
  background: oklch(var(--error-bg));
  color: oklch(var(--error));
}
.ci-file-card[data-status='ready'] .ci-file-glyph {
  color: oklch(var(--ai));
}

.ci-file-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The name is shortened in the middle before it reaches the DOM, so this only guards a name
   that is one unbroken word wider than the card. */
.ci-file-name {
  overflow: hidden;
  color: oklch(var(--primary));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-file-state {
  overflow: hidden;
  color: oklch(var(--muted-2));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-file-state-failed {
  color: oklch(var(--error));
}

.ci-file-controls {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}

.ci-file-action {
  padding: 3px 7px;
  border-radius: 6px;
  color: oklch(var(--action));
  white-space: nowrap;
}
.ci-file-action:hover {
  background: oklch(var(--muted-bg) / 0.7);
}

.ci-file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: oklch(var(--muted-2));
}
.ci-file-remove:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* ---- Quotes: the floating control, the chip row, and the marks they light ---- */

/* A quoted span, painted back inside the answer it came from. The browser's own highlight
   registry does this without a wrapper element, so the rendered markdown is never touched. */
::highlight(ci-quote) {
  background: oklch(var(--ai) / 0.18);
  color: oklch(var(--primary));
}

/* The card a reference chip points at, lit while the chip is hovered. Matches the focused
   surface a card takes in the transcript. */
[data-ci-quote-focus='true'] > * {
  border-color: oklch(var(--ai) / 0.45);
  box-shadow: 0 6px 24px oklch(var(--primary) / 0.08);
}

.ci-quote-float {
  z-index: 45;
  width: max-content;
}

/* Styled in full here rather than on top of `.btn`: the shared button's own hover paints the
   background and leaves the colour to the variant, so a float button carrying `.btn` with no
   variant went invisible under the pointer. It owns every property it needs instead. */
.ci-quote-float-btn {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 9999px;
  background: oklch(var(--white));
  box-shadow: 0 6px 20px oklch(var(--primary) / 0.14);
  color: oklch(var(--primary));
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms;
}
.ci-quote-float-btn:hover,
.ci-quote-float-btn:focus-visible {
  border-color: oklch(var(--ai) / 0.45);
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--primary));
}

.ci-ask-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  background: oklch(var(--white));
  box-shadow: 0 8px 24px oklch(var(--primary) / 0.12);
}

.ci-ask-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  color: oklch(var(--primary));
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}
.ci-ask-choice:hover,
.ci-ask-choice:focus-visible {
  background: oklch(var(--muted-bg) / 0.7);
  outline: none;
}

.ci-quote-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 8px 12px 0;
  list-style: none;
}

.ci-quote-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 26px;
  padding: 0 4px 0 8px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 7px;
  background: oklch(var(--white));
  color: oklch(var(--primary));
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 140ms,
    background 140ms;
}
.ci-quote-chip:hover,
.ci-quote-chip:focus-within {
  border-color: oklch(var(--ai) / 0.45);
  outline: none;
}

/* A chip carrying a note says so without spending a word on it. */
.ci-quote-chip[data-ci-noted='true'] {
  border-color: oklch(var(--ai) / 0.45);
  background: oklch(var(--ai) / 0.06);
}

/* The chip's body is the button that opens its note; the remove control sits beside it. */
.ci-quote-chip-open {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: inherit;
  font: inherit;
}

.ci-quote-chip-numeral {
  color: oklch(var(--ai));
  font-size: 13px;
}

.ci-quote-chip-label {
  overflow: hidden;
  max-width: 220px;
  color: oklch(var(--muted));
  text-overflow: ellipsis;
}

.ci-quote-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: oklch(var(--muted-2));
}
.ci-quote-chip-remove:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* What a chip opens: the words in full, and a field for what to say about them. Anchored over
   the chip, above it, because the row sits at the bottom of the screen. */
.ci-quote-note {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 11px 12px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: oklch(var(--white));
  box-shadow: 0 14px 40px oklch(var(--primary) / 0.14);
}

/* The quoted words, readable in full and wrapping — the chip is the truncated form, not this. */
.ci-quote-note-text {
  max-height: 108px;
  overflow-y: auto;
  padding-left: 9px;
  border-left: 2px solid oklch(var(--ai) / 0.4);
  color: oklch(var(--primary));
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ci-quote-note-field {
  min-height: 54px;
  resize: vertical;
  font-family: inherit;
}

/* How much of the note is left, shown only near the cap. */
.ci-quote-note-count {
  margin: 4px 0 0;
  color: oklch(var(--muted-2));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The chip numbers, painted beside the words each one was taken from. The layer never takes the
   pointer: the answer underneath stays selectable straight through it. */
.ci-quote-marks {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
}

.ci-quote-mark {
  position: absolute;
  transform: translate(-100%, -2px);
  padding-right: 3px;
  color: oklch(var(--ai));
  font-size: 12px;
  line-height: 1;
}

/* The icon-only controls at the right end of the chip row — attach, and the allowance ring. The
   same square as a chip is tall, quiet at rest, lifted on hover like the chips beside them. */
.ci-row-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: oklch(var(--muted-2));
  transition:
    background 140ms,
    color 140ms;
}
.ci-row-button:hover,
.ci-row-button[aria-expanded='true'] {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* Send, at the very end of the row: filled once there is something to send, red while an answer
   is being written and the same control stops it. */
.ci-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 9999px;
  background: oklch(var(--muted-bg));
  color: oklch(var(--muted-2));
  transition:
    background 140ms,
    color 140ms;
}
.ci-send[data-ci-ready='true'] {
  background: oklch(var(--primary));
  color: oklch(var(--white));
}
.ci-send[data-ci-busy='true'] {
  background: oklch(var(--error));
  color: oklch(var(--white));
}

/* ---- The header row ---- */

/* A control in the header. Quiet at rest, on a surface of its own when hovered or when it is the
   one that is on, so the state reads from the lift rather than from a second colour. */
.ci-header-action {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: oklch(var(--muted));
  font-size: 12.5px;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms,
    color 140ms;
}
.ci-header-action:hover {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--white));
  color: oklch(var(--primary));
}
.ci-header-action[data-ci-active='true'] {
  border-color: oklch(var(--muted-bg));
  background: oklch(var(--muted-bg) / 0.7);
  color: oklch(var(--primary));
}

/* How many artifacts the conversation has. A numeral riding the control, not a badge stuck to
   it: the count is part of what the control says. */
.ci-header-count {
  min-width: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: oklch(var(--ai) / 0.14);
  color: oklch(var(--ai));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}

/* The line in the transcript while a proposed edit waits in the document beside the panel. The
   line already carries the assistant's colour, so the only motion is the arrow leaning toward the
   document the decision is waiting in — direction, not a pulse. */
.ci-pending-edit svg:last-of-type {
  animation: ci-pending-lean 2.6s ease-in-out infinite;
}

@keyframes ci-pending-lean {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateX(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-pending-edit svg:last-of-type {
    animation: none;
  }
}

/* The one action under an answer that starts something rather than acting on the answer itself.
   It is the same quiet shape as its neighbours until it is approached, and then it takes the
   assistant's colour — clear about what it leads to without shouting across the transcript. */
.ci-convert-action button:hover:not(:disabled) {
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

/* "Convert into insight": the same menu shell as the ask choices, opening from the action that
   raised it and wide enough for a real insight name. */
.ci-convert-menu {
  min-width: 232px;
  max-width: 320px;
  /* Placed against the action's box by the component, so it carries no offset of its own. */
  margin-top: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  transform-origin: top left;
  animation: ci-menu-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-convert-menu[data-side='above'] {
  transform-origin: bottom left;
  animation-name: ci-menu-in-up;
}

@keyframes ci-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ci-menu-in-up {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ci-convert-menu .ci-ask-choice {
  gap: 9px;
  width: 100%;
  min-width: 0;
  color: oklch(var(--primary));
  transition:
    background 120ms ease,
    color 120ms ease;
}

.ci-convert-menu .ci-ask-choice svg {
  flex-shrink: 0;
  color: oklch(var(--muted-2));
  transition: color 120ms ease;
}

.ci-convert-menu .ci-ask-choice:hover svg,
.ci-convert-menu .ci-ask-choice:focus-visible svg {
  color: oklch(var(--ai));
}

.ci-convert-menu .ci-ask-choice:disabled {
  color: oklch(var(--muted-2) / 0.6);
  cursor: default;
}

.ci-convert-menu .ci-ask-choice:disabled:hover {
  background: transparent;
}

/* The one that starts something new sits above the list, with a hairline between. */
.ci-convert-menu-section {
  margin-top: 4px;
  padding: 7px 9px 4px;
  border-top: 1px solid oklch(var(--muted-bg) / 0.8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ci-convert-menu {
    animation: none;
  }
}

/* ---- The panel beside an insight, before the first question ---- */

/* The assistant introducing itself as a co-author: a mark, an invitation in the app's own voice,
   and three ways in. It sits at the top of the room rather than floating in the middle, so the
   panel reads as ready rather than as empty. */
.ci-insight-welcome {
  padding: 4px 0 8px;
}

.ci-insight-welcome-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: oklch(var(--ai) / 0.12);
  color: oklch(var(--ai));
}

.ci-insight-welcome-starters {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* One way in. A card rather than a line in a list, so the three read as offers and the pointer
   has something to land on. */
.ci-insight-starter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid oklch(var(--muted-bg));
  background: oklch(var(--white));
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: oklch(var(--primary));
  transition:
    border-color 160ms ease,
    box-shadow 200ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: ci-fade-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-insight-starter:hover,
.ci-insight-starter:focus-visible {
  transform: translateY(-1px);
  border-color: oklch(var(--ai) / 0.45);
  box-shadow: 0 8px 20px -10px oklch(var(--primary) / 0.35);
}

.ci-insight-starter-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--muted));
  transition:
    background 180ms ease,
    color 180ms ease;
}

.ci-insight-starter:hover .ci-insight-starter-mark,
.ci-insight-starter:focus-visible .ci-insight-starter-mark {
  background: oklch(var(--ai) / 0.14);
  color: oklch(var(--ai));
}

.ci-insight-starter-go {
  flex-shrink: 0;
  color: oklch(var(--ai));
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-insight-starter:hover .ci-insight-starter-go,
.ci-insight-starter:focus-visible .ci-insight-starter-go {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ci-insight-starter {
    animation: none;
  }
  .ci-insight-starter:hover,
  .ci-insight-starter:focus-visible {
    transform: none;
  }
  .ci-insight-starter-go {
    transform: none;
  }
}


/* /src/shared/ui/ai-elements/ai-elements.css */
/* The ported AI Elements. Tokens only — every colour is an oklch(var(--token)) from
   design-system/tokens.css, and every animation degrades to a static, legible resting state
   under prefers-reduced-motion. */

/* Text that is still being worked on: a bright band crossing the glyphs, clipped to the text,
   so a running line reads as live without a spinner anywhere on screen.

   Two stacked layers. Underneath, a flat muted fill is the text's resting colour. Above it, a
   250%-wide band travelling right to left whose centre is the full-contrast ink — on a light
   surface the sweep therefore reads as the sentence brightening rather than as a pale wash,
   which is what a page-background highlight would give here. The band's half-width comes from
   `--ci-shimmer-spread`, which the component sets from the length of the sentence, so a short
   step and a long one sweep at the same apparent speed. */
@keyframes ci-shimmer-sweep {
  0% {
    background-position:
      100% center,
      0 0;
  }
  100% {
    background-position:
      0% center,
      0 0;
  }
}

.ci-shimmer {
  --ci-shimmer-spread: 24px;
  --ci-shimmer-duration: 2s;
  position: relative;
  display: inline-block;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(50% - var(--ci-shimmer-spread)),
      oklch(var(--primary)),
      transparent calc(50% + var(--ci-shimmer-spread))
    ),
    linear-gradient(oklch(var(--muted-2)), oklch(var(--muted-2)));
  background-size:
    250% 100%,
    auto;
  background-repeat: no-repeat, padding-box;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: ci-shimmer-sweep var(--ci-shimmer-duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ci-shimmer {
    animation: none;
    color: oklch(var(--muted));
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* A disclosure whose body slides rather than snapping. The height is animated by the component;
   this only carries the easing and the reduced-motion opt-out. */
.ci-disclosure-body {
  overflow: hidden;
}

/* One step of a chain of thought. The pending steps sit back so the running one is the only
   line at full contrast — status drives opacity, never colour. */
.ci-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  transition: opacity 180ms ease;
}

.ci-step-pending {
  opacity: 0.55;
}

.ci-step-active {
  opacity: 1;
}

.ci-step-complete {
  opacity: 0.72;
}

.ci-step-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  align-self: center;
  background: oklch(var(--muted-2));
}

.ci-step-active .ci-step-dot {
  background: oklch(var(--ai));
  box-shadow: 0 0 0 3px oklch(var(--ai) / 0.18);
}

.ci-step-complete .ci-step-dot {
  background: oklch(var(--ai));
}

.ci-step-error .ci-step-dot {
  background: oklch(var(--error));
}

.ci-step-label {
  flex: 1;
  min-width: 0;
  color: oklch(var(--muted));
}

.ci-step-error .ci-step-label,
.ci-step-error .ci-step-result {
  color: oklch(var(--error));
}

.ci-step-result {
  flex-shrink: 0;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}


/* /src/features/carbon-intelligence/chat/sections/sent-quotes.css */
/* What a question was asked about, above the person's own words. Right-aligned with the bubble
   it belongs to, quiet enough that the question is still what the eye lands on. */
.ci-sent-quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  margin: 0 0 5px;
  padding: 0;
  max-width: 76%;
  list-style: none;
}

.ci-sent-quote {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  max-width: 320px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 7px;
  color: oklch(var(--muted-2));
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 140ms,
    border-color 140ms;
}
.ci-sent-quote:hover,
.ci-sent-quote:focus-visible {
  border-color: oklch(var(--ai) / 0.45);
  color: oklch(var(--primary));
  outline: none;
}

.ci-sent-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-quote-numeral {
  flex-shrink: 0;
  color: oklch(var(--ai));
  font-size: 12px;
}


/* /src/shared/ui/filter-panel.css */
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-panel__group {
  min-width: 0;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid oklch(var(--input));
}
.filter-panel__group:last-of-type {
  border-bottom: 0;
}
.filter-panel__group legend {
  width: 100%;
  padding: 8px 9px 4px;
  color: oklch(var(--muted));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.filter-panel__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  text-align: left;
  font-size: 12px;
  color: oklch(var(--primary));
}
.filter-panel__option:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.filter-panel__mark {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid oklch(var(--muted));
  color: white;
}
.filter-panel__mark[data-shape='circle'] {
  border-radius: 50%;
}
.filter-panel__mark[data-shape='square'] {
  border-radius: 4px;
}
.filter-panel__mark[data-selected='true'] {
  background: oklch(var(--primary));
  border-color: oklch(var(--primary));
}
.filter-panel__label {
  flex: 1;
  min-width: 0;
}
.filter-panel__count {
  color: oklch(var(--muted));
  font-variant-numeric: tabular-nums;
}
.filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 9px 2px;
  color: oklch(var(--muted));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.filter-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-panel__option[role='checkbox'][aria-checked='true'] {
  background: oklch(var(--muted-bg) / 0.6);
}


/* /src/features/act/reduction-plan/screens/reduction-plan-screen.css */
.actions-toolbar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.actions-toolbar__tabs button {
  padding: 6px 8px;
  border: 1px solid oklch(var(--input));
  border-radius: 8px;
  background: white;
  color: oklch(var(--muted));
  font-size: 11px;
  cursor: pointer;
}
.actions-toolbar__tabs button[aria-pressed='true'] {
  background: oklch(var(--primary));
  color: white;
}
.actions-toolbar__tabs span {
  margin-left: 4px;
  opacity: 0.7;
}
.actions-toolbar button.btn-action {
  background: oklch(var(--action));
  color: white;
  padding: 7px 12px;
  border-radius: 999px;
}
.actions-toolbar button.btn-outline {
  background: white;
  border: 1px solid oklch(var(--primary));
  color: oklch(var(--primary));
  padding: 7px 12px;
  border-radius: 999px;
}
.actions-table-detail__panel {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.actions-table-detail__empty {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--muted));
  font-size: 12px;
  text-align: center;
}
.actions-advanced summary {
  color: oklch(var(--muted));
  font-size: 12px;
  cursor: pointer;
}
.actions-advanced > *:not(summary) {
  margin-top: 10px;
}


/* /src/features/act/simulate/sections/wizard-components.css */
/* Simulate Action wizard — the components only this flow has.
   Imported once, from wizard-shell.tsx.

   The generic half (inputs, .seg, .field, the four explanation bands, the
   chips) lives in shared/design-system/components.css, because those recipes
   are not specific to authoring a reduction measure. What is here is: the
   pickers on steps 2-4, the two adjustment shapes on step 5, the phase-in row
   on step 6, the line-item editor on steps 7-8, and the result tiles and
   cash-flow table on step 9.

   Same rule as the shared file: tokens only, no literal colours. */

/* ---- Assistant bubble and step heading ---- */
.bubble {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.bubble .avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: oklch(var(--ai));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 2px;
}
/* The square corner points at the avatar, which is what makes it read as
   speech rather than as a card. */
.bubble .say {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 4px 14px 14px 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: oklch(var(--muted));
  max-width: 620px;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.step-title .ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex: none;
}

/* ---- steps 2-4: pickable rows ---- */
.pick-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid oklch(var(--muted-bg));
  background: white;
  margin-bottom: 6px;
  transition:
    border-color 120ms,
    background-color 120ms;
  font-size: 13px;
}
.pick-row:hover {
  border-color: oklch(var(--secondary));
}
.pick-row.sel {
  border-color: oklch(var(--finance));
  background: oklch(var(--finance-soft));
  box-shadow: 0 0 0 1px oklch(var(--finance) / 0.35);
}
.pick-row .amt {
  margin-left: auto;
  font-size: 11.5px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- step 4: narrowing ---- */
.narrow-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 11px 0 4px;
  color: oklch(var(--muted));
  font-size: 13px;
  font-weight: 600;
}
.narrow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.narrow-card {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 11px 12px;
  background: white;
}
.narrow-card .hint {
  font-size: 11px;
  color: oklch(var(--muted-2));
  margin: 2px 0 8px;
}
.narrow-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  color: oklch(var(--muted));
}
.narrow-opt:hover {
  background: oklch(var(--muted-bg) / 0.4);
}
.narrow-opt .cb {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1.5px solid oklch(var(--secondary));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.narrow-opt.on .cb {
  background: oklch(var(--finance));
  border-color: oklch(var(--finance));
}
.narrow-opt .sub {
  margin-left: auto;
  font-size: 10.5px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}

/* ---- step 4: the switch's receiving activities ---- */
.recv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: white;
}
/* One wide panel: search, a grouped list, and create-new in its footer. Three
   sources of a receiving activity are presented as one picker on purpose —
   the author never needs to know which of the three they used. */
.picker-pop {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  background: white;
  box-shadow:
    0 30px 60px -10px rgba(20, 20, 40, 0.18),
    0 8px 20px -8px rgba(20, 20, 40, 0.08);
  padding: 10px;
  margin-top: 8px;
}
.picker-pop .grp {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--muted-2));
  padding: 8px 8px 4px;
}
.picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.picker-opt:hover {
  background: oklch(var(--muted-bg) / 0.45);
}
.picker-opt .sub {
  margin-left: auto;
  font-size: 11px;
  color: oklch(var(--muted-2));
  font-variant-numeric: tabular-nums;
}

/* ---- step 5: the two adjustment shapes ---- */
.adj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.adj-card {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 14px 15px;
  background: white;
  position: relative;
}
/* `.live` marks the adjustments the author has actually authored. Either alone
   is a complete measure, so neither card can be styled as the primary one. */
.adj-card.live {
  border-color: oklch(var(--finance) / 0.45);
  box-shadow: 0 0 0 1px oklch(var(--finance) / 0.2);
}
.delta-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}
/* Claims against the donor activity, which are validated together against
   100% — an initiative cannot switch away more than it has. */
.total-bar {
  height: 8px;
  border-radius: 9999px;
  background: oklch(var(--muted-bg));
  overflow: hidden;
  margin-top: 6px;
}
.total-bar > div {
  height: 100%;
  border-radius: 9999px;
  background: oklch(var(--finance));
  transition: width 200ms;
}
.total-bar.over > div {
  background: oklch(var(--error));
}

/* ---- step 6: the phase-in ----
   One cell per year of the lifetime, all on one row, so each year lines up
   with its bar in the preview below. Long lifetimes scroll horizontally
   rather than wrapping, which would break that alignment.

   ONE SCROLLER AROUND BOTH the cells and the preview, which is what keeps
   that alignment true past ~13 years: with a scrollbar on the cells alone, a
   15-year lifetime scrolled the cells while the bars stayed put, so the year
   under a bar was not the year in the cell above it. Both tracks share
   `flex: 1 1 0` and the same min-width, so a column is one year wide in both. */
.phase-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.phase-grid {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.phase-cell {
  flex: 1 1 0;
  min-width: 58px;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 9px;
  padding: 6px 7px;
  background: white;
}
.phase-cell .yr {
  font-size: 10.5px;
  font-weight: 600;
  color: oklch(var(--muted-2));
  display: flex;
  justify-content: space-between;
}
.phase-cell input {
  width: 100%;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: oklch(var(--primary));
  padding: 2px 0 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.phase-preview {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
  margin-top: 14px;
}
.phase-preview .pb {
  flex: 1 1 0;
  min-width: 58px;
  background: oklch(var(--finance) / 0.75);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
}
.phase-preview .pb span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  color: oklch(var(--muted-2));
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ---- steps 7-8: the line-item editor ----
   One shape for capex, opex and revenue. A name, a value, and the period it
   applies to — the per-year semantics differ, and the section's .sem-chip
   says which, but the editor does not. */
.line-item {
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
  background: white;
}
.li-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.li-head .input {
  flex: 1;
}
.li-del {
  color: oklch(var(--muted-2));
  padding: 6px;
  border-radius: 7px;
  flex: none;
}
.li-del:hover {
  color: oklch(var(--error));
  background: oklch(var(--error-bg) / 0.5);
}
.li-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 10px;
}
.sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

/* ---- step 9: the metric tiles ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.kpi {
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 16px;
  padding: 14px 16px;
  position: relative;
}
.kpi .lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--muted-2));
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .val {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.kpi .hint {
  font-size: 10.5px;
  color: oklch(var(--muted-2));
  margin-top: 3px;
}
/* The two tiles the cash-flow table's cumulative columns reconcile to. The
   lift is the visual claim that nothing is unaccounted for between them. */
.kpi.reconciled {
  box-shadow:
    0 0 0 1px oklch(var(--finance) / 0.2),
    0 8px 24px -8px oklch(var(--finance) / 0.25);
}

/* ---- step 9: the working ---- */
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cf-table th {
  text-align: right;
  padding: 9px 10px;
  background: oklch(var(--muted-bg) / 0.25);
  border-bottom: 1px solid oklch(var(--muted-bg));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: oklch(var(--table-header));
  white-space: nowrap;
}
.cf-table th:first-child,
.cf-table td:first-child {
  text-align: left;
}
.cf-table td {
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid oklch(var(--muted-bg) / 0.6);
  font-variant-numeric: tabular-nums;
  color: oklch(var(--muted));
  white-space: nowrap;
}
.cf-table tr:last-child td {
  border-bottom: 0;
  font-weight: 600;
  color: oklch(var(--primary));
  background: oklch(var(--finance-soft) / 0.6);
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.legend .li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: oklch(var(--muted));
}
.legend .box {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}
.chart-tip {
  position: fixed;
  z-index: 90;
  background: white;
  border: 1px solid oklch(var(--muted-bg));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.12);
  padding: 9px 12px;
  min-width: 170px;
  max-width: 280px;
  pointer-events: none;
  display: none;
}
.jump-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.jump-links button {
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(var(--action));
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

/* Two columns rather than four once four will not fit, then one. The
   adjustment pair collapses on the same breakpoints. */
@media (max-width: 900px) {
  .adj-grid,
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .adj-grid,
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}


/* /src/features/act/simulate/sections/wizard-visual.css */
/* Authoring layout and component appearance are provided by Gaia. */


/* /src/features/control/scenarios/screens/drivers-screen.css */
.drivers-table-detail__table,
.drivers-table-detail__panel {
  min-width: 0;
}
.drivers-table-detail__panel {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
}
.drivers-table-detail__panel > .card:not(.driver-summary) {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gaia-editor-page {
  --gaia-shell-sidebar-width: 80px;
}


/* /src/shared/ui/info.css */
/* THE ⓘ INHERITS ITS SIZE FROM THE TEXT IT SITS BESIDE. `font: inherit` is what
   carries the step down, and every measurement below is in `em` of it — so the
   button next to an .h3 is an h3-sized button and the one next to a .text-xs is
   caption-sized, with no call site choosing a number. */
.info-hint {
  font: inherit;
  /* THE RATIO THE APP HEADER ALREADY USED: a 32px button holding a 16px glyph
     beside 24px type. Expressed against the inherited step, that is 1.333em and
     0.667em — so the header is pixel-identical to what it was, and every other
     placement is the same proportion at its own size. */
  width: 1.333em;
  height: 1.333em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: none;
  border-radius: 9999px;
  background: oklch(var(--muted-bg) / 0.6);
  color: oklch(var(--muted));
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms;
}
.info-hint:hover {
  background: oklch(var(--muted-bg));
  color: oklch(var(--primary));
}

/* One shape for every Info modal, so the reader recognises it before reading
   it. Paragraphs are the only thing it holds; a modal that grows controls is
   not an explanation any more. */
.info-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  line-height: 1.55;
}
.info-modal-body p {
  margin: 0;
}
.info-modal-body b,
.info-modal-body strong {
  color: oklch(var(--primary));
}


/* /src/features/control/scenarios/screens/bundles-screen.css */
.scenarios-overview {
  display: grid;
  /* As many as fit, each stretching to fill the row. A fixed three columns
     stranded a fourth scenario on a row of its own. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.scenarios-overview__card {
  min-height: 182px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scenarios-overview__eyebrow {
  color: oklch(var(--muted));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.scenarios-overview__card strong {
  color: oklch(var(--primary));
  font-size: 16px;
}
.scenarios-overview__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
  overflow: hidden;
}
.scenarios-overview__metrics span {
  padding: 9px 10px;
  border-right: 1px solid oklch(var(--input));
  min-width: 0;
}
.scenarios-overview__metrics span:last-child {
  border-right: 0;
}
.scenarios-overview__metrics small,
.scenarios-overview__metrics b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scenarios-overview__metrics small {
  font-size: 10px;
  color: oklch(var(--muted));
}
.scenarios-overview__metrics b {
  margin-top: 5px;
  font-size: 15px;
  color: oklch(var(--primary));
}
.scenarios-overview__card p {
  margin: auto 0 0;
  color: oklch(var(--muted));
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scenarios-table-detail__panel {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.scenarios-table-detail__panel > [data-slot='table-detail-panel'] {
  flex: 1;
}
.scenarios-table-detail__panel .gaia-detail-panel__body {
  flex: 1;
  min-height: 0;
}
.scenarios-table-detail__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: oklch(var(--muted));
  font-size: 12px;
}
@media (max-width: 900px) {
  .scenarios-overview {
    grid-template-columns: 1fr;
  }
  .scenarios-table-detail__panel {
    position: static;
    max-height: none;
  }
}
.scenario-driver-picker {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
}
.scenario-driver-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid oklch(var(--input));
  cursor: pointer;
}
.scenario-driver-picker__row:last-child {
  border-bottom: 0;
}
.scenario-driver-picker__row:hover {
  background: oklch(var(--background));
}
.scenario-driver-picker__row span:not(.gaia-badge-dot) {
  flex: 1;
  min-width: 0;
}
.scenario-driver-picker__row small {
  color: oklch(var(--muted));
}
.scenario-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.scenario-overview-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border: 1px solid oklch(var(--input));
  border-radius: 10px;
}
.scenario-overview-metrics small {
  color: oklch(var(--muted));
  text-transform: uppercase;
}
.scenario-overview-metrics strong {
  color: oklch(var(--primary));
  font-size: 20px;
}
.scenario-overview-metrics span {
  color: oklch(var(--muted));
  font-size: 11px;
}
@media (max-width: 900px) {
  .scenario-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scenarios-overview__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: oklch(var(--muted));
}


/* /src/features/control/scenarios/sections/scenario-forecast-glance.css */
.scenario-glance {
  min-height: 250px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.scenario-glance__heading {
  min-width: 0;
}
.scenario-glance__eyebrow {
  display: block;
  color: oklch(var(--muted));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scenario-glance__heading strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: oklch(var(--primary));
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-glance__heading strong i {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.scenario-glance__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid oklch(var(--input));
  border-radius: 11px;
  overflow: hidden;
}
.scenario-glance__metrics > span {
  padding: 9px 12px;
  border-right: 1px solid oklch(var(--input));
  min-width: 0;
}
.scenario-glance__metrics > span:last-child {
  border-right: 0;
}
.scenario-glance__metrics small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.scenario-glance__metrics small i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--chart-1);
}
.scenario-glance__metrics small i.scenario-glance__drivers {
  background: #f28c18;
}
.scenario-glance__metrics small i.scenario-glance__actions {
  background: #268315;
}
.scenario-glance__metrics b {
  display: block;
  margin-top: 3px;
  color: oklch(var(--primary));
  font-size: 16px;
  white-space: nowrap;
}
.scenario-glance__metrics em {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}
.scenario-glance__chart {
  flex: 1;
  min-height: 85px;
  position: relative;
}
.scenario-glance__chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* The marker on the hovered data point. A white ring lifts it off the area
   fill the way the chart's own line is lifted.
   Above the tooltip, which is opaque and anchored at a fixed 45%: a series
   running below that line was covered by the very tooltip describing it, which
   is the "no dots on hover" QA reported. It has no pointer events, so nothing
   is blocked by stacking it on top. */
.scenario-glance__point {
  position: absolute;
  z-index: 11;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px white;
  pointer-events: none;
}
.scenario-glance__tooltip {
  position: absolute;
  z-index: 10;
  top: 45%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  border-radius: 8px;
  background: white;
  border: 1px solid oklch(var(--input));
  box-shadow: 0 8px 20px rgb(20 20 40 / 0.16);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.scenario-glance__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: oklch(var(--muted));
  font-size: 12px;
}
@media (max-width: 520px) {
  .scenario-glance__metrics em {
    display: none;
  }
  .scenario-glance__metrics > span {
    padding: 8px;
  }
}


/* /src/features/control/scenarios/sections/scenario-table.css */
.scenario-table__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.scenario-table__name {
  color: var(--foreground);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 600;
}
.scenario-table__tags {
  display: flex;
  align-items: center;
  gap: 6px;
}
.scenario-table__draft-note {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}


/* /src/features/control/scenarios/sections/scenario-forecast-detail.css */
.scenario-forecast-detail__state {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  padding: 24px;
}


/* /src/features/control/scenarios/sections/scenario-stage-detail.css */
/* The stage detail that replaces the chart when a stage is opened. */
.scenario-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  /* Height, not `flex: 1`: the host slot is a grid item, so `flex` is inert
     here and the slot clips (`overflow: hidden`). */
  height: 100%;
}

.scenario-stage__tiles {
  display: grid;
  /* Fills the row at any width. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  flex: none;
}

.scenario-stage__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-lg);
  background: var(--gaia-card);
  min-width: 0;
}

.scenario-stage__tile-label {
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__tile-value {
  font-size: var(--gaia-text-lg);
  font-weight: 600;
  color: var(--gaia-foreground);
  font-variant-numeric: tabular-nums;
}

.scenario-stage__tile-sub {
  font-size: var(--gaia-text-2xs);
  line-height: 1.35;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--gaia-border);
  border-radius: var(--gaia-radius-lg);
  background: var(--gaia-card);
}

.scenario-stage__table {
  width: 100%;
  border-collapse: collapse;
}

.scenario-stage__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background: var(--gaia-card);
  border-bottom: 1px solid var(--gaia-border);
  text-align: left;
  font-size: var(--gaia-text-2xs);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
}

.scenario-stage__table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gaia-border);
  font-size: var(--gaia-text-xs);
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.scenario-stage__table tr:last-child td {
  border-bottom: 0;
}

.scenario-stage__name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gaia-foreground);
  font-weight: 500;
}

/* The type dot, coloured like the driver type tags in the library. */
.scenario-stage__name i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--gaia-muted-foreground);
}
.scenario-stage__name i[data-driver-type='activity'] {
  background: var(--gaia-success);
}
.scenario-stage__name i[data-driver-type='intensity'] {
  background: var(--gaia-warning);
}
.scenario-stage__name i[data-driver-type='financial'] {
  background: var(--gaia-destructive);
}

.scenario-stage__table [data-impact='down'] {
  color: var(--gaia-success);
}
.scenario-stage__table [data-impact='up'] {
  color: var(--gaia-destructive);
}

.scenario-stage__muted,
.scenario-stage__empty {
  color: var(--gaia-muted-foreground);
}

.scenario-stage__empty {
  padding: 16px;
  font-size: var(--gaia-text-xs);
}