/* /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-sm: 0 1px 2px rgb(var(--gaia-shadow-rgb) / 0.04), 0 1px 1px rgb(var(--gaia-shadow-rgb) / 0.04);
    --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-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/features/carbon-intelligence/chat/sections/chat-history-dialog.css */
/* The Chat history pop-up: a search field, the list in its own scroll, a footer link. The dialog
   has a fixed height so results arriving never move its frame. */

.ci-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: -4px 0 0;
  color: var(--gaia-foreground);
}

.ci-history__search {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.ci-history__search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--gaia-muted-foreground);
  transform: translateY(-50%);
  pointer-events: none;
}

.ci-history__input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  outline: none;
}

.ci-history__input:focus-visible {
  border-color: var(--gaia-ring);
}

.ci-history__list {
  flex: 1;
  min-height: 0;
  margin: 0 -8px;
  padding: 0 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-history__group {
  padding: 12px 8px 4px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 8px;
  border-radius: var(--ci-radius-control);
  text-align: left;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-history__row[aria-selected='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-history__title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  font: var(--ci-type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-history__current {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-history__snippet {
  grid-column: 1;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-history__when {
  grid-row: 1;
  grid-column: 2;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
}

.ci-history__empty {
  margin: 24px 8px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-history__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 8px;
}

.ci-history__skeleton span {
  height: 20px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}

.ci-history__foot {
  flex-shrink: 0;
  margin: 12px 0 -4px;
  padding-top: 12px;
  border-top: 1px solid var(--ci-line);
  font: var(--ci-type-control);
}

.ci-history__foot a {
  color: var(--gaia-link-foreground, var(--gaia-primary));
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/component-content.css */
/* What sits inside an answer card, below its header: one row of view controls, the rows or the
   chart, a fold that says what it hides, and at most one line under it. The content measures its
   own width (a container), so the same card reads in the 760 px chat column and the 400 px panel.
   Colours come from Gaia through the CI aliases; one series is chart colour 1. */

.ci-content {
  container: ci-content / inline-size;
  --ci-row-columns: minmax(0, 13rem) minmax(48px, 1fr) 4.5rem 3.5rem;
  color: var(--gaia-foreground);
  font-size: 14px;
  line-height: 20px;
}

/* A button never keeps the browser's own type (13.33 px, normal): names, focus links and the
   fold's Show read as the content's 14/20. */
.ci-content button {
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.ci-content sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: -0.2em;
}

/* ---- the control row: a caption on the left, at most two segmented controls on the right ---- */

.ci-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 28px;
  margin: 0 0 8px;
}

.ci-control-row__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-control-row__caption b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-control-row__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 8px;
  max-width: 100%;
}

@container ci-content (max-width: 520px) {
  .ci-control-row {
    flex-wrap: wrap;
  }
}

.ci-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}
.ci-segmented button {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}
.ci-segmented button:hover {
  color: var(--gaia-foreground);
}
.ci-segmented button[aria-checked='true'] {
  background: var(--ci-surface);
  box-shadow: 0 0 0 1px var(--ci-line);
  color: var(--gaia-foreground);
  font-weight: 600;
}
.ci-segmented button:disabled {
  cursor: default;
  opacity: 0.4;
}
.ci-segmented button:disabled:hover {
  color: var(--gaia-muted-foreground);
}
.ci-segmented button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

/* A series key: a swatch and its word, never a colour alone. */
.ci-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ci-key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ci-key i[data-shape='ring'] {
  border: 1.5px solid var(--gaia-muted-foreground);
  border-radius: 50%;
  background: var(--ci-surface);
}
.ci-key i[data-shape='dot'] {
  border-radius: 50%;
}
.ci-key i[data-shape='hollow'] {
  border: 1.5px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}

/* ---- column heads: aligned with their values, the unit written once ---- */

.ci-heads {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: end;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-heads > span:not(:first-child) {
  text-align: right;
}

/* ---- ranked rows: name, bar, tonnes, share, read left to right in one line ---- */

.ci-ranked {
  margin: 0;
  padding: 0;
  list-style: none;
}

@container ci-content (max-width: 520px) {
  .ci-heads,
  .ci-ranked {
    --ci-row-columns: minmax(0, 1fr) 40px 3.75rem 3.25rem;
  }
}

.ci-ranked-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-ranked-row[data-pickable] {
  cursor: pointer;
}
.ci-ranked-row[data-pickable]:hover {
  background: oklch(from var(--ci-fill) l c h / 0.25);
}

.ci-ranked-row__label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-ranked-row__label > span,
.ci-ranked-row__label > .ci-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A drilling row's name is its button: it looks like the name, and shows where focus is. */
.ci-row-name {
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-row-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-row-name:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-ranked-row__label .ci-quote {
  flex-shrink: 0;
}

.ci-ranked-row__value {
  text-align: right;
}
.ci-ranked-row__share {
  text-align: right;
  color: var(--gaia-muted-foreground);
}

/* A bar's lane: the track, and the share of the largest row filled in the series colour. */
.ci-track {
  display: flex;
  overflow: hidden;
  height: 8px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-line) calc(l + 0.04) c h);
}
.ci-track > span {
  height: 100%;
  background: var(--gaia-chart-1);
}
.ci-track > span:last-child {
  border-radius: 0 var(--ci-radius-pill) var(--ci-radius-pill) 0;
}
.ci-track[data-thin] {
  height: 6px;
}

/* Where the running share passes the Pareto mark: a hairline under the row; the caption says it. */
.ci-pareto {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 0;
  border-top: 1px solid oklch(from var(--gaia-foreground) l c h / 0.45);
}

/* ---- the fold: how many are hidden, how many tonnes, what share, and Show ---- */

.ci-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-fold button {
  flex-shrink: 0;
  height: 28px;
  font-size: 14px;
  line-height: 20px;
  padding: 0 8px;
  margin-right: -8px;
  border-radius: 6px;
  font-weight: 600;
  color: var(--gaia-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-fold button:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

/* One line under the content: what is not drawn and why. */
.ci-content-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

/* What a card says when it has nothing to draw: one line at the card's table size. */
.ci-nothing-recorded {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

/* The one sentence a card says when the drawing failed and the figures follow as a table. */
.ci-content-failed {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-content-failed b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ci-segmented button,
  .ci-fold button {
    transition: none;
  }
}

/* ---- the table view of ranked rows: the header over its column, a total row at the foot ---- */

.ci-ranked-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-ranked-table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
}
.ci-ranked-table td {
  height: 28px;
  padding: 0 12px 0 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
}
.ci-ranked-table th:last-child,
.ci-ranked-table td:last-child {
  padding-right: 0;
}
.ci-ranked-table .ci-ranked-table__number {
  text-align: right;
  white-space: nowrap;
}
.ci-ranked-table__name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-ranked-table__name > span:first-child,
.ci-ranked-table__name > .ci-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-ranked-table tr[data-pickable] {
  cursor: pointer;
}
.ci-ranked-table__share {
  width: 13rem;
}
.ci-ranked-table__share .ci-track {
  display: inline-flex;
  width: 8rem;
  margin-right: 8px;
  vertical-align: middle;
}
.ci-ranked-table__share > span:last-child {
  display: inline-block;
  width: 3.5rem;
  color: var(--gaia-muted-foreground);
}
/* The rows a folded table ends with are rows of the list: the cells' 14/20 and tabular digits,
   in the muted colour that tells them from the ranked rows. */
.ci-ranked-table__fold td {
  color: var(--gaia-muted-foreground);
}
.ci-ranked-table__fold .ci-fold {
  border-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}
.ci-ranked-table__total td {
  border-top: 1px solid var(--ci-line);
  border-bottom: 0;
  font-weight: 600;
}

@container ci-content (max-width: 520px) {
  .ci-ranked-table__share {
    width: 3.5rem;
  }
  .ci-ranked-table__share .ci-track {
    display: none;
  }
}

/* The figure card under the pointer keeps its share whole; the name gives way first. */
.ci-figure-card [data-ci='figure-share'] {
  flex-shrink: 0;
}

/* The unit of a chart's values, written once above it rather than on every tick. */
.ci-axis-title {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
}

/* A fallback table's words clamp to two lines like the card's labels; the full text is on hover. */
.ci-figures-table__words {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/public/ci-theme.css */
/* Cozero Intelligence's surfaces, spacing, radius, type and motion, as aliases of Gaia.
 *
 * Two layers only: the soft canvas every CI page sits on, and white raised surfaces (composer,
 * cards, menus, the panel frame) with a 1px hairline. The composer and the insight sheet also lift
 * off the canvas with one soft ambient shadow; nothing else casts one at rest. CI styling reads
 * these names and never a hex value or a legacy channel triplet.
 *
 * The names are defined on :root rather than on .ci-root so a menu or dialog portalled out of a
 * CI screen still resolves them; .ci-root is what puts a screen on the canvas. */

:root {
  --ci-canvas: var(--gaia-background);
  --ci-surface: var(--gaia-card);
  --ci-fill: var(--gaia-muted);
  --ci-line: var(--gaia-border);
  --ci-shadow-lift:
    0 1px 2px oklch(from var(--gaia-foreground) l c h / 0.05),
    0 10px 30px oklch(from var(--gaia-foreground) l c h / 0.06);

  --ci-space-1: 4px;
  --ci-space-2: 8px;
  --ci-space-3: 12px;
  --ci-space-4: 16px;
  --ci-space-5: 24px;
  --ci-space-6: 32px;
  --ci-space-7: 48px;

  --ci-width-chat: 760px;
  --ci-width-list: 1120px;
  --ci-width-sheet: 860px;
  --ci-width-reading: 680px;

  --ci-radius-control: var(--gaia-radius-md);
  --ci-radius-card: var(--gaia-radius-xl);
  --ci-radius-pill: var(--gaia-radius-pill);

  --ci-type-question: var(--gaia-font-weight-normal) 1.875rem/2.25rem var(--gaia-font-sans);
  --ci-type-insight-title: var(--gaia-font-weight-semibold) 1.875rem/2.25rem var(--gaia-font-sans);
  --ci-type-figure: var(--gaia-font-weight-semibold) 1.5rem/2rem var(--gaia-font-sans);
  --ci-type-title: var(--gaia-font-weight-semibold) 1rem/1.5rem var(--gaia-font-sans);
  --ci-type-body: var(--gaia-font-weight-normal) 1rem/1.5rem var(--gaia-font-sans);
  --ci-type-control: var(--gaia-font-weight-normal) 0.875rem/1.25rem var(--gaia-font-sans);
  --ci-type-label: var(--gaia-font-weight-semibold) 0.875rem/1.25rem var(--gaia-font-sans);
  --ci-type-caption: var(--gaia-font-weight-normal) 0.75rem/1rem var(--gaia-font-sans);
  --ci-type-kicker: var(--gaia-font-weight-semibold) 0.625rem/0.875rem var(--gaia-font-sans);

  --ci-ease: cubic-bezier(0.2, 0, 0, 1);
  --ci-duration-press: 120ms;
  --ci-duration-pop: 140ms;
  --ci-duration-open: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ci-duration-press: 0ms;
    --ci-duration-pop: 0ms;
    --ci-duration-open: 0ms;
  }
}

.ci-root {
  background: var(--ci-canvas);
  color: var(--gaia-foreground);
}

.ci-scroll {
  scrollbar-gutter: stable;
}


/* /@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/command-box.css */
/* The command box: one field and grouped results, a fifth of the way down the window. The
   results area holds one height, so results arriving while typing never move the frame. */

.gaia-dialog__viewport.ci-command-viewport {
  align-items: flex-start;
  padding-top: 20vh;
}

.ci-command {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  color: var(--gaia-foreground);
}

.ci-command__search {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ci-line);
}

.ci-command__search-icon {
  position: absolute;
  top: 50%;
  left: var(--ci-space-4);
  color: var(--gaia-muted-foreground);
  transform: translateY(-50%);
  pointer-events: none;
}

.ci-command__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--ci-space-4) 0 48px;
  border: 0;
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-body);
  outline: none;
}

.ci-command__results {
  height: min(368px, 50vh);
  padding: var(--ci-space-1) var(--ci-space-2) var(--ci-space-2);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-command__group {
  height: 28px;
  padding: 10px var(--ci-space-2) 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-command__row {
  display: flex;
  gap: var(--ci-space-3);
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-control);
  text-align: left;
  font: var(--ci-type-control);
}

.ci-command__row[aria-selected='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-command__mark {
  flex-shrink: 0;
  color: var(--gaia-ai);
}

.ci-command__glyph {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-command__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ci-command__muted {
  color: var(--gaia-muted-foreground);
}

.ci-command__meta {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
}

.ci-command__foot {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-4);
  align-items: center;
  height: 36px;
  padding: 0 var(--ci-space-4);
  border-top: 1px solid var(--ci-line);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-command__foot kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 2px;
  padding: 0 4px;
  border: 1px solid var(--ci-line);
  border-radius: 4px;
  font: inherit;
  text-align: center;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/save-as-insight.css */
/* The "Save as insight" action and the popover it opens. The action is the row's one named
   control, a Gaia ghost button with a chevron saying it opens something; the popover is the CI
   floating surface with rows of one height, so nothing moves as the list arrives. Gaia's ghost
   button has no resting background and the app's button reset skips Gaia buttons, so the browser's
   own grey shows through unless it is set here. */

.ci-save-as-insight {
  background: transparent;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-save-as-insight:hover,
.ci-save-as-insight[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-save-as-insight svg {
  color: var(--gaia-muted-foreground);
}

.ci-save-choices {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 6px;
}

.ci-save-choices__start {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ci-line);
}

.ci-save-choices__search {
  flex-shrink: 0;
  padding: 8px 4px 4px;
}

.ci-save-choices__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-save-choices__note {
  margin: 0;
  padding: 8px 10px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

/* A Gaia ghost button laid out as a full-width row: left aligned, as tall as its words need. */
.ci-save-row {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  outline: none;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-save-row:not(:hover):not(:focus-visible) {
  background: transparent;
}

.ci-save-row:hover,
.ci-save-row:focus-visible {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-save-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

.ci-save-row__icon {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-save-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-save-row__note {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

/* A placeholder is a plain block, not a button, so it brings its own flex layout. */
.ci-save-row--waiting {
  display: flex;
  align-items: center;
  cursor: default;
}

.ci-save-row--waiting:hover {
  background: transparent;
}

.ci-save-row__skeleton {
  display: block;
  width: 70%;
  height: 12px;
  border-radius: var(--ci-radius-control);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/entries-table.css */
/* The entries table: two-line rows, five columns that fit the card, never a sideways scroll. */

.ci-entries__core {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
  transition: background var(--ci-duration-press) ease-out;
}
.ci-entries__core:hover {
  background: oklch(from var(--ci-fill) l c h / 0.5);
  color: var(--gaia-foreground);
}

.ci-entries__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-entries__table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
}
.ci-entries__table th:first-child {
  width: 44%;
}
.ci-entries__table th:last-child {
  width: 4.5rem;
}
.ci-entries__table td {
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  vertical-align: top;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-entries__table th:last-child,
.ci-entries__table td:last-child {
  padding-right: 0;
}
.ci-entries__table [data-numeric] {
  text-align: right;
}
.ci-entries__table td:last-child {
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-entries__table td:last-child b {
  font-weight: 600;
}

/* The title line keeps its 20 px when the 22 px quote button sits in it. */
.ci-entries__title {
  display: flex;
  align-items: center;
  height: 20px;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-entries__title b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-entries__table small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A repeated entry: the one amber mark on the card, with its words. */
.ci-entries__repeat {
  flex-shrink: 0;
  padding: 0 7px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--gaia-warning) l c h / 0.13);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--gaia-badge-warning-foreground, var(--gaia-foreground));
  white-space: nowrap;
}

.ci-control-row__caption .ci-entries__repeat {
  margin-left: 8px;
}

/* A calculation that did not complete: its word beside the title, red when it failed. */
.ci-entries__state {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
}
.ci-entries__state[data-state='failed'] {
  color: var(--gaia-destructive);
}

/* In the panel the entry keeps its period and tonnes, or its activity source and tonnes; the
   columns left out are the ones `SECONDARY_COLUMNS` names, and expanded their values join the
   entry's second line. */
@container ci-content (max-width: 520px) {
  .ci-entries__table th:first-child {
    width: 48%;
  }
  .ci-entries__table [data-column='input'],
  .ci-entries__table [data-column='factor'],
  .ci-entries__table [data-column='method'],
  .ci-entries__table [data-column='quality'],
  .ci-entries__table [data-column='import'] {
    display: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/key-figures.css */
/* Key figures: the total leads, one share bar divides it, the parts follow in one row. */

.ci-key-figures__lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.ci-key-figures__total {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-key-figures__total span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__previous {
  text-align: right;
}

.ci-key-figures__change {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ci-key-figures__bar {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: var(--ci-radius-pill);
}

.ci-key-figures__parts {
  display: grid;
  grid-template-columns: repeat(var(--ci-key-figures-count), minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.ci-key-figures__part[data-pickable] {
  cursor: pointer;
}

.ci-key-figures__name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__value {
  margin: 2px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-key-figures__value small {
  margin-left: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 340px) {
  .ci-key-figures__parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }
}


/* /@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. Once the
   person scrolls up, that anchor would carry them down with every line that arrives, so the
   stream holds no anchor until they are back at the bottom. */
.ci-stream {
  overflow-anchor: auto;
}
.ci-stream[data-ci-following='false'] {
  overflow-anchor: none;
}
.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: var(--gaia-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, such as the sources under an
   answer. 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(from var(--ci-fill) l c h / 0.55);
}

.ci-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    oklch(from var(--ci-surface) l c h / 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 var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-canvas) l c h / 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(from var(--gaia-ai) l c h / 0.5);
  background: var(--ci-surface);
}

.ci-file-card[data-status='failed'] {
  border-color: oklch(from var(--gaia-destructive) l c h / 0.45);
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
}

/* One tile standing in for the cards past the second. */
.ci-file-more {
  justify-content: center;
  min-height: 44px;
  color: var(--gaia-muted-foreground);
  cursor: pointer;
}
.ci-file-more:hover {
  border-color: oklch(from var(--gaia-muted-foreground) l c h / 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(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-muted-foreground);
}
.ci-file-card[data-status='failed'] .ci-file-glyph {
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
  color: var(--gaia-destructive);
}
.ci-file-card[data-status='ready'] .ci-file-glyph {
  color: var(--gaia-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: var(--gaia-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-file-state {
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-file-state-failed {
  color: var(--gaia-destructive);
}

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

.ci-file-action {
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--gaia-primary);
  white-space: nowrap;
}
.ci-file-action:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

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

/* ---- 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(from var(--gaia-ai) l c h / 0.18);
  color: var(--gaia-foreground);
}

/* 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(from var(--gaia-ai) l c h / 0.45);
  box-shadow: 0 6px 24px oklch(from var(--gaia-foreground) l c h / 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 var(--ci-line);
  border-radius: 9999px;
  background: var(--ci-surface);
  box-shadow: 0 6px 20px oklch(from var(--gaia-foreground) l c h / 0.14);
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  background: oklch(from var(--ci-fill) l c h / 0.6);
  color: var(--gaia-foreground);
}

.ci-ask-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--ci-line);
  border-radius: 10px;
  background: var(--ci-surface);
  box-shadow: 0 8px 24px oklch(from var(--gaia-foreground) l c h / 0.12);
}

.ci-ask-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--gaia-foreground);
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}
.ci-ask-choice:hover,
.ci-ask-choice:focus-visible {
  background: oklch(from var(--ci-fill) l c h / 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 var(--ci-line);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 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(from var(--gaia-ai) l c h / 0.45);
  background: oklch(from var(--gaia-ai) l c h / 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: var(--gaia-ai);
  font-size: 13px;
}

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

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

/* 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 var(--ci-line);
  border-radius: 12px;
  background: var(--ci-surface);
  box-shadow: 0 14px 40px oklch(from var(--gaia-foreground) l c h / 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(from var(--gaia-ai) l c h / 0.4);
  color: var(--gaia-foreground);
  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: var(--gaia-muted-foreground);
  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: var(--gaia-ai);
  font-size: 12px;
  line-height: 1;
}

/* ---- 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: var(--gaia-muted-foreground);
  font-size: 12.5px;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms,
    color 140ms;
}
.ci-header-action:hover {
  border-color: var(--ci-line);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
}
.ci-header-action[data-ci-active='true'] {
  border-color: var(--ci-line);
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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(from var(--gaia-ai) l c h / 0.14);
  color: var(--gaia-ai);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}

.ci-header-count[aria-hidden='true'] {
  visibility: hidden;
}

/* ---- 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(from var(--gaia-ai) l c h / 0.12);
  color: var(--gaia-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 var(--ci-line);
  background: var(--ci-surface);
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  box-shadow: 0 8px 20px -10px oklch(from var(--gaia-foreground) l c h / 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(from var(--ci-fill) l c h / 0.6);
  color: var(--gaia-muted-foreground);
  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(from var(--gaia-ai) l c h / 0.14);
  color: var(--gaia-ai);
}

.ci-insight-starter-go {
  flex-shrink: 0;
  color: var(--gaia-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;
  }
}

/* An answer a failed run cut off: still readable, visibly not the whole of it. */
.ci-turn[data-ci-incomplete='true'] [data-ci-quotable] {
  color: var(--gaia-muted-foreground);
}

.ci-incomplete-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-pill);
  font: var(--ci-type-caption);
  color: var(--gaia-muted-foreground);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

/* Words only a screen reader gets: out of the flow and clipped to nothing, so a live region can
   change without moving anything on screen. */
.ci-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The steps of a running answer sit at its tail, under what has arrived. */
.ci-live-steps {
  margin: 4px 0 0;
}

/* The quiet line a settled answer keeps, between the answer and its actions. */
.ci-settled-steps {
  margin: 12px 0 0;
}

/* Several cards of one answer: one calm column, the same gap between every two. */
.ci-card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* A card with nothing to draw, said in the answer's flow instead of drawn around nothing. */
.ci-empty-card {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}
.ci-empty-card__title {
  font-weight: 600;
  color: var(--gaia-foreground);
}

/* A table folded to one row: the whole row opens it. */
.ci-folded-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  border-radius: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--gaia-muted-foreground);
  transition: background 120ms ease-out;
}
.ci-folded-card:hover {
  background: oklch(from var(--ci-fill) l c h / 0.5);
}
.ci-folded-card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--gaia-foreground);
}
.ci-folded-card__rows {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Content laid out beside its placeholder until its frame comes: full width, out of the flow,
   invisible, and clipped so it adds nothing to the column's scroll height. */
.ci-reveal {
  position: relative;
}
.ci-reveal:has(> [data-ci-waiting]) {
  overflow: clip;
}
.ci-reveal > [data-ci-waiting] {
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
}

/* An answer whose data has moved since: an amber bar on top, the answer under it faded but still
   readable and selectable. The bar and the action row stay at full strength. */
.ci-stale-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--gaia-warning) l c h / 0.12);
  color: var(--gaia-badge-warning-foreground);
  font-size: 14px;
  line-height: 20px;
}
.ci-stale-bar__icon {
  flex-shrink: 0;
  color: var(--gaia-warning);
}
.ci-stale-bar__text {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.ci-stale-bar__text strong {
  font-weight: 600;
}
.ci-stale-bar__action {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--gaia-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-stale-bar__action:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-turn[data-ci-stale='true'] > :not(.ci-stale-slot, .ci-answer-row-wrap) {
  opacity: 0.6;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/period-bridge.css */
/* A period bridge as a horizontal waterfall: name, lane, signed tonnes, a tag for units that only
   one period holds. Rises are filled, falls hollow, totals solid; one colour throughout. */

.ci-bridge {
  --ci-row-columns: minmax(0, 10rem) minmax(80px, 1fr) 4.5rem 7.5rem;
  --ci-bridge-row: 22px;
}

/* In a narrow card the tag column goes: a short tag sits beside the name instead, so each unit
   with no later data stays marked and every row keeps one line. */
@container ci-content (max-width: 520px) {
  .ci-bridge__rows,
  .ci-bridge__axis {
    --ci-row-columns: minmax(0, 1fr) 18% 4rem 0;
  }
  .ci-bridge__tag {
    display: none;
  }
}

.ci-bridge__split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__split > b {
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-bridge__split b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-bridge__why {
  flex-basis: 100%;
}

.ci-bridge__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-bridge__row,
.ci-bridge__axis {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
}
.ci-bridge__row {
  min-height: var(--ci-bridge-row);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__row[data-kind='total'] {
  font-weight: 600;
}

.ci-bridge__lane {
  position: relative;
  align-self: stretch;
  border-left: 1px solid var(--ci-line);
}
/* Bars sit on the row's first line, so a wrapped name never stretches them. */
.ci-bridge__bar {
  position: absolute;
  top: 6px;
  height: calc(var(--ci-bridge-row) - 12px);
  border-radius: 2px;
}
.ci-bridge__bar[data-kind='total'] {
  top: 4px;
  height: calc(var(--ci-bridge-row) - 8px);
  background: var(--gaia-foreground);
}
.ci-bridge__row:first-child .ci-bridge__bar[data-kind='total'] {
  background: oklch(from var(--ci-line) calc(l - 0.08) c h);
}
.ci-bridge__bar[data-kind='rise'] {
  background: var(--gaia-chart-1);
}
.ci-bridge__bar[data-kind='fall'] {
  border: 1.5px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}

.ci-bridge__value {
  text-align: right;
  white-space: nowrap;
}

.ci-bridge__mark {
  flex-shrink: 0;
}

.ci-bridge__tag span,
.ci-bridge__mark {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 0 7px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-fill) l c h / 0.7);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-bridge__axis {
  height: 20px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__ticks {
  position: relative;
  align-self: stretch;
  border-top: 1px solid var(--ci-line);
}
.ci-bridge__ticks span {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
}
.ci-bridge__ticks span:first-child {
  transform: none;
}
.ci-bridge__ticks span:last-child {
  transform: translateX(-100%);
}
.ci-bridge__unit {
  text-align: right;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/floating-menu.css */
/* Popovers and menus: white on the page, a hairline, the one menu shadow, above everything but
   dialogs. The outer box is positioned by floating-ui; the inner one carries the open transition,
   so the two transforms never fight. */

.ci-floating {
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 0;
  outline: none;
}

.ci-floating__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  overflow: auto;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  transition-timing-function: var(--ci-ease);
}

.ci-menu {
  min-width: 220px;
  padding: 6px;
}

.ci-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  outline: none;
  cursor: pointer;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-menu__item[data-ci-active='true'],
.ci-menu__item[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-menu__item[data-ci-destructive='true'],
.ci-menu__item[data-ci-destructive='true'] .ci-menu__icon {
  color: var(--gaia-destructive);
}

.ci-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ci-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

.ci-menu__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-menu__item[aria-checked='true'] .ci-menu__icon {
  color: var(--gaia-foreground);
}

.ci-menu__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ci-menu__label {
  flex: 1;
  min-width: 0;
}

.ci-menu__description {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-menu__value {
  color: var(--gaia-muted-foreground);
}

.ci-menu__chevron {
  align-self: center;
  color: var(--gaia-muted-foreground);
}

.ci-menu__heading {
  padding: 8px 10px 4px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-menu__separator {
  height: 1px;
  margin: 6px 4px;
  background: var(--ci-line);
}

/* A tooltip: one short label in navy on the page's text colour, above everything but dialogs. */
.ci-tooltip {
  z-index: 60;
  pointer-events: none;
}

.ci-tooltip__body {
  padding: 4px 8px;
  border-radius: var(--ci-radius-control);
  background: var(--gaia-foreground);
  color: var(--gaia-background);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  transition-timing-function: var(--ci-ease);
}

/* Icon-only controls: 32 px in rows and headers, 28 px inside a card. Quiet until hovered. */
.ci-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-muted-foreground);
  background: transparent;
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}
.ci-icon-button[data-size='card'] {
  width: 28px;
  height: 28px;
}
.ci-icon-button:hover:not(:disabled) {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}
.ci-icon-button[aria-pressed='true'] {
  color: var(--gaia-foreground);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-icon-button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* /@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/features/carbon-intelligence/chat/components/ci-list-page.css */
/* A list page: the header row stays, the column under it scrolls. The column is as wide as a list
   gets and centred on the page, and the header's title and actions line up with its edges; where
   the page is narrower than that, the column takes the page's width inside the usual gutters. The
   assistant opens in a column of its own beside the page, so the page simply narrows. */

.ci-list-page {
  /* Half of what the list column leaves, never less than the page's own gutter. */
  --ci-list-page-side: max(var(--ci-space-6), calc((100% - var(--ci-width-list)) / 2));
  --ci-list-page-start: max(
    calc(var(--ci-space-6) + var(--shell-header-inset, 0px)),
    calc((100% - var(--ci-width-list)) / 2)
  );

  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ci-list-page > .ci-page-header {
  padding-right: var(--ci-list-page-side);
  padding-left: var(--ci-list-page-start);
}

.ci-list-page__scroll {
  flex: 1;
  min-height: 0;
  padding: 0 var(--ci-list-page-side) 40px var(--ci-list-page-start);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-list-page__column {
  max-width: var(--ci-width-list);
  margin: 0 auto;
}

/* The filters first, the search at the row's end: the one order of every list page's toolbar.
   The row never wraps. The search takes the room the filters leave and folds into a button when
   that room runs out (see ci-list-toolbar.css); while it is open in that state it takes the row and
   the filters step aside. Filters that still do not fit scroll sideways on their one row. */
.ci-list-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ci-space-4);
  align-items: center;
  min-height: 40px;
  margin-bottom: var(--ci-space-5);
}

.ci-list-toolbar > .ci-segmented {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Filters that do not fit scroll sideways on their one row, faded at the edge they run past: the
   fade follows the row's own scroll, so a row that fits, and so cannot scroll, shows none. */
@supports (animation-timeline: scroll()) {
  .ci-list-toolbar > .ci-segmented {
    animation: ci-list-filters-fade linear both;
    animation-timeline: scroll(self inline);
  }
}

@keyframes ci-list-filters-fade {
  from {
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  to {
    mask-image: linear-gradient(to right, transparent, #000 32px);
  }
}

.ci-list-toolbar:has(> .ci-search-room[data-open]) > .ci-segmented {
  display: none;
}

.ci-list-group + .ci-list-group {
  margin-top: var(--ci-space-5);
}

.ci-list-group__label {
  display: block;
  margin: 0 0 var(--ci-space-2) 2px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-list-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  list-style: none;
}

/* One row: a glyph, two lines of text, when, and the row's menu. Every row is the same
   height, whatever it holds, so a list never jumps as rows change. */
.ci-list-row {
  position: relative;
  display: flex;
  gap: var(--ci-space-3);
  align-items: center;
  height: 64px;
  padding: 0 var(--ci-space-2) 0 var(--ci-space-4);
  transition: background var(--ci-duration-press) ease-out;
}

.ci-list-row + .ci-list-row {
  border-top: 1px solid var(--ci-line);
}

.ci-list-row:hover,
.ci-list-row:focus-within,
.ci-list-row[data-open='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.45);
}

/* The part of the row that opens it: the glyph, the text and the time, edge to edge. */
.ci-list-row__open {
  display: flex;
  flex: 1;
  gap: var(--ci-space-3);
  align-items: center;
  align-self: stretch;
  min-width: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
  outline: none;
}

.ci-list-row__open:focus-visible {
  border-radius: var(--ci-radius-control);
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

/* What the row stands for, as one quiet 16px line glyph with no tile behind it. */
.ci-list-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-list-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ci-list-row__title {
  display: flex;
  gap: var(--ci-space-2);
  align-items: center;
  min-width: 0;
  font: var(--ci-type-label);
}

.ci-list-row__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-list-row__line {
  min-width: 0;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-list-row__line-lead {
  color: var(--gaia-foreground);
}

/* A short word beside the title: "Shared with you", "Archived". */
.ci-list-badge {
  flex-shrink: 0;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-fill) l c h / 0.8);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  line-height: 20px;
}

/* When: the reader's own clock, so it is written once the page is live; its place is held. */
.ci-list-row__when {
  flex-shrink: 0;
  min-width: 56px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The row's menu: there on hover, on keyboard focus and while open, its place always kept. */
.ci-list-row__menu {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  opacity: 0;
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-list-row:hover .ci-list-row__menu,
.ci-list-row:focus-within .ci-list-row__menu,
.ci-list-row[data-open='true'] .ci-list-row__menu {
  opacity: 1;
}

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

/* ---- while the list is read ---- */

.ci-list-skeleton__label {
  width: 64px;
  height: 16px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__glyph {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.ci-list-skeleton__lines > span {
  height: 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__row {
  animation: ci-list-skeleton 1.4s linear infinite;
}

@keyframes ci-list-skeleton {
  50% {
    opacity: 0.55;
  }
}

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

/* A row with nothing to manage keeps the row's right edge at the card's padding. */
.ci-list-row[data-menu='none'] {
  padding-right: var(--ci-space-4);
}


/* /@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/features/carbon-intelligence/insights/sections/component-picker.css */
/* Adding or changing a chart: the kinds as a quiet list on the left (a name and one line each),
   the chosen kind's settings in the middle, its live preview on the right. Hairlines between the
   three, no boxes inside boxes, one blue button. */

.ci-picker {
  display: grid;
  grid-template-columns: 248px 272px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: calc(100% + 40px);
  margin: -20px;
}

.ci-picker__kinds,
.ci-picker__settings {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border-right: 1px solid var(--ci-line);
}

.ci-picker__kinds {
  gap: 2px;
  padding: 12px 8px;
}

.ci-picker__kind {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--ci-radius-control);
  background: transparent;
  color: var(--gaia-foreground);
  text-align: left;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-picker__kind:hover {
  background: oklch(from var(--ci-fill) l c h / 0.5);
}

.ci-picker__kind[aria-selected='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.85);
}

.ci-picker__kind:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: -2px;
}

.ci-picker__kind-name {
  font: var(--ci-type-label);
}

.ci-picker__kind-line {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-picker__settings {
  gap: var(--ci-space-4);
  padding: 16px;
}

.ci-picker__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ci-picker__field > span,
.ci-picker__preview-head > span:first-child {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-picker__preview {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
  min-width: 0;
  min-height: 0;
  padding: 16px 20px;
  background: var(--ci-canvas);
}

.ci-picker__preview-head {
  display: flex;
  gap: var(--ci-space-2);
  align-items: center;
  height: 20px;
}

.ci-picker__preview-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ci-picker__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  padding: 0 24px;
  border: 1px dashed var(--ci-line);
  border-radius: var(--ci-radius-card);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  text-align: center;
}

.ci-picker__note {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-picker__error {
  margin: 0;
  color: var(--gaia-destructive);
  font: var(--ci-type-control);
}

.ci-picker__footer {
  display: flex;
  flex: 1;
  gap: var(--ci-space-2);
  align-items: center;
  justify-content: flex-end;
}

.ci-picker__footer > .ci-picker__error {
  margin-right: auto;
}

/* Gaia's ghost button carries no resting background and the app's button reset skips Gaia
   buttons, so the browser's grey shows unless it is cleared here. */
.ci-picker__footer button[data-variant='ghost']:not(:hover) {
  background: transparent;
}

/* The same width whether or not it is working; the spinner sits beside the word. */
.ci-picker__confirm {
  min-width: 112px;
}

.ci-picker__spinner {
  animation: ci-picker-spin 0.9s linear infinite;
}

@keyframes ci-picker-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A filter value in the settings: a small pill, caption type. */
.ci-dimension-chip {
  font: var(--ci-type-caption);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/import-timeline.css */
/* The import timeline: the period's months as one strip with each import a bar at its day, then
   the imports as one-line rows. Every position is a share of the width, so nothing scrolls. */

.ci-imports__strip {
  margin: 0 0 8px;
}
.ci-imports__plot {
  position: relative;
  height: 36px;
  border-bottom: 1px solid var(--ci-line);
}
.ci-imports__month {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid oklch(from var(--ci-line) l c h / 0.6);
}
.ci-imports__mark {
  position: absolute;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--gaia-chart-1);
}
.ci-imports__mark[data-empty] {
  bottom: 2px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border: 1.25px solid var(--gaia-muted-foreground);
  border-radius: 50%;
  background: var(--ci-surface);
}
.ci-imports__mark[data-failed] {
  background: var(--gaia-destructive);
}
.ci-imports__mark[data-failed][data-empty] {
  border-color: var(--gaia-destructive);
  background: var(--ci-surface);
}
.ci-imports__heads {
  position: relative;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-imports__heads span {
  position: absolute;
  top: 0;
  padding-left: 4px;
  white-space: nowrap;
}

.ci-imports {
  --ci-imports-columns: minmax(0, 1fr) 4.5rem 12rem 3.5rem;
}
/* The content is its own container, so the narrower columns are set on its rows. */
@container ci-content (max-width: 520px) {
  .ci-imports__row {
    --ci-imports-columns: minmax(0, 1fr) 4rem 3rem;
  }
  .ci-imports__row .ci-track {
    display: none;
  }
}

.ci-imports__columns {
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-imports__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-imports__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ci-imports-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-imports__day {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: right;
  white-space: nowrap;
}
.ci-imports__count {
  text-align: right;
}
.ci-imports__failed {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--gaia-destructive);
}


/* /@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 */
/* One insight: a bar on the canvas, then the document as white paper — an 860px sheet with a
   hairline, the card radius and the soft lift the composer has, centred on the canvas with room
   around it. Words keep a reading width of 680px inside it; a chart or a row of columns may use
   the sheet's whole inner width. The assistant opens in a column of its own beside the page, so
   the page narrows and the sheet stays centred in what is left. */

.ci-insight-page {
  /* Holds the suggestion pill's dock over the foot of the scroll area. */
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ci-insight-topbar {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-4);
  align-items: center;
  height: 64px;
  padding: 0 32px 0 calc(32px + var(--shell-header-inset, 0px));
}

.ci-insight-crumbs {
  display: flex;
  flex: 1;
  gap: var(--ci-space-2);
  align-items: center;
  min-width: 0;
  font: var(--ci-type-control);
}

.ci-insight-crumbs__back {
  flex-shrink: 0;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-muted-foreground);
  text-decoration: none;
  transition: color var(--ci-duration-press) ease-out;
}

.ci-insight-crumbs__back:hover {
  color: var(--gaia-foreground);
}

.ci-insight-crumbs__back:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}

.ci-insight-crumbs__divider {
  color: var(--gaia-muted-foreground);
}

.ci-insight-crumbs__here {
  overflow: hidden;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-insight-topbar__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-1);
  align-items: center;
}

/* A secondary action: icon and label, no border, navy text; a quiet fill on hover and while
   what it opens is open. */
.ci-insight-action {
  display: inline-flex;
  gap: var(--ci-space-2);
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--ci-radius-pill);
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-insight-action > svg {
  color: var(--gaia-muted-foreground);
}

.ci-insight-action > .ci-insight-action__ai {
  color: var(--gaia-ai);
}

.ci-insight-action:hover,
.ci-insight-action[aria-pressed='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-insight-action:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}

.ci-insight-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 48px;
}

.ci-insight-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ci-width-sheet);
  margin: 24px auto 0;
  /* The room below the last block belongs to the writing (see .ci-insight-editor), so a click
     there continues the document. */
  padding: 48px 40px 0;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--ci-shadow-lift);
}

/* The reading column: words, the title and its line. */
.ci-insight-sheet__head,
.ci-insight-lines,
.ci-insight-editor > :not(:has(.slate-ci_view, .slate-column_group)) {
  max-width: var(--ci-width-reading);
  margin-right: auto;
  margin-left: auto;
}

.ci-insight-sheet__head {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
  margin-bottom: var(--ci-space-5);
}

/* The title and the field it turns into share one box, so renaming moves nothing. */
.ci-insight-title,
.ci-insight-title-holder {
  box-sizing: border-box;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--ci-radius-control);
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-insight-title);
  outline: none;
  transition: background var(--ci-duration-press) ease-out;
}

/* While a new name is suggested, the current name holds the heading's place unseen and the
   suggestion hangs from the same bottom edge, so a name that wraps grows upward into the
   sheet's padding instead of pushing the line and the document down. */
.ci-insight-title-slot {
  position: relative;
}

.ci-insight-title-holder {
  visibility: hidden;
}

.ci-insight-title--suggested {
  position: absolute;
  bottom: 0;
  left: 0;
}

.ci-insight-title[data-from-text] {
  color: var(--gaia-muted-foreground);
}

.ci-insight-title[data-editable] {
  cursor: text;
}

.ci-insight-title[data-editable]:hover,
.ci-insight-title--field {
  background: oklch(from var(--ci-fill) l c h / 0.55);
}

.ci-insight-title:focus-visible,
.ci-insight-title--field:focus {
  box-shadow: 0 0 0 2px var(--gaia-ring);
}

.ci-insight-meta {
  margin: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-insight-meta > span {
  font: inherit;
  color: inherit;
}

/* A document that opens by repeating its title shows the title once, in the sheet's head. */
.ci-insight-editor[data-title-repeated] > :first-child {
  display: none;
}

/* The editor sits in the sheet and scrolls with the page rather than on its own. */
.ci-insight-editor-frame {
  height: auto;
  overflow: visible;
}

/* 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. */
.ci-insight-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: ci-insight-lines 1.4s linear infinite;
}

.ci-insight-lines > span {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: oklch(from var(--ci-fill) l c h / 0.75);
}

.ci-insight-lines > .ci-insight-lines__block {
  height: 160px;
  margin-top: 12px;
  border-radius: var(--ci-radius-card);
}

@keyframes ci-insight-lines {
  50% {
    opacity: 0.6;
  }
}

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

.ci-insight-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ci-insight-action:disabled:hover {
  background: transparent;
}

/* The document's first block sits right under the title's line, whatever margin it carries. */
.ci-insight-editor > :first-child > .slate-blockWrapper > [data-slate-node],
.ci-insight-editor[data-title-repeated] > :nth-child(2) > .slate-blockWrapper > [data-slate-node] {
  margin-top: 0;
}

/* A chart or table whose numbers are on their way: its card's space, quietly filled. */
.ci-view-loading {
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: oklch(from var(--ci-fill) l c h / 0.35);
  animation: ci-insight-lines 1.4s linear infinite;
}

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

/* The lines a block adds under or in place of its card, on the caption and control sizes. */

.ci-insight-block__note {
  margin: 4px 0 0;
  font: var(--ci-type-caption);
  color: var(--gaia-muted-foreground);
}

.ci-insight-block__note--stale {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ci-insight-block__unreadable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font: var(--ci-type-control);
  color: var(--gaia-muted-foreground);
}

.ci-insight-block__unreadable p {
  margin: 0;
}

.ci-insight-block__unreadable-actions {
  display: flex;
  gap: 8px;
}

/* The tabs a suggestion hangs on a moved or restyled block straddle its top edge, and the outline
   and tint of the current change reach past its sides; the editor clips at its own box, so it
   holds room for them, half a tab above and below and 8px at each side, taken back with the same
   margin and a wider box so no text moves. */
.ci-insight-editor {
  --ci-suggestion-note-height: 1rem;
  box-sizing: border-box;
  width: calc(100% + 16px);
  margin: calc(var(--ci-suggestion-note-height) / -2) -8px;
  padding: calc(var(--ci-suggestion-note-height) / 2) 8px;
}

/* The document's type: body text 16/26 in the reading column, with paragraphs, list items and
   quotes on one rhythm (4px above and below each line block), and headings on the DESIGN scale. */
/* Room below the last block, so the caret is never at the sheet's very edge; the lines shown
   while the document loads keep the same room. */
.ci-insight-editor,
.ci-insight-lines {
  padding-bottom: 64px;
}

.ci-insight-editor {
  color: var(--gaia-foreground);
  font-size: 16px;
  line-height: 26px;
}

.ci-insight-editor .slate-p,
.ci-insight-editor .slate-blockquote {
  font-size: 16px;
  line-height: 26px;
}

.ci-insight-editor .slate-h1,
.ci-insight-editor .slate-h2,
.ci-insight-editor .slate-h3 {
  margin-bottom: 4px;
  padding: 0;
  font-weight: var(--gaia-font-weight-semibold);
  letter-spacing: 0;
}

.ci-insight-editor .slate-h1 {
  margin-top: 24px;
  font-size: 24px;
  line-height: 32px;
}

.ci-insight-editor .slate-h2 {
  margin-top: 20px;
  font-size: 20px;
  line-height: 28px;
}

.ci-insight-editor .slate-h3 {
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
}

/* A chart or table keeps the card's own type, as it has in the chat. */
.ci-insight-editor .slate-ci_view {
  line-height: normal;
}


/* /@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-md: 0.375rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --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/carbon-intelligence/chat/components/library/comparison.css */
/* A comparison: the two totals lead, then one row per unit with a dot for each period. */

.ci-comparison__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.ci-comparison__totals small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__totals b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-comparison__arrow {
  padding-bottom: 2px;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__change {
  padding-bottom: 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.ci-comparison__rows {
  --ci-row-columns: minmax(0, 11rem) minmax(64px, 1fr) 8.5rem 4.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ci-line);
}

@container ci-content (max-width: 520px) {
  .ci-comparison__rows {
    --ci-row-columns: minmax(0, 1fr) 7.5rem 4rem;
  }
  .ci-comparison__rows .ci-dumbbell {
    display: none;
  }
}

.ci-comparison__row {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}

.ci-comparison__values {
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__values i {
  font-style: normal;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
}

.ci-comparison__difference {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* The two dots of one unit on one scale, joined by a line when both periods hold tonnes. */
.ci-dumbbell {
  position: relative;
  height: 12px;
  margin: 0 6px;
  border-top: 1px solid transparent;
  background: linear-gradient(var(--ci-line), var(--ci-line)) center / 100% 1px no-repeat;
}
.ci-dumbbell__span {
  position: absolute;
  top: 4.5px;
  height: 3px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-line) calc(l - 0.08) c h);
}
.ci-dumbbell__first,
.ci-dumbbell__second {
  position: absolute;
  top: 1px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
}
.ci-dumbbell__first {
  border: 1.5px solid var(--gaia-muted-foreground);
  background: var(--ci-surface);
}
.ci-dumbbell__second {
  background: var(--gaia-foreground);
}


/* /@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/carbon-intelligence/chat/sections/assistant-panel.css */
/* The assistant beside a page: a column of its own at the window's right edge, and the page
   narrows to make room for it, so nothing on the page sits under it. The column widens from the
   right edge as it opens and the panel inside keeps its width, so its contents never reflow while
   it moves. Its width and whether it fits beside the page come from `panelFit`. White frame and header, the canvas inside, the one shadow Cozero Intelligence gives a
   raised surface. */

.ci-panel-dock {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  height: 100%;
  overflow: hidden;
}

/* On a window too narrow for the page and the panel side by side, the panel floats over the
   page's right edge instead, so the page keeps its width. */
.ci-panel-dock[data-placement='over'] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.ci-panel {
  position: relative;
  flex-shrink: 0;
  margin: var(--ci-space-3) var(--ci-space-3) var(--ci-space-3) 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
}

.ci-panel__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 6px;
  cursor: col-resize;
}

.ci-panel__head {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-2);
  align-items: center;
  height: 52px;
  padding: 0 var(--ci-space-2) 0 var(--ci-space-4);
  border-bottom: 1px solid var(--ci-line);
}

.ci-panel__mark {
  flex-shrink: 0;
  color: var(--gaia-ai);
}

.ci-panel__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ci-panel__page {
  color: var(--gaia-muted-foreground);
  font-weight: var(--gaia-font-weight-normal);
}

.ci-panel__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Before the first question. */

.ci-panel-welcome {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ci-space-4);
  padding-bottom: var(--ci-space-2);
}

.ci-panel-welcome__where {
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-title);
}

.ci-panel-welcome__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
}

.ci-panel-welcome__suggestion {
  display: flex;
  gap: var(--ci-space-3);
  align-items: flex-start;
  width: 100%;
  padding: 10px var(--ci-space-3);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-panel-welcome__suggestion:hover:not(:disabled) {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.24);
}

.ci-panel-welcome__suggestion:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

.ci-panel-welcome__suggestion:disabled {
  opacity: 0.4;
  cursor: default;
}

.ci-panel-welcome__mark {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gaia-ai);
}

.ci-panel-welcome__history {
  display: flex;
  margin-top: auto;
  gap: var(--ci-space-2);
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--ci-space-2);
  border-top: 1px solid var(--ci-line);
  border-radius: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  transition: color var(--ci-duration-press) ease-out;
}

.ci-panel-welcome__history:hover {
  color: var(--gaia-foreground);
}

.ci-panel-welcome__history:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: -2px;
}

.ci-panel-welcome__history-label {
  flex: 1;
  text-align: left;
}

.ci-panel-welcome__count {
  font-variant-numeric: tabular-nums;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/coverage-grid.css */
/* The coverage grid: a label, a month strip and the tonnes per row, read left to right. The strip
   keeps one slot per month at any width, so 12 or 36 months fit without a sideways scroll. */

.ci-coverage {
  --ci-coverage-columns: minmax(0, 1fr) 180px 4.5rem;
}

/* The content is its own container, so the narrower columns are set on its rows. */
@container ci-content (max-width: 520px) {
  .ci-coverage__heads,
  .ci-coverage__row {
    --ci-coverage-columns: minmax(0, 1fr) 120px 3.5rem;
  }
}

.ci-coverage__heads,
.ci-coverage__row {
  display: grid;
  grid-template-columns: var(--ci-coverage-columns);
  column-gap: 16px;
  align-items: center;
}

.ci-coverage__heads {
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-coverage__heads > span:last-child {
  text-align: right;
}
.ci-coverage__months {
  display: flex;
}
.ci-coverage__months > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  text-align: center;
  white-space: nowrap;
}

.ci-coverage__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-coverage__row {
  min-height: 28px;
  padding: 4px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-coverage__row[data-ci='coverage-group'] {
  min-height: 48px;
}

.ci-coverage__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ci-coverage__label > span,
.ci-coverage__label > button,
.ci-coverage__label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-coverage__label > button {
  text-align: left;
  border-radius: 4px;
}
.ci-coverage__label > button:hover {
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-coverage__label > button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-coverage__pattern {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ci-coverage__pattern b {
  font-weight: 600;
}
.ci-coverage__pattern span,
.ci-coverage__label small {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-coverage__value {
  text-align: right;
}

/* One month strip: an equal slot per month, a bar sized by its tonnes, a gap a low dash. */
.ci-strip {
  display: flex;
  align-items: flex-end;
  height: 22px;
}
.ci-strip__slot {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 100%;
}
.ci-strip__bar {
  width: 72%;
  min-width: 1px;
  border-radius: 2px;
  background: var(--gaia-chart-1);
}
.ci-strip__bar[data-negative] {
  border: 1.25px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}
.ci-strip__bar[data-gap] {
  border-radius: 1.5px;
}
.ci-strip__bar[data-gap='due'],
.ci-coverage__swatch[data-gap='due'] {
  background: oklch(from var(--gaia-warning) l c h / 0.8);
}
.ci-strip__bar[data-gap='none'],
.ci-coverage__swatch[data-gap='none'] {
  background: var(--ci-line);
}

.ci-coverage__swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin: 0 4px 0 0;
  border-radius: 1.5px;
  vertical-align: middle;
}


/* /@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;
}

/* A dialog that holds its top: a fixed way down the window, growing downward as its content
   does, and never past the window's bottom margin. */
.gaia-dialog__viewport.control-modal-hold-top {
  --control-modal-top: 14vh;
  align-items: flex-start;
  padding-top: var(--control-modal-top);
}
.control-modal-hold-top .gaia-dialog__surface {
  max-height: calc(100vh - var(--control-modal-top) - 24px);
}

.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 a Gaia token, 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)),
      var(--gaia-foreground),
      transparent calc(50% + var(--ci-shimmer-spread))
    ),
    linear-gradient(var(--gaia-muted-foreground), var(--gaia-muted-foreground));
  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: var(--gaia-foreground);
    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: a 16px mark column, then the sentence and its result as one
   run of text. Status shows in the mark and in contrast; only a failed step takes a colour. */
.ci-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-step-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
}

.ci-step-complete .ci-step-mark {
  color: var(--gaia-success);
}

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

.ci-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  border: 1.5px solid var(--gaia-muted-foreground);
}

@keyframes ci-step-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(from var(--gaia-ai) l c h / 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px oklch(from var(--gaia-ai) l c h / 0);
  }
}

.ci-step-active .ci-step-dot {
  border: none;
  background: var(--gaia-ai);
  animation: ci-step-pulse 1.4s ease-in-out infinite;
}

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

.ci-step-text {
  min-width: 0;
}

.ci-step-active .ci-step-label {
  color: var(--gaia-foreground);
}

.ci-step-result {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ci-step-active .ci-step-dot {
    animation: none;
  }
}


/* /@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/features/carbon-intelligence/chat/components/library/factor-table.css */
/* The factor table: a stored label of at most two lines, its unit and year beside it, the entries
   that use it and its share as a bar. Laid out to the card's width, never a sideways scroll. */

.ci-factors__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-factors__table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
  white-space: nowrap;
}
.ci-factors__table th:nth-last-child(2) {
  width: 4rem;
}
.ci-factors__table th[data-column='detail'] {
  width: 8.5rem;
}
.ci-factors__table th[data-column='share'] {
  width: 12rem;
}
.ci-factors__table td {
  height: 40px;
  padding: 3px 12px 3px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  vertical-align: middle;
}
.ci-factors__table th:last-child,
.ci-factors__table td:last-child {
  padding-right: 0;
}
.ci-factors__table [data-numeric] {
  text-align: right;
}

.ci-factors__name {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ci-factors__name > span:first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 20px;
}

/* A factor's name is its source's whole description: its tooltip wraps instead of running on. */
body:has(.ci-factors__name:hover) .ci-tooltip__body {
  max-width: 360px;
  white-space: normal;
}

.ci-factors__table td[data-column='detail'] {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-factors__table td[data-column='detail'] > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-factors__share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ci-factors__share .ci-track {
  flex: 1 1 auto;
}
.ci-factors__share > span:last-child {
  flex-shrink: 0;
  width: 3rem;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 520px) {
  .ci-factors__table [data-column='detail'] {
    display: none;
  }
  .ci-factors__table th[data-column='share'] {
    width: 3.75rem;
  }
  .ci-factors__share .ci-track,
  .ci-factors__table th [data-wide] {
    display: none;
  }
}

/* The years beside a factor's unit: a caption, never the browser's smaller size. */
.ci-factors small {
  font-size: 12px;
  line-height: 16px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/components/suggestion-plugin.css */
/* A suggestion is drawn in the text, never around it: no frame, no padding, no margin, so the
   page keeps its shape and only the words the suggestion adds or drops take room. Tints reach
   past the text sideways with shadows, which paint without moving anything; not up or down, so
   two suggested blocks one under the other never paint over each other. */

.ci-suggestion {
  --ci-suggestion-tint: transparent;
  position: relative;
  border-radius: 4px;
  background: var(--ci-suggestion-tint);
  box-shadow:
    -6px 0 0 var(--ci-suggestion-tint),
    6px 0 0 var(--ci-suggestion-tint);
  transition: outline-color var(--ci-duration-press) ease-out;
}

/* The change the pill has stepped to, a block or the insight's name. An outline paints outside
   the box and moves nothing. */
.ci-suggestion[data-current],
.ci-insight-title[data-current] {
  outline: 1.5px solid oklch(from var(--gaia-ring) l c h / 0.4);
  outline-offset: 3px;
}

.ci-suggestion[data-kind='insert'] {
  --ci-suggestion-tint: oklch(from var(--gaia-success) l c h / 0.12);
  color: var(--gaia-badge-success-foreground);
}

.ci-suggestion[data-kind='remove'] {
  --ci-suggestion-tint: oklch(from var(--gaia-destructive) l c h / 0.1);
  color: var(--gaia-badge-destructive-foreground);
  text-decoration: line-through;
  user-select: none;
}

.ci-suggestion[data-kind='remove'] .slate-ci_view {
  opacity: 0.5;
}

/* What a change says when its words do not show it: a move, a new kind of block. A small tab
   straddling the block's top edge at its right, so it stays inside the editor's own width at any
   page width, hangs over the gap between two blocks and takes no room from either. The editor
   keeps half its height as clip room above and below (--ci-suggestion-note-height). */
.ci-suggestion-note {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  height: var(--ci-suggestion-note-height);
  padding: 0 6px;
  border-radius: var(--ci-radius-pill);
  background: var(--ci-fill);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

/* Words a rewrite puts in, and words it takes out, in their place in the sentence. Added words
   can fall into two neighbouring leaves, so they carry no rounded corner that would notch them. */
.ci-suggested-added {
  background: oklch(from var(--gaia-success) l c h / 0.12);
  color: var(--gaia-badge-success-foreground);
}

.ci-suggested-removed {
  border-radius: 3px;
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
  color: var(--gaia-badge-destructive-foreground);
  text-decoration: line-through;
  user-select: none;
}

/* An old word followed straight by its new one reads as two words, not one run-on: in a block the
   old words sit inside the leaf of the new ones, in the name they are the word before. */
.ci-suggested-added > .ci-suggested-removed:first-child {
  margin-inline-end: 0.25em;
}

.ci-suggested-removed + .ci-suggested-added {
  margin-inline-start: 0.25em;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/composer.css */
/* The composer's two shapes are one grid with two sets of areas. The same elements move between
   them, so the change reads as the box growing, never as a second box replacing the first. */

.ci-composer {
  position: relative;
  display: grid;
  grid-template-areas: 'plus input units period send';
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 2px;
  padding: 7px;
  border: 1px solid var(--ci-line);
  background: var(--ci-surface);
  box-shadow: var(--ci-shadow-lift);
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-composer[data-expanded] {
  grid-template-areas:
    'files files files files files files files'
    'input input input input input input input'
    'plus units period effort scope usage send';
  /* The choices shrink and truncate before send is pushed out of a narrow frame. */
  grid-template-columns:
    auto minmax(0, max-content) minmax(0, max-content) minmax(0, max-content)
    minmax(0, max-content) minmax(0, 1fr) auto;
  padding: 10px 10px 8px;
}

.ci-composer:focus-within {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.22);
}

.ci-composer[data-dragging] {
  border-color: var(--gaia-ai);
}

.ci-composer__files {
  grid-area: files;
  margin: -2px -2px 8px;
}

.ci-composer__input {
  grid-area: input;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ci-composer[data-expanded] .ci-composer__input {
  margin-bottom: 6px;
}

.ci-composer__textarea {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 152px;
  padding: 6px 6px;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-body);
}

.ci-composer[data-expanded] .ci-composer__textarea {
  min-height: 60px;
  padding: 4px 6px;
}

.ci-composer__textarea::placeholder {
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A suggested next question wraps, so it can be read whole in a narrow box. */
.ci-composer__textarea[data-ci-suggestion]::placeholder {
  white-space: normal;
}

.ci-composer__textarea:disabled {
  cursor: not-allowed;
}

/* A box that cannot be asked from: a quiet fill instead of paper, and only its reason in it. */
.ci-composer[data-disabled] {
  background: oklch(from var(--ci-fill) l c h / 0.55);
}

.ci-composer[data-disabled] .ci-composer__textarea {
  padding-left: var(--ci-space-3);
}

.ci-composer__token {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  height: 32px;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
}

.ci-composer__token-close {
  display: inline-flex;
  color: var(--gaia-muted-foreground);
}

.ci-composer__plus {
  grid-area: plus;
}

.ci-composer__plus,
.ci-choice[data-compact] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ci-radius-pill);
  color: var(--gaia-muted-foreground);
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}

.ci-composer__plus:hover:not(:disabled),
.ci-composer__plus[data-open],
.ci-choice[data-compact]:hover:not(:disabled),
.ci-choice[data-compact][data-open] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-composer__plus:disabled,
.ci-choice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The choices as chips, once the box has grown: a hairline pill that reads its value. */
.ci-choice {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  min-width: 0;
  max-width: 240px;
  margin-right: 6px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-pill);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  white-space: nowrap;
  transition:
    background var(--ci-duration-press) ease-out,
    border-color var(--ci-duration-press) ease-out;
}

.ci-choice[data-compact] {
  margin-right: 0;
  padding: 0;
  border-color: transparent;
}

.ci-choice:not([data-compact]) > svg {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-choice:not([data-compact]):hover:not(:disabled),
.ci-choice:not([data-compact])[data-open] {
  background: oklch(from var(--ci-fill) l c h / 0.6);
}

.ci-choice__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: ci-choice-value-in var(--ci-duration-pop) var(--ci-ease);
}

@keyframes ci-choice-value-in {
  from {
    opacity: 0;
  }
}

/* A choice set away from its default, while the pill is at rest. */
.ci-choice__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: var(--ci-radius-pill);
  background: var(--gaia-foreground);
}

.ci-choice:not([data-compact]) .ci-choice__dot {
  display: none;
}

/* A box too narrow to read every choice in full, such as the assistant beside a page: the chips
   become icons, named with their value in the tooltip, so no word is ever cut. */
.ci-composer {
  container-type: inline-size;
}

@container (max-width: 520px) {
  .ci-choice:not([data-compact]) {
    justify-content: center;
    width: 32px;
    padding: 0;
  }

  .ci-choice:not([data-compact]) .ci-choice__value {
    display: none;
  }

  .ci-choice:not([data-compact]) .ci-choice__dot {
    display: block;
    top: 5px;
    right: 5px;
  }
}

.ci-composer [data-ci='choice-units'] {
  grid-area: units;
}

.ci-composer [data-ci='choice-period'] {
  grid-area: period;
}

.ci-composer__effort {
  grid-area: effort;
  display: inline-flex;
  min-width: 0;
}

.ci-composer__scope {
  grid-area: scope;
  display: inline-flex;
  min-width: 0;
}

.ci-composer__usage-slot {
  grid-area: usage;
  display: inline-flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.ci-composer__usage {
  padding-right: 8px;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-composer__usage[data-warning] {
  color: var(--gaia-badge-warning-foreground, var(--gaia-warning));
}

.ci-composer__send {
  grid-area: send;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ci-radius-pill);
  /* The AI colour, pale until there is something to send. */
  background: var(--gaia-ai);
  color: var(--gaia-card);
  opacity: 0.45;
  transition:
    background var(--ci-duration-press) ease-out,
    opacity var(--ci-duration-press) ease-out;
}

.ci-composer__send[data-ready],
.ci-composer__send[data-busy] {
  opacity: 1;
}

.ci-composer__send[data-busy] {
  background: var(--gaia-foreground);
  color: var(--gaia-card);
}

.ci-composer__send:disabled {
  cursor: not-allowed;
}

.ci-composer__context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.ci-composer__error {
  color: var(--gaia-destructive);
  font: var(--ci-type-caption);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/components/share-dialog.css */
/* The insight share dialog. One column: the search; while a search is typed, its matches (up to
   three rows, then they scroll) above a hairline; who has access (up to five rows, then it
   scrolls); and the notes underneath. The dialog is as tall as what it holds, so a search with no
   match shows one quiet line and who has access, with no empty block. Colours come from the Gaia
   and CI tokens only. */

.ci-share {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-3);
}

.ci-share__lists {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
}

.ci-share__results {
  display: flex;
  flex: none;
  flex-direction: column;
  max-height: calc(3 * 48px + var(--ci-space-2));
  padding-bottom: var(--ci-space-2);
  overflow-y: auto;
  border-bottom: 1px solid var(--ci-line);
  scrollbar-gutter: stable;
}

.ci-share__results > * {
  flex: none;
}

.ci-share__label {
  flex: none;
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
}

.ci-share__list {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(5 * 48px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-share__list > * {
  flex: none;
}

/* One anatomy for the owner, a reader and a colleague to add: avatar, who, then the row's end. */
.ci-share__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: var(--ci-space-3);
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 var(--ci-space-2);
}

.ci-share__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ci-radius-pill);
  background: var(--ci-fill);
  color: var(--gaia-foreground);
  font: var(--ci-type-caption);
  font-weight: var(--gaia-font-weight-semibold);
}

.ci-share__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ci-share__name {
  overflow: hidden;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-share__email {
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-share__trailing {
  display: flex;
  align-items: center;
  gap: var(--ci-space-3);
  white-space: nowrap;
}

/* Labels end at one edge on every row; the action slot after them keeps its width, empty on the
   owner's row, so "Owner" lines up with "Can read". */
.ci-share__access {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  text-align: right;
}

.ci-share__action {
  display: flex;
  justify-content: flex-end;
  width: 80px;
}

/* The button keeps its width while its request runs. Gaia's ghost button carries no resting
   background and the app's button reset skips Gaia buttons, so the browser's grey shows unless it
   is cleared here. */
.ci-share__remove {
  min-width: 80px;
  transition:
    background-color var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}

.ci-share__remove:not(:hover) {
  background: transparent;
}

/* A colleague to add. The wrapper is the listbox option; the active one is the row Enter adds. */
.ci-share__option {
  border-radius: var(--ci-radius-control);
  cursor: pointer;
  transition: background-color var(--ci-duration-press) ease-out;
}

.ci-share__option--active {
  background: var(--ci-fill);
}

/* While one colleague is being added no other Add can be pressed, and every row says so. */
.ci-share__option[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The avatar's fill is the active row's fill, so it turns to paper to stay visible. */
.ci-share__option--active .ci-share__avatar {
  background: var(--ci-surface);
}

.ci-share__add {
  color: var(--gaia-primary);
  font: var(--ci-type-label);
}

.ci-share__no-match {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0 var(--ci-space-2);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

/* Placeholder rows hold the 48px geometry of the real ones. */
.ci-share__skeleton-avatar {
  display: grid;
  width: 32px;
  height: 32px;
}

.ci-share__skeleton-avatar .ci-skeleton {
  border-radius: var(--ci-radius-pill);
}

.ci-share__skeleton-text {
  gap: var(--ci-space-1);
}

.ci-share__notes {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-1);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-share__notes p {
  margin: 0;
}

.ci-share__error {
  color: var(--gaia-destructive);
}

/* A text action inside a sentence: it reads as a link and takes the sentence's type. */
.ci-share__retry {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gaia-link-foreground);
  font: inherit;
  font-weight: var(--gaia-font-weight-semibold);
  cursor: pointer;
}

.ci-share__retry:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .ci-share__option,
  .ci-share__remove {
    transition: none;
  }
}


/* /@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/features/carbon-intelligence/chat/components/ci-state.css */
/* The one shape every Cozero Intelligence state takes. Page: centred in the content column, in
   its top third, on the canvas. Inline: a white card with a hairline, left aligned, in the
   transcript or the panel. */

.ci-state {
  --ci-state-tint: var(--gaia-muted-foreground);
  --ci-state-ink: var(--gaia-muted-foreground);
  display: flex;
  gap: var(--ci-space-4);
  color: var(--gaia-foreground);
}

.ci-state[data-tone='warning'] {
  --ci-state-tint: var(--gaia-warning);
  --ci-state-ink: var(--gaia-badge-warning-foreground);
}

.ci-state[data-tone='danger'] {
  --ci-state-tint: var(--gaia-destructive);
  --ci-state-ink: var(--gaia-badge-destructive-foreground);
}

.ci-state[data-placement='page'] {
  flex-direction: column;
  align-items: center;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 12vh var(--ci-space-5) var(--ci-space-6);
  text-align: center;
}

.ci-state[data-placement='inline'] {
  align-items: flex-start;
  margin: var(--ci-space-3) 0 var(--ci-space-4);
  padding: var(--ci-space-4);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
}

.ci-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--gaia-radius-pill);
  color: var(--ci-state-ink);
  background: oklch(from var(--ci-state-tint) l c h / 0.12);
}

.ci-state-body {
  min-width: 0;
}

/* The page state is as wide as it will ever be, whatever it says, so a title that changes (a
   search being typed) never moves the box it sits in. */
.ci-state[data-placement='page'] .ci-state-body {
  width: 100%;
}

.ci-state-title,
.ci-state-sentence {
  overflow-wrap: anywhere;
}

.ci-state-title {
  margin: 0;
  font: var(--ci-type-title);
  color: var(--gaia-foreground);
}

.ci-state-sentence {
  margin: var(--ci-space-1) 0 0;
  font: var(--ci-type-control);
  color: var(--gaia-muted-foreground);
}

.ci-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-2);
  margin-top: var(--ci-space-4);
}

.ci-state[data-placement='page'] .ci-state-actions {
  justify-content: center;
}

.ci-state-detail {
  margin: var(--ci-space-3) 0 0;
  font: var(--ci-type-caption);
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Gaia's ghost button carries no resting background and the app's button reset skips Gaia buttons,
   so without this the browser's own grey shows through. */
.ci-state-actions button[data-variant='ghost']:not(:hover) {
  background: transparent;
}


/* /@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 insights list: white cards on the canvas under the list page's toolbar, in a grid of three
   at full width and two on a narrow screen. A card is flat at rest; under the pointer
   only its hairline darkens. Nothing on a card changes size when it is hovered, its picture is
   drawn, or its edit time arrives. */

.ci-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ci-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-insight-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-insight-card:hover,
.ci-insight-card:focus-within {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.28);
}

.ci-insight-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.ci-insight-card__link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
  border-radius: var(--ci-radius-card);
}

/* The picture: a fixed band of quiet fill, one series in the first chart colour. */
.ci-insight-preview {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 112px;
  border-bottom: 1px solid var(--ci-line);
  background: oklch(from var(--ci-fill) l c h / 0.45);
  color: var(--gaia-muted-foreground);
}

.ci-insight-preview__bars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 20px 20px 0;
}

.ci-insight-preview__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--gaia-chart-1);
  opacity: 0.85;
}

.ci-insight-preview__figure {
  color: var(--gaia-foreground);
  font: var(--ci-type-figure);
  font-variant-numeric: tabular-nums;
}

/* The one picture of every insight with no bars and no figure: the top of a small page rising out
   of the band's edge, a miniature of the sheet the card opens into, drawn from the tokens. */
.ci-insight-preview[data-kind='page'] {
  align-items: flex-end;
  overflow: hidden;
}

.ci-insight-preview__page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 136px;
  height: 80px;
  padding: 16px 16px 0;
  border: 1px solid var(--ci-line);
  border-bottom: 0;
  border-radius: var(--ci-radius-control) var(--ci-radius-control) 0 0;
  background: var(--ci-surface);
  box-shadow: var(--ci-shadow-lift);
}

.ci-insight-preview__page > span {
  height: 6px;
  border-radius: var(--ci-radius-pill);
  background: var(--ci-fill);
}

.ci-insight-preview__page > span:nth-child(1) {
  width: 44%;
  height: 8px;
  margin-bottom: 4px;
  background: var(--ci-line);
}

.ci-insight-preview__page > span:nth-child(2) {
  width: 84%;
}

.ci-insight-preview__page > span:nth-child(3) {
  width: 72%;
}

.ci-insight-preview__page > span:nth-child(4) {
  width: 56%;
}

.ci-insight-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ci-space-1);
  /* Room on the right of the title for the owner's "⋯". */
  padding: var(--ci-space-3) 44px var(--ci-space-3) var(--ci-space-4);
}

.ci-insight-card__title {
  display: -webkit-box;
  overflow: hidden;
  font: var(--ci-type-title);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ci-insight-card__meta {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  margin-top: auto;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

/* Who it belongs to and who reads it may shorten; when it was edited never does. */
.ci-insight-card__meta-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-insight-card__meta-time {
  flex-shrink: 0;
  white-space: nowrap;
}

/* The edit time is drawn by a shared helper with its own type; here it reads as the line does. */
.ci-insight-card__meta-time > span {
  font: inherit;
  color: inherit;
}

.ci-insight-card__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--ci-radius-pill);
  background: var(--gaia-warning);
}

.ci-insight-card__menu {
  position: absolute;
  top: calc(112px + 8px);
  right: 8px;
  opacity: 0;
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-insight-card:hover .ci-insight-card__menu,
.ci-insight-card:focus-within .ci-insight-card__menu,
.ci-insight-card__menu:has([aria-expanded='true']) {
  opacity: 1;
}

.ci-insight-card[data-closed] .ci-insight-card__title {
  color: var(--gaia-muted-foreground);
}

/* While the list is read: cards of the same size with nothing in them. */
.ci-insight-card--ghost {
  height: 186px;
  background: oklch(from var(--ci-surface) l c h / 0.6);
  animation: ci-insight-ghost 1.4s linear infinite;
}

@keyframes ci-insight-ghost {
  50% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-insight-card--ghost {
    animation: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/screens/new-insight.css */
/* The new-insight start: one white sheet, the width of an insight's, with the question and its
   field, three starting points as small cards, and the blank page as a quiet link. */

.ci-new-insight {
  display: flex;
  justify-content: center;
}

.ci-new-insight__sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--ci-width-sheet);
  padding: 48px 40px 40px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
}

/* Everything on the sheet keeps the reading width an insight's words have. */
.ci-new-insight__column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--ci-width-reading);
  margin: 0 auto;
}

.ci-new-insight__question {
  margin: 0 0 var(--ci-space-4);
  color: var(--gaia-foreground);
  font: var(--ci-type-question);
}

.ci-new-insight__ask {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  transition: box-shadow var(--ci-duration-press) ease-out;
}

.ci-new-insight__ask:focus-within {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.35);
  box-shadow: var(--shadow-sm);
}

.ci-new-insight__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px 56px;
  border: 0;
  border-radius: var(--ci-radius-card);
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-body);
  resize: none;
  outline: none;
}

.ci-new-insight__input::placeholder {
  color: var(--gaia-muted-foreground);
}

/* Sending to the assistant: the AI's green, its width fixed whatever its state. */
.ci-new-insight__draft {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  gap: var(--ci-space-2);
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--ci-radius-pill);
  background: var(--gaia-ai);
  color: var(--gaia-card);
  font: var(--ci-type-label);
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-new-insight__draft:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ci-new-insight__draft:not(:disabled):hover {
  opacity: 0.88;
}

.ci-new-insight__draft:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}

.ci-new-insight__or {
  margin: var(--ci-space-6) 0 var(--ci-space-3);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-new-insight__templates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ci-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-new-insight__template {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-1);
  width: 100%;
  height: 100%;
  padding: var(--ci-space-3);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  text-align: left;
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-new-insight__template:not(:disabled):hover {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.28);
}

.ci-new-insight__template:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}

.ci-new-insight__template:disabled {
  cursor: wait;
}

.ci-new-insight__template-picture {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 56px;
  margin-bottom: var(--ci-space-2);
  padding: 10px 12px 0;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.45);
}

.ci-new-insight__template-picture > span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--gaia-chart-1);
  opacity: 0.85;
}

.ci-new-insight__template-title {
  font: var(--ci-type-label);
}

.ci-new-insight__template-description {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-new-insight__blank {
  align-self: flex-start;
  margin-top: var(--ci-space-5);
  padding: 0;
  border-radius: var(--ci-radius-control);
  background: transparent;
  color: var(--gaia-link-foreground);
  font: var(--ci-type-label);
}

.ci-new-insight__blank:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ci-new-insight__blank:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}

.ci-new-insight__error {
  margin: var(--ci-space-4) 0 0;
  color: var(--gaia-destructive);
  font: var(--ci-type-control);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/ci-list-toolbar.css */
/* The toolbar of a list page: pill choices on the canvas, then one white search field.

   The search sits in the room the filters leave (`.ci-search-room`, which grows into it and is a
   size container). The field is up to 320px wide and shrinks with the room down to 220px; below
   that only the search button shows, and pressing it opens the field in the row, the
   filters stepping aside until the search is closed empty. */

.ci-search-room {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 32px;
  container: ci-search-room / inline-size;
}

.ci-search-room__toggle {
  display: none;
}

@container ci-search-room (width < 220px) {
  .ci-search-room:not([data-open]) .ci-search-field {
    display: none;
  }

  .ci-search-room:not([data-open]) .ci-search-room__toggle {
    display: inline-flex;
    align-items: center;
    height: 40px;
  }
}

.ci-search-field {
  position: relative;
  display: flex;
  flex: 0 1 320px;
  align-items: center;
  min-width: 220px;
  height: 40px;
  color: var(--gaia-muted-foreground);
}

.ci-search-field > svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.ci-search-field input {
  width: 100%;
  height: 100%;
  padding: 0 36px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  outline: none;
  appearance: none;
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-search-field input::placeholder {
  color: var(--gaia-muted-foreground);
}

/* The browser's own clear cross would sit beside ours. */
.ci-search-field input::-webkit-search-cancel-button {
  appearance: none;
}

.ci-search-field input:focus-visible {
  border-color: var(--gaia-ring);
}

.ci-search-field__clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ci-radius-control);
  background: transparent;
  color: var(--gaia-muted-foreground);
  transition: background var(--ci-duration-press) ease-out;
}

.ci-search-field__clear:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-search-field__clear:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

.ci-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-1);
}

.ci-segmented__option {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--ci-radius-pill);
  background: transparent;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}

.ci-segmented__option:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-segmented__option[aria-checked='true'] {
  background: var(--gaia-foreground);
  color: var(--gaia-card);
}

.ci-segmented__option:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/profile-card.css */
/* One entity in full: name and kind, a row of figures, a short attribute list, its quality. */

.ci-profile__name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.ci-profile__name span {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-profile__name small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-profile__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 0 12px;
  border-top: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-profile__figures b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-profile__figures span {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-profile__figures small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attributes run on as one wrapping line: short ones share a row, a long one takes its own. */
.ci-profile__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 16px;
}
.ci-profile__attributes > div {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.ci-profile__attributes dt {
  color: var(--gaia-muted-foreground);
}
.ci-profile__attributes dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ci-profile__section {
  margin-top: 12px;
}

.ci-profile__kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-profile__quality {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-size: 12px;
  line-height: 16px;
}
.ci-profile__quality .ci-profile__kicker {
  margin: 0;
  width: 6rem;
}
.ci-profile__quality-bar {
  display: flex;
  gap: 2px;
  width: 10rem;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ci-radius-pill);
}
.ci-profile__quality-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 520px) {
  .ci-profile__attributes {
    flex-direction: column;
  }
}


/* /@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 var(--ci-line);
  background: var(--ci-surface);
}

/* 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(from var(--gaia-ai) l c h / 0.25);
}

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

.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: var(--gaia-muted-foreground);
}
.ci-artifact-header-btn:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.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(from var(--ci-fill) l c h / 0.45);
}
.ci-artifact-row[data-open='true'] {
  border-color: oklch(from var(--gaia-ai) l c h / 0.35);
  background: oklch(from var(--gaia-ai) l c h / 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(from var(--ci-fill) l c h / 0.8);
  color: var(--gaia-muted-foreground);
}
.ci-artifact-glyph[data-origin='generated'] {
  background: oklch(from var(--gaia-ai) l c h / 0.12);
  color: var(--gaia-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(--ci-radius-card);
  background: var(--ci-surface);
}

.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: var(--gaia-muted-foreground);
  pointer-events: none;
  transform: translateY(-50%);
}
.ci-artifacts-page .ci-artifact-list {
  padding: 0;
}
.ci-artifacts-page .ci-artifact-row {
  border-color: var(--ci-line);
  background: var(--ci-surface);
}
.ci-artifacts-page .ci-artifact-row:hover {
  border-color: var(--gaia-muted-foreground);
}

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

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

/* The card an artifact came from, lit for a moment after "Show in conversation" found it. */
[data-ci-found='true'] {
  border-radius: var(--ci-radius-card);
  outline: 2px solid oklch(from var(--gaia-ai) l c h / 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;
}

/* The one line under a settled answer: how it was worked out and what it stands on at the left,
   the actions at the right, 32 px tall. The steps open in place under their own line, and the
   actions stay level with that line rather than with the middle of what opened. */
.ci-answer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-top: 8px;
}

.ci-answer-foot {
  display: flex;
  flex: 1;
  gap: 4px 12px;
  align-items: flex-start;
  min-width: 0;
  min-height: 32px;
  padding-top: 8px;
}

/* In the line the steps' summary keeps to one line; opened, the steps below say it in full. */
.ci-answer-foot .ci-settled-steps {
  min-width: 0;
  margin: 0;
}

.ci-answer-foot .ci-settled-steps > [data-ci='rail-toggle'] > button {
  max-width: 100%;
}

.ci-answer-foot .ci-settled-steps > [data-ci='rail-toggle'] > button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the line is short (the panel, with Save as insight among the actions) the source gives way
   too and ends in an ellipsis, so it never runs under the actions. The full words stay in its
   popover, or in its tooltip where it has none. */
.ci-answer-foot .ci-answer-source {
  height: 24px;
  margin-top: -4px;
}

.ci-answer-source > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Where the figures came from and when: muted 12 px, one line, opening what the answer stands on. */
.ci-answer-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: var(--ci-radius-control);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--ci-duration-press) ease-out;
}
button.ci-answer-source:hover,
button.ci-answer-source[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* What an answer stands on, in the popover the source line opens. */
.ci-answer-sources {
  padding: 12px;
}
.ci-answer-sources__heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gaia-muted-foreground);
}
.ci-answer-sources__as-of {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--ci-line);
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-source-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-source-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--ci-radius-control);
  font-size: 14px;
  text-align: left;
}
button.ci-source-list__row:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-source-list__label {
  min-width: 0;
  color: var(--gaia-foreground);
}
.ci-source-list__detail {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* 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: var(--gaia-muted-foreground);
  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(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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: var(--gaia-muted-foreground);
  transition: background 120ms;
}
.ci-quote-inline:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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 var(--ci-line);
  border-radius: 12px;
  background: var(--ci-surface);
}
.ci-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* The fold under a long table: the rows past the first eight open in place, under it. */
.ci-rows-show-all {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: var(--gaia-radius-md);
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  transition: background 120ms ease-out;
}
.ci-rows-show-all:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* The mark on a row that quotes itself when pressed: smaller than a button, same reveal. */
.ci-quote-mark {
  width: 16px;
  height: 16px;
}

/* A chart and the card naming the figure under the pointer or the focus. The card is placed by a
   transform from the frame's corner, so following the pointer never moves anything in the flow. */
.ci-chart-frame {
  position: relative;
}

.ci-figure-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: ci-figure-card-in 140ms var(--ci-ease);
}
@keyframes ci-figure-card-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ci-figure-card {
    animation: none;
  }
}
/* In a narrow chart (the assistant panel's) the card takes two lines: the name on the first, the
   figure, its share and the question on the second, never wider than the chart. */
.ci-figure-card[data-lines='2'] {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  height: auto;
  padding: 6px 12px;
}
.ci-figure-card[data-lines='2'] [data-ci='figure-name'] {
  grid-column: 1 / -1;
  line-height: 16px;
}
.ci-figure-card[data-lines='2'] .ci-figure-card__value {
  line-height: 20px;
}
.ci-figure-card__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-figure-card__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gaia-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-figure-card__why {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-foreground);
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-figure-card__why:hover {
  text-decoration-color: currentColor;
}


/* /@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/chat/components/component-card.css */
/* An answer card: a header with the title over one muted line, icon buttons on the right; the
   body; and the footer with what it covers. 16 px inside, on the card's white. */

.ci-card {
  outline: none;
}

.ci-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 8px 16px;
}

.ci-card-head__text {
  min-width: 0;
  padding-top: 2px;
}

.ci-card-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--gaia-foreground);
}

/* A sentence a card says in place of its drawing: it could not be drawn. */
.ci-card-note {
  margin: 8px 0;
  font: var(--ci-type-control);
  color: var(--gaia-muted-foreground);
}

.ci-card-subtitle {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.ci-card-head__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Tools on hover: there under the pointer, with the focus inside, while one of them has
   something open, and on an expanded card; their place is kept the whole time. */
.ci-card[data-ci-tools='hover'] .ci-card-head__actions {
  opacity: 0;
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-card[data-ci-tools='hover']:hover .ci-card-head__actions,
.ci-card[data-ci-tools='hover']:focus-within .ci-card-head__actions,
.ci-card[data-ci-tools='hover'][data-ci-expanded] .ci-card-head__actions,
.ci-card[data-ci-tools='hover'] .ci-card-head__actions:has([aria-expanded='true']) {
  opacity: 1;
}

@media (hover: none) {
  .ci-card[data-ci-tools='hover'] .ci-card-head__actions {
    opacity: 1;
  }
}

.ci-card-drill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 8px;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-card-drill span {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-card-body {
  padding: 0 16px 12px;
}

/* Chart or table, in an expanded card: a small segmented control above the figures. */
.ci-card-view-switch {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 8px;
  padding: 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}
.ci-card-view-switch button {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-card-view-switch button[aria-pressed='true'] {
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font-weight: 600;
}


/* /@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/chat/components/ci-page-header.css */
/* The same box as the shell's AppHeader: 96px, bottom-aligned, title 32px in from the content's
   edge, actions in a 40px row 32px from the right. */

.ci-page-header {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  align-items: flex-end;
  height: 96px;
  padding: 0 32px 28px calc(32px + var(--shell-header-inset, 0px));
}

.ci-page-header__title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ci-page-header__kicker {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-page-header__name {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
}

.ci-page-header__name h1 {
  margin: 0;
}

.ci-page-header__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  height: 40px;
}

/* A secondary action: icon and label, no border, navy text; a quiet fill on hover and while
   what it toggles is open. The blue filled button is kept for the one primary action. */
.ci-page-header__quiet {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ci-radius-pill);
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-page-header__quiet > svg {
  color: var(--gaia-muted-foreground);
}

.ci-page-header__quiet:hover,
.ci-page-header__quiet[aria-pressed='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-page-header__quiet:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/empty-chat.css */
/* The empty chat fills the room it is given, in three bands: room above, the question, then the
   box with what sits under it. The first and last bands share what is left equally, so the
   question's place depends only on the room, never on the box: the box grows downward on focus,
   into a command's form or past the room's foot (the conversation column then scrolls), and the
   question stays where it is.

   The room under the box is counted from the resting box's foot (the bottom padding adds the
   gap and the resting box's 52 px), so at rest the question and the box are centred together. */

.ci-empty {
  --ci-empty-resting-box: calc(var(--ci-space-6) + 52px);

  /* Exactly the room, whatever the box holds: a taller box overflows into the scrolling column
     rather than making the room taller, which would hand the band above more space. */
  flex: 1 0 0;
  min-height: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--ci-space-5) calc(var(--ci-space-6) + var(--ci-empty-resting-box));
  /* The glow is wider than the column and narrows with the room; the room clips it at the sides.
     Above and below, the scrolling column clips it, and a box taller than the room stays whole. */
  overflow-x: clip;
  container-type: inline-size;
}

.ci-empty::before {
  content: '';
  flex: 1 1 0;
  min-height: var(--ci-space-7);
}

.ci-empty__question-row {
  position: relative;
  width: 100%;
  max-width: var(--ci-width-chat);
}

/* The one soft green glow the product allows: a still field of the AI colour behind the question
   and the box, strongest at the box's top edge and gone at its own edge, so it reads as light
   rather than as a shape. It hangs from the question, so the box growing never moves it, and
   nothing animates, so reduced motion has nothing to turn off. */
.ci-empty__glow {
  position: absolute;
  top: calc(100% + var(--ci-space-6));
  left: 50%;
  z-index: -1;
  width: min(1180px, 80cqi);
  aspect-ratio: 1180 / 560;
  translate: -50% -50%;
  background: radial-gradient(
    closest-side,
    oklch(from var(--gaia-ai) l c h / 0.28),
    oklch(from var(--gaia-ai) l c h / 0.12) 55%,
    transparent
  );
  filter: blur(8px);
  pointer-events: none;
}

.ci-empty__question {
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-question);
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

.ci-empty__below {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  /* The band keeps its equal share even when the box outgrows it; the box overflows the band
     instead of taking room from the band above. */
  min-height: 0;
  align-items: center;
  width: 100%;
  max-width: var(--ci-width-chat);
  padding-top: var(--ci-space-6);
}

.ci-empty__composer {
  width: 100%;
}

.ci-empty__starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-2);
  justify-content: center;
  margin-top: var(--ci-space-4);
}

.ci-empty__starter {
  height: 28px;
  padding: 0 var(--ci-space-3);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-pill);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-caption);
  transition:
    background var(--ci-duration-press) ease-out,
    border-color var(--ci-duration-press) ease-out;
}

.ci-empty__starter:hover:not(:disabled) {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.2);
  background: oklch(from var(--ci-fill) l c h / 0.55);
}

.ci-empty__starter:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The one quiet line a page may put under the suggestions. */
.ci-empty__note {
  margin: var(--ci-space-5) 0 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-align: center;
}

.ci-empty__note:not([data-ready]) {
  visibility: hidden;
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/insights/components/insight-dialogs.css */
.ci-insight-dialog__sentence {
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
}

.ci-insight-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-4);
}

.ci-insight-dialog__actions {
  display: flex;
  gap: var(--ci-space-2);
  justify-content: flex-end;
}

/* The confirming button keeps its width whatever state it is in. */
.ci-insight-dialog__confirm {
  min-width: 88px;
}

.ci-insight-dialog__error {
  margin: 0;
  color: var(--gaia-destructive);
  font: var(--ci-type-control);
}

/* Gaia's ghost button carries no resting background and the app's button reset skips Gaia
   buttons, so the browser's grey shows unless it is cleared here. */
.ci-insight-dialog__actions button[data-variant='ghost']:not(:hover) {
  background: transparent;
}


/* /@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-radius-lg: 0.5rem;
  --ci-default-transition-duration: 150ms;
  --ci-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --ci-radius: 8px;
  --ci-color-background: var(--gaia-card);
  --ci-color-foreground: var(--gaia-foreground);
  --ci-color-muted: var(--gaia-muted);
  --ci-color-muted-foreground: var(--gaia-muted-foreground);
  --ci-color-border: var(--gaia-border);
  --ci-color-input: var(--gaia-border);
  --ci-color-ring: var(--gaia-ring);
  --ci-color-primary: var(--gaia-primary);
  --ci-color-primary-foreground: var(--gaia-primary-foreground);
  --ci-color-secondary: var(--gaia-muted);
  --ci-color-secondary-foreground: var(--gaia-foreground);
  --ci-color-accent: oklch(from var(--gaia-muted) l c h / 0.7);
  --ci-color-accent-foreground: var(--gaia-foreground);
  --ci-color-popover: var(--gaia-card);
  --ci-color-popover-foreground: var(--gaia-foreground);
  --ci-color-brand: var(--gaia-primary);
  --ci-color-destructive: var(--gaia-destructive);
}
.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 {
  margin-top: var(--ci-spacing);
}
.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\: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-\[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-\[min\(70vh\,320px\)\] {
  max-height: min(70vh, 320px);
}
.ci\:max-h-\[min\(400px\,var\(--popover-available-height\,400px\)\)\] {
  max-height: min(400px, var(--popover-available-height,400px));
}
.ci\:max-h-full {
  max-height: 100%;
}
.ci\:min-h-9 {
  min-height: calc(var(--ci-spacing) * 9);
}
.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-\[320px\] {
  width: 320px;
}
.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\:appearance-none {
  appearance: 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\:gap-2\.5 {
  gap: calc(var(--ci-spacing) * 2.5);
}
.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-\[14px\] {
  border-radius: 14px;
}
.ci\:rounded-lg {
  border-radius: var(--ci-radius-lg);
}
.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-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-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\:\[font\:inherit\] {
  font: inherit;
}
.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-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);
}
@layer base {
  [class*='ci:border'] {
    border-color: var(--gaia-border);
  }
}
:root {
  --highlight: oklch(0.852 0.199 91.936);
}
.dark {
  --highlight: oklch(0.852 0.199 91.936);
}
.ci-slash-input {
  caret-color: transparent;
}
.ci-slash-input input {
  caret-color: var(--gaia-foreground);
}
.ci-slash-menu {
  box-shadow: var(--shadow-md);
  font: var(--ci-type-control);
  animation: ci-slash-menu-in var(--ci-duration-pop) var(--ci-ease);
}
@keyframes ci-slash-menu-in {
  from {
    opacity: 0;
  }
}
.ci-slash-group:has([role='option']) ~ .ci-slash-group:has([role='option']) {
  border-top: 1px solid var(--ci-line);
}
.ci-slash-menu__query {
  position: sticky;
  top: -6px;
  z-index: 1;
  background: var(--ci-surface);
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ci-line);
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
}
.ci-slash-menu__query[data-empty] {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}
.ci-slash-menu[data-more='true'] {
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}
.ci-slash-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}
.ci-slash-item__icon > .ci-slash-ai, [data-ci='ask-ci'] > .ci-slash-ai {
  color: var(--gaia-ai);
}
.ci-slash-item__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ci-slash-item__description {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}
.ci-insight-banner {
  font: var(--ci-type-control);
}
.ci-block-error {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}
@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/carbon-intelligence/insights/components/suggestion-pill.css */
/* The pill floats over the foot of the page's scrolling area, centred on the sheet, and takes no
   room in the page: the scroll area's and the sheet's bottom padding (112px together) are what
   let the last block scroll clear of it. The dock spans the scroll area's width so the pill can
   tell how much room it has, less what a floating assistant panel covers of the page's right edge
   (`--ci-panel-over-page`, 0px while the panel is shut or beside the page). */
.ci-suggestion-dock {
  position: absolute;
  right: calc(24px + var(--ci-panel-over-page, 0px));
  bottom: var(--ci-space-4);
  left: 24px;
  z-index: 40;
  height: 0;
  container: ci-suggestion-dock / inline-size;
  pointer-events: none;
}

.ci-suggestion-pill {
  position: absolute;
  bottom: 0;
  left: 50%;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--ci-space-2);
  padding: 6px 6px 6px 14px;
  border-radius: var(--ci-radius-pill);
  background: var(--gaia-foreground);
  color: var(--gaia-primary-foreground);
  box-shadow: var(--shadow-md);
  font: var(--ci-type-control);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: ci-suggestion-pill-in var(--ci-duration-pop) var(--ci-ease) both;
}

@keyframes ci-suggestion-pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
}

.ci-suggestion-pill__mark {
  flex-shrink: 0;
  color: var(--gaia-ai);
}

.ci-suggestion-pill__status {
  min-width: 8.5em;
  font-variant-numeric: tabular-nums;
}

.ci-suggestion-pill[data-state='updating'] {
  padding-right: 18px;
}

.ci-suggestion-pill[data-state='updating'] .ci-suggestion-pill__status {
  min-width: 0;
}

.ci-suggestion-pill__group {
  display: flex;
  align-items: center;
  gap: var(--ci-space-1);
}

.ci-suggestion-pill__rule {
  width: 1px;
  height: 20px;
  background: oklch(from var(--gaia-primary-foreground) l c h / 0.2);
}

.ci-suggestion-pill .ci-suggestion-pill__icon,
.ci-suggestion-pill .ci-suggestion-pill__button {
  background: oklch(from var(--gaia-primary-foreground) l c h / 0.12);
  color: inherit;
  font: var(--ci-type-label);
  cursor: pointer;
}

.ci-suggestion-pill .ci-suggestion-pill__button {
  padding: 0 14px;
}

.ci-suggestion-pill .ci-suggestion-pill__icon:hover:not(:disabled),
.ci-suggestion-pill .ci-suggestion-pill__button:hover:not(:disabled) {
  background: oklch(from var(--gaia-primary-foreground) l c h / 0.22);
}

/* On the dark pill the one main action is the light one. */
.ci-suggestion-pill .ci-suggestion-pill__button[data-primary] {
  background: var(--gaia-primary-foreground);
  color: var(--gaia-foreground);
}

.ci-suggestion-pill .ci-suggestion-pill__button[data-primary]:hover:not(:disabled) {
  background: oklch(from var(--gaia-primary-foreground) l c h / 0.88);
}

.ci-suggestion-pill .ci-suggestion-pill__icon:disabled,
.ci-suggestion-pill .ci-suggestion-pill__button:disabled {
  cursor: default;
  opacity: 0.4;
}

.ci-suggestion-pill [data-slot='button']:focus-visible {
  outline: 2px solid var(--gaia-primary-foreground);
  outline-offset: 2px;
}

/* Words beside an icon only where the page has room for the whole pill. */
.ci-suggestion-pill__button-icon,
.ci-suggestion-pill__short {
  display: none;
}

@container ci-suggestion-dock (width < 600px) {
  .ci-suggestion-pill {
    gap: var(--ci-space-1);
    padding-left: 12px;
  }

  .ci-suggestion-pill__status {
    min-width: 4.5em;
  }

  .ci-suggestion-pill__noun {
    display: none;
  }

  .ci-suggestion-pill__short {
    display: inline;
  }

  .ci-suggestion-pill .ci-suggestion-pill__button {
    padding: 0 12px;
  }

  .ci-suggestion-pill .ci-suggestion-pill__button[data-has-icon] {
    width: 32px;
    padding: 0;
  }

  .ci-suggestion-pill__button[data-has-icon] .ci-suggestion-pill__button-icon {
    display: block;
  }

  .ci-suggestion-pill__button[data-has-icon] .ci-suggestion-pill__button-label {
    display: none;
  }
}

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


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/sections/edit-report.css */
/* The panel's one line about a suggestion: waiting in the page, then kept or not. */
.ci-edit-report {
  display: flex;
  align-items: baseline;
  gap: var(--ci-space-2);
  margin: 0 0 var(--ci-space-3);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-edit-report[data-waiting] {
  color: var(--gaia-foreground);
}

.ci-edit-report__mark {
  flex-shrink: 0;
  align-self: center;
  color: var(--gaia-ai);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/unit-tree.css */
/* The unit tree: the path to the unit in focus, a caret per branch, a name that focuses. */

.ci-unit-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-unit-path__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ci-unit-path button {
  color: var(--gaia-muted-foreground);
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-unit-path button:hover {
  color: var(--gaia-foreground);
}

.ci-unit-tree__caret {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--gaia-muted-foreground);
}
button.ci-unit-tree__caret:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* The name keeps its full width where it fits; the direct tonnes follow it, or wrap under it. */
.ci-unit-tree__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  min-width: 0;
}
.ci-unit-tree__name > span,
.ci-unit-tree__name > .ci-unit-tree__focus {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-unit-tree__focus {
  overflow: hidden;
  min-width: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-unit-tree__focus:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ci-unit-tree__direct {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
}

.ci-ranked-row[data-level]:not([data-level='0']) .ci-track > span {
  opacity: 0.6;
}

/* In a narrow card the tree keeps its names: the bar goes, the share column says the same. */
@container ci-content (max-width: 520px) {
  .ci-unit-tree .ci-heads,
  .ci-unit-tree .ci-ranked {
    --ci-row-columns: minmax(0, 1fr) 3.75rem 3.25rem;
  }
  .ci-unit-tree .ci-heads > span:nth-child(2),
  .ci-unit-tree .ci-track {
    display: none;
  }
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/history/components/history.css */
/* Chat history's own pieces on top of the shared list row: renaming in place, and sharing. */

/* The name field takes the place of the two lines, at a height the row already has. */
.ci-thread-rename {
  flex: 1;
  min-width: 0;
  max-width: 480px;
  height: 36px;
  padding: 0 var(--ci-space-3);
  border: 1px solid var(--gaia-ring);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  outline: none;
}

/* While the name is edited the row's menu keeps its place and leaves the screen and the tab order. */
.ci-list-row[data-editing='true'] .ci-list-row__menu {
  visibility: hidden;
}

.ci-thread-share {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
  padding: var(--ci-space-4);
}

.ci-thread-share__title {
  margin: 0;
  font: var(--ci-type-label);
}

.ci-thread-share__sentence {
  margin: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-thread-share__form {
  display: flex;
  gap: var(--ci-space-2);
  margin-top: var(--ci-space-1);
}

.ci-thread-share__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 var(--ci-space-2);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  outline: none;
}

.ci-thread-share__input:focus-visible {
  border-color: var(--gaia-ring);
}

.ci-thread-share__error {
  margin: 0;
  color: var(--gaia-destructive);
  font: var(--ci-type-caption);
}


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/library/site-map.css */
/* The site map: a map fitted to where the tonnes are, the ranked sites beside it, and one line
   under both saying what the view leaves out. In the panel the list moves under the map. */

.ci-sites__body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(13rem, 1fr);
  column-gap: 24px;
  align-items: start;
}
@container ci-content (max-width: 560px) {
  .ci-sites__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
}
/* The map keeps the card inside its height: at most this tall in a wide card, lower in the panel,
   where it draws centred at its own proportions. */
.ci-sites__map svg,
.ci-sites__loading {
  max-height: 260px;
}
@container ci-content (max-width: 520px) {
  .ci-sites__map svg,
  .ci-sites__loading {
    max-height: 180px;
  }
}

.ci-sites__map svg,
.ci-sites__loading {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 430 / 250;
}
.ci-sites__loading {
  border-radius: 8px;
  background: oklch(from var(--ci-fill) l c h / 0.4);
}
.ci-sites__sea {
  fill: oklch(from var(--ci-fill) l c h / 0.35);
}
.ci-sites__land {
  fill: oklch(from var(--ci-line) l c h / 0.7);
  stroke: var(--ci-surface);
  stroke-width: 0.6;
}
.ci-sites__bubble {
  fill: var(--gaia-chart-1);
  fill-opacity: 0.78;
  stroke: var(--ci-surface);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill-opacity var(--ci-duration-press) ease-out;
}
.ci-sites__bubble[data-aimed] {
  fill-opacity: 1;
  stroke: var(--gaia-foreground);
}
.ci-sites__bubble[data-empty] {
  fill: none;
  stroke: var(--gaia-muted-foreground);
  stroke-width: 1;
}
.ci-sites__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  fill: var(--gaia-foreground);
  paint-order: stroke;
  stroke: oklch(from var(--ci-fill) l c h / 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.ci-sites__heads {
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-sites__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-sites__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 3.25rem;
  column-gap: 8px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-sites__value,
.ci-sites__share {
  text-align: right;
}
.ci-sites__share {
  color: var(--gaia-muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ci-sites__bubble {
    transition: none;
  }
}


/* /@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 var(--ci-line);
  border-radius: 7px;
  color: var(--gaia-muted-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  color: var(--gaia-foreground);
  outline: none;
}

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

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


/* /@fs//home/coder/control-poc/src/features/carbon-intelligence/chat/components/conversion-note.css */
/* The line under an answer that was saved into an insight. Its height is fixed so running, done
   and failed read the same size, and it only ever appears under the person's own click, so it
   pushes nothing the person was not already moving. */

.ci-conversion-note {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  margin-top: 8px;
  padding: 0 8px 0 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.55);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
}

.ci-conversion-note[data-state='suggested'],
.ci-conversion-note[data-state='kept'] {
  background: oklch(from var(--gaia-success) l c h / 0.12);
}

.ci-conversion-note[data-state='failed'] {
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
}

.ci-conversion-note__icon {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-conversion-note[data-state='running'] .ci-conversion-note__icon {
  color: var(--gaia-ai);
  animation: ci-conversion-working 1.4s ease-in-out infinite;
}

.ci-conversion-note[data-state='suggested'] .ci-conversion-note__icon,
.ci-conversion-note[data-state='kept'] .ci-conversion-note__icon {
  color: var(--gaia-success);
}

.ci-conversion-note[data-state='failed'] .ci-conversion-note__icon {
  color: var(--gaia-destructive);
}

.ci-conversion-note__words {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gaia's outline button is transparent at rest; the note's own tint would show through it. */
.ci-conversion-note__action:not(:hover) {
  background: var(--ci-surface);
}

@keyframes ci-conversion-working {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-conversion-note[data-state='running'] .ci-conversion-note__icon {
    animation: none;
  }
}


/* /@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/features/carbon-intelligence/chat/components/ci-page-header.css */
/* The same box as the shell's AppHeader: 96px, bottom-aligned, title 32px in from the content's
   edge, actions in a 40px row 32px from the right. */

.ci-page-header {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  align-items: flex-end;
  height: 96px;
  padding: 0 32px 28px calc(32px + var(--shell-header-inset, 0px));
}

.ci-page-header__title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ci-page-header__kicker {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-page-header__name {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
}

.ci-page-header__name h1 {
  margin: 0;
}

.ci-page-header__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  height: 40px;
}

/* A secondary action: icon and label, no border, navy text; a quiet fill on hover and while
   what it toggles is open. The blue filled button is kept for the one primary action. */
.ci-page-header__quiet {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--ci-radius-pill);
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-page-header__quiet > svg {
  color: var(--gaia-muted-foreground);
}

.ci-page-header__quiet:hover,
.ci-page-header__quiet[aria-pressed='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-page-header__quiet:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}


/* /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/public/ci-theme.css */
/* Cozero Intelligence's surfaces, spacing, radius, type and motion, as aliases of Gaia.
 *
 * Two layers only: the soft canvas every CI page sits on, and white raised surfaces (composer,
 * cards, menus, the panel frame) with a 1px hairline. The composer and the insight sheet also lift
 * off the canvas with one soft ambient shadow; nothing else casts one at rest. CI styling reads
 * these names and never a hex value or a legacy channel triplet.
 *
 * The names are defined on :root rather than on .ci-root so a menu or dialog portalled out of a
 * CI screen still resolves them; .ci-root is what puts a screen on the canvas. */

:root {
  --ci-canvas: var(--gaia-background);
  --ci-surface: var(--gaia-card);
  --ci-fill: var(--gaia-muted);
  --ci-line: var(--gaia-border);
  --ci-shadow-lift:
    0 1px 2px oklch(from var(--gaia-foreground) l c h / 0.05),
    0 10px 30px oklch(from var(--gaia-foreground) l c h / 0.06);

  --ci-space-1: 4px;
  --ci-space-2: 8px;
  --ci-space-3: 12px;
  --ci-space-4: 16px;
  --ci-space-5: 24px;
  --ci-space-6: 32px;
  --ci-space-7: 48px;

  --ci-width-chat: 760px;
  --ci-width-list: 1120px;
  --ci-width-sheet: 860px;
  --ci-width-reading: 680px;

  --ci-radius-control: var(--gaia-radius-md);
  --ci-radius-card: var(--gaia-radius-xl);
  --ci-radius-pill: var(--gaia-radius-pill);

  --ci-type-question: var(--gaia-font-weight-normal) 1.875rem/2.25rem var(--gaia-font-sans);
  --ci-type-insight-title: var(--gaia-font-weight-semibold) 1.875rem/2.25rem var(--gaia-font-sans);
  --ci-type-figure: var(--gaia-font-weight-semibold) 1.5rem/2rem var(--gaia-font-sans);
  --ci-type-title: var(--gaia-font-weight-semibold) 1rem/1.5rem var(--gaia-font-sans);
  --ci-type-body: var(--gaia-font-weight-normal) 1rem/1.5rem var(--gaia-font-sans);
  --ci-type-control: var(--gaia-font-weight-normal) 0.875rem/1.25rem var(--gaia-font-sans);
  --ci-type-label: var(--gaia-font-weight-semibold) 0.875rem/1.25rem var(--gaia-font-sans);
  --ci-type-caption: var(--gaia-font-weight-normal) 0.75rem/1rem var(--gaia-font-sans);
  --ci-type-kicker: var(--gaia-font-weight-semibold) 0.625rem/0.875rem var(--gaia-font-sans);

  --ci-ease: cubic-bezier(0.2, 0, 0, 1);
  --ci-duration-press: 120ms;
  --ci-duration-pop: 140ms;
  --ci-duration-open: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ci-duration-press: 0ms;
    --ci-duration-pop: 0ms;
    --ci-duration-open: 0ms;
  }
}

.ci-root {
  background: var(--ci-canvas);
  color: var(--gaia-foreground);
}

.ci-scroll {
  scrollbar-gutter: stable;
}


/* /src/features/carbon-intelligence/chat/components/ci-list-page.css */
/* A list page: the header row stays, the column under it scrolls. The column is as wide as a list
   gets and centred on the page, and the header's title and actions line up with its edges; where
   the page is narrower than that, the column takes the page's width inside the usual gutters. The
   assistant opens in a column of its own beside the page, so the page simply narrows. */

.ci-list-page {
  /* Half of what the list column leaves, never less than the page's own gutter. */
  --ci-list-page-side: max(var(--ci-space-6), calc((100% - var(--ci-width-list)) / 2));
  --ci-list-page-start: max(
    calc(var(--ci-space-6) + var(--shell-header-inset, 0px)),
    calc((100% - var(--ci-width-list)) / 2)
  );

  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ci-list-page > .ci-page-header {
  padding-right: var(--ci-list-page-side);
  padding-left: var(--ci-list-page-start);
}

.ci-list-page__scroll {
  flex: 1;
  min-height: 0;
  padding: 0 var(--ci-list-page-side) 40px var(--ci-list-page-start);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-list-page__column {
  max-width: var(--ci-width-list);
  margin: 0 auto;
}

/* The filters first, the search at the row's end: the one order of every list page's toolbar.
   The row never wraps. The search takes the room the filters leave and folds into a button when
   that room runs out (see ci-list-toolbar.css); while it is open in that state it takes the row and
   the filters step aside. Filters that still do not fit scroll sideways on their one row. */
.ci-list-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ci-space-4);
  align-items: center;
  min-height: 40px;
  margin-bottom: var(--ci-space-5);
}

.ci-list-toolbar > .ci-segmented {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Filters that do not fit scroll sideways on their one row, faded at the edge they run past: the
   fade follows the row's own scroll, so a row that fits, and so cannot scroll, shows none. */
@supports (animation-timeline: scroll()) {
  .ci-list-toolbar > .ci-segmented {
    animation: ci-list-filters-fade linear both;
    animation-timeline: scroll(self inline);
  }
}

@keyframes ci-list-filters-fade {
  from {
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  to {
    mask-image: linear-gradient(to right, transparent, #000 32px);
  }
}

.ci-list-toolbar:has(> .ci-search-room[data-open]) > .ci-segmented {
  display: none;
}

.ci-list-group + .ci-list-group {
  margin-top: var(--ci-space-5);
}

.ci-list-group__label {
  display: block;
  margin: 0 0 var(--ci-space-2) 2px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-list-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  list-style: none;
}

/* One row: a glyph, two lines of text, when, and the row's menu. Every row is the same
   height, whatever it holds, so a list never jumps as rows change. */
.ci-list-row {
  position: relative;
  display: flex;
  gap: var(--ci-space-3);
  align-items: center;
  height: 64px;
  padding: 0 var(--ci-space-2) 0 var(--ci-space-4);
  transition: background var(--ci-duration-press) ease-out;
}

.ci-list-row + .ci-list-row {
  border-top: 1px solid var(--ci-line);
}

.ci-list-row:hover,
.ci-list-row:focus-within,
.ci-list-row[data-open='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.45);
}

/* The part of the row that opens it: the glyph, the text and the time, edge to edge. */
.ci-list-row__open {
  display: flex;
  flex: 1;
  gap: var(--ci-space-3);
  align-items: center;
  align-self: stretch;
  min-width: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
  outline: none;
}

.ci-list-row__open:focus-visible {
  border-radius: var(--ci-radius-control);
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

/* What the row stands for, as one quiet 16px line glyph with no tile behind it. */
.ci-list-glyph {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-list-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ci-list-row__title {
  display: flex;
  gap: var(--ci-space-2);
  align-items: center;
  min-width: 0;
  font: var(--ci-type-label);
}

.ci-list-row__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-list-row__line {
  min-width: 0;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-list-row__line-lead {
  color: var(--gaia-foreground);
}

/* A short word beside the title: "Shared with you", "Archived". */
.ci-list-badge {
  flex-shrink: 0;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-fill) l c h / 0.8);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  line-height: 20px;
}

/* When: the reader's own clock, so it is written once the page is live; its place is held. */
.ci-list-row__when {
  flex-shrink: 0;
  min-width: 56px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The row's menu: there on hover, on keyboard focus and while open, its place always kept. */
.ci-list-row__menu {
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  opacity: 0;
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-list-row:hover .ci-list-row__menu,
.ci-list-row:focus-within .ci-list-row__menu,
.ci-list-row[data-open='true'] .ci-list-row__menu {
  opacity: 1;
}

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

/* ---- while the list is read ---- */

.ci-list-skeleton__label {
  width: 64px;
  height: 16px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__glyph {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.ci-list-skeleton__lines > span {
  height: 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-list-skeleton__row {
  animation: ci-list-skeleton 1.4s linear infinite;
}

@keyframes ci-list-skeleton {
  50% {
    opacity: 0.55;
  }
}

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

/* A row with nothing to manage keeps the row's right edge at the card's padding. */
.ci-list-row[data-menu='none'] {
  padding-right: var(--ci-space-4);
}


/* /src/features/carbon-intelligence/chat/components/library/component-content.css */
/* What sits inside an answer card, below its header: one row of view controls, the rows or the
   chart, a fold that says what it hides, and at most one line under it. The content measures its
   own width (a container), so the same card reads in the 760 px chat column and the 400 px panel.
   Colours come from Gaia through the CI aliases; one series is chart colour 1. */

.ci-content {
  container: ci-content / inline-size;
  --ci-row-columns: minmax(0, 13rem) minmax(48px, 1fr) 4.5rem 3.5rem;
  color: var(--gaia-foreground);
  font-size: 14px;
  line-height: 20px;
}

/* A button never keeps the browser's own type (13.33 px, normal): names, focus links and the
   fold's Show read as the content's 14/20. */
.ci-content button {
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.ci-content sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: -0.2em;
}

/* ---- the control row: a caption on the left, at most two segmented controls on the right ---- */

.ci-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 28px;
  margin: 0 0 8px;
}

.ci-control-row__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-control-row__caption b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-control-row__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 8px;
  max-width: 100%;
}

@container ci-content (max-width: 520px) {
  .ci-control-row {
    flex-wrap: wrap;
  }
}

.ci-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}
.ci-segmented button {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}
.ci-segmented button:hover {
  color: var(--gaia-foreground);
}
.ci-segmented button[aria-checked='true'] {
  background: var(--ci-surface);
  box-shadow: 0 0 0 1px var(--ci-line);
  color: var(--gaia-foreground);
  font-weight: 600;
}
.ci-segmented button:disabled {
  cursor: default;
  opacity: 0.4;
}
.ci-segmented button:disabled:hover {
  color: var(--gaia-muted-foreground);
}
.ci-segmented button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

/* A series key: a swatch and its word, never a colour alone. */
.ci-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ci-key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ci-key i[data-shape='ring'] {
  border: 1.5px solid var(--gaia-muted-foreground);
  border-radius: 50%;
  background: var(--ci-surface);
}
.ci-key i[data-shape='dot'] {
  border-radius: 50%;
}
.ci-key i[data-shape='hollow'] {
  border: 1.5px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}

/* ---- column heads: aligned with their values, the unit written once ---- */

.ci-heads {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: end;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-heads > span:not(:first-child) {
  text-align: right;
}

/* ---- ranked rows: name, bar, tonnes, share, read left to right in one line ---- */

.ci-ranked {
  margin: 0;
  padding: 0;
  list-style: none;
}

@container ci-content (max-width: 520px) {
  .ci-heads,
  .ci-ranked {
    --ci-row-columns: minmax(0, 1fr) 40px 3.75rem 3.25rem;
  }
}

.ci-ranked-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-ranked-row[data-pickable] {
  cursor: pointer;
}
.ci-ranked-row[data-pickable]:hover {
  background: oklch(from var(--ci-fill) l c h / 0.25);
}

.ci-ranked-row__label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-ranked-row__label > span,
.ci-ranked-row__label > .ci-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A drilling row's name is its button: it looks like the name, and shows where focus is. */
.ci-row-name {
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-row-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-row-name:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-ranked-row__label .ci-quote {
  flex-shrink: 0;
}

.ci-ranked-row__value {
  text-align: right;
}
.ci-ranked-row__share {
  text-align: right;
  color: var(--gaia-muted-foreground);
}

/* A bar's lane: the track, and the share of the largest row filled in the series colour. */
.ci-track {
  display: flex;
  overflow: hidden;
  height: 8px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-line) calc(l + 0.04) c h);
}
.ci-track > span {
  height: 100%;
  background: var(--gaia-chart-1);
}
.ci-track > span:last-child {
  border-radius: 0 var(--ci-radius-pill) var(--ci-radius-pill) 0;
}
.ci-track[data-thin] {
  height: 6px;
}

/* Where the running share passes the Pareto mark: a hairline under the row; the caption says it. */
.ci-pareto {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 0;
  border-top: 1px solid oklch(from var(--gaia-foreground) l c h / 0.45);
}

/* ---- the fold: how many are hidden, how many tonnes, what share, and Show ---- */

.ci-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-fold button {
  flex-shrink: 0;
  height: 28px;
  font-size: 14px;
  line-height: 20px;
  padding: 0 8px;
  margin-right: -8px;
  border-radius: 6px;
  font-weight: 600;
  color: var(--gaia-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-fold button:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

/* One line under the content: what is not drawn and why. */
.ci-content-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

/* What a card says when it has nothing to draw: one line at the card's table size. */
.ci-nothing-recorded {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

/* The one sentence a card says when the drawing failed and the figures follow as a table. */
.ci-content-failed {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-content-failed b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ci-segmented button,
  .ci-fold button {
    transition: none;
  }
}

/* ---- the table view of ranked rows: the header over its column, a total row at the foot ---- */

.ci-ranked-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-ranked-table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
}
.ci-ranked-table td {
  height: 28px;
  padding: 0 12px 0 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
}
.ci-ranked-table th:last-child,
.ci-ranked-table td:last-child {
  padding-right: 0;
}
.ci-ranked-table .ci-ranked-table__number {
  text-align: right;
  white-space: nowrap;
}
.ci-ranked-table__name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-ranked-table__name > span:first-child,
.ci-ranked-table__name > .ci-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-ranked-table tr[data-pickable] {
  cursor: pointer;
}
.ci-ranked-table__share {
  width: 13rem;
}
.ci-ranked-table__share .ci-track {
  display: inline-flex;
  width: 8rem;
  margin-right: 8px;
  vertical-align: middle;
}
.ci-ranked-table__share > span:last-child {
  display: inline-block;
  width: 3.5rem;
  color: var(--gaia-muted-foreground);
}
/* The rows a folded table ends with are rows of the list: the cells' 14/20 and tabular digits,
   in the muted colour that tells them from the ranked rows. */
.ci-ranked-table__fold td {
  color: var(--gaia-muted-foreground);
}
.ci-ranked-table__fold .ci-fold {
  border-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}
.ci-ranked-table__total td {
  border-top: 1px solid var(--ci-line);
  border-bottom: 0;
  font-weight: 600;
}

@container ci-content (max-width: 520px) {
  .ci-ranked-table__share {
    width: 3.5rem;
  }
  .ci-ranked-table__share .ci-track {
    display: none;
  }
}

/* The figure card under the pointer keeps its share whole; the name gives way first. */
.ci-figure-card [data-ci='figure-share'] {
  flex-shrink: 0;
}

/* The unit of a chart's values, written once above it rather than on every tick. */
.ci-axis-title {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
}

/* A fallback table's words clamp to two lines like the card's labels; the full text is on hover. */
.ci-figures-table__words {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* /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 var(--ci-line);
  background: var(--ci-surface);
}

/* 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(from var(--gaia-ai) l c h / 0.25);
}

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

.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: var(--gaia-muted-foreground);
}
.ci-artifact-header-btn:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.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(from var(--ci-fill) l c h / 0.45);
}
.ci-artifact-row[data-open='true'] {
  border-color: oklch(from var(--gaia-ai) l c h / 0.35);
  background: oklch(from var(--gaia-ai) l c h / 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(from var(--ci-fill) l c h / 0.8);
  color: var(--gaia-muted-foreground);
}
.ci-artifact-glyph[data-origin='generated'] {
  background: oklch(from var(--gaia-ai) l c h / 0.12);
  color: var(--gaia-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(--ci-radius-card);
  background: var(--ci-surface);
}

.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: var(--gaia-muted-foreground);
  pointer-events: none;
  transform: translateY(-50%);
}
.ci-artifacts-page .ci-artifact-list {
  padding: 0;
}
.ci-artifacts-page .ci-artifact-row {
  border-color: var(--ci-line);
  background: var(--ci-surface);
}
.ci-artifacts-page .ci-artifact-row:hover {
  border-color: var(--gaia-muted-foreground);
}

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

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

/* The card an artifact came from, lit for a moment after "Show in conversation" found it. */
[data-ci-found='true'] {
  border-radius: var(--ci-radius-card);
  outline: 2px solid oklch(from var(--gaia-ai) l c h / 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;
}

/* A dialog that holds its top: a fixed way down the window, growing downward as its content
   does, and never past the window's bottom margin. */
.gaia-dialog__viewport.control-modal-hold-top {
  --control-modal-top: 14vh;
  align-items: flex-start;
  padding-top: var(--control-modal-top);
}
.control-modal-hold-top .gaia-dialog__surface {
  max-height: calc(100vh - var(--control-modal-top) - 24px);
}

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

/* The one line under a settled answer: how it was worked out and what it stands on at the left,
   the actions at the right, 32 px tall. The steps open in place under their own line, and the
   actions stay level with that line rather than with the middle of what opened. */
.ci-answer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-top: 8px;
}

.ci-answer-foot {
  display: flex;
  flex: 1;
  gap: 4px 12px;
  align-items: flex-start;
  min-width: 0;
  min-height: 32px;
  padding-top: 8px;
}

/* In the line the steps' summary keeps to one line; opened, the steps below say it in full. */
.ci-answer-foot .ci-settled-steps {
  min-width: 0;
  margin: 0;
}

.ci-answer-foot .ci-settled-steps > [data-ci='rail-toggle'] > button {
  max-width: 100%;
}

.ci-answer-foot .ci-settled-steps > [data-ci='rail-toggle'] > button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the line is short (the panel, with Save as insight among the actions) the source gives way
   too and ends in an ellipsis, so it never runs under the actions. The full words stay in its
   popover, or in its tooltip where it has none. */
.ci-answer-foot .ci-answer-source {
  height: 24px;
  margin-top: -4px;
}

.ci-answer-source > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Where the figures came from and when: muted 12 px, one line, opening what the answer stands on. */
.ci-answer-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: var(--ci-radius-control);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--ci-duration-press) ease-out;
}
button.ci-answer-source:hover,
button.ci-answer-source[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* What an answer stands on, in the popover the source line opens. */
.ci-answer-sources {
  padding: 12px;
}
.ci-answer-sources__heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gaia-muted-foreground);
}
.ci-answer-sources__as-of {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--ci-line);
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-source-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-source-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--ci-radius-control);
  font-size: 14px;
  text-align: left;
}
button.ci-source-list__row:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-source-list__label {
  min-width: 0;
  color: var(--gaia-foreground);
}
.ci-source-list__detail {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* 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: var(--gaia-muted-foreground);
  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(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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: var(--gaia-muted-foreground);
  transition: background 120ms;
}
.ci-quote-inline:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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 var(--ci-line);
  border-radius: 12px;
  background: var(--ci-surface);
}
.ci-feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* The fold under a long table: the rows past the first eight open in place, under it. */
.ci-rows-show-all {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: var(--gaia-radius-md);
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  transition: background 120ms ease-out;
}
.ci-rows-show-all:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* The mark on a row that quotes itself when pressed: smaller than a button, same reveal. */
.ci-quote-mark {
  width: 16px;
  height: 16px;
}

/* A chart and the card naming the figure under the pointer or the focus. The card is placed by a
   transform from the frame's corner, so following the pointer never moves anything in the flow. */
.ci-chart-frame {
  position: relative;
}

.ci-figure-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: ci-figure-card-in 140ms var(--ci-ease);
}
@keyframes ci-figure-card-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ci-figure-card {
    animation: none;
  }
}
/* In a narrow chart (the assistant panel's) the card takes two lines: the name on the first, the
   figure, its share and the question on the second, never wider than the chart. */
.ci-figure-card[data-lines='2'] {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  height: auto;
  padding: 6px 12px;
}
.ci-figure-card[data-lines='2'] [data-ci='figure-name'] {
  grid-column: 1 / -1;
  line-height: 16px;
}
.ci-figure-card[data-lines='2'] .ci-figure-card__value {
  line-height: 20px;
}
.ci-figure-card__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-figure-card__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gaia-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-figure-card__why {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-foreground);
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-figure-card__why:hover {
  text-decoration-color: currentColor;
}


/* /src/features/carbon-intelligence/chat/components/library/key-figures.css */
/* Key figures: the total leads, one share bar divides it, the parts follow in one row. */

.ci-key-figures__lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.ci-key-figures__total {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-key-figures__total span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__previous {
  text-align: right;
}

.ci-key-figures__change {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ci-key-figures__bar {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: var(--ci-radius-pill);
}

.ci-key-figures__parts {
  display: grid;
  grid-template-columns: repeat(var(--ci-key-figures-count), minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.ci-key-figures__part[data-pickable] {
  cursor: pointer;
}

.ci-key-figures__name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-key-figures__value {
  margin: 2px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-key-figures__value small {
  margin-left: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 340px) {
  .ci-key-figures__parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }
}


/* /src/features/carbon-intelligence/chat/components/ci-list-toolbar.css */
/* The toolbar of a list page: pill choices on the canvas, then one white search field.

   The search sits in the room the filters leave (`.ci-search-room`, which grows into it and is a
   size container). The field is up to 320px wide and shrinks with the room down to 220px; below
   that only the search button shows, and pressing it opens the field in the row, the
   filters stepping aside until the search is closed empty. */

.ci-search-room {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 32px;
  container: ci-search-room / inline-size;
}

.ci-search-room__toggle {
  display: none;
}

@container ci-search-room (width < 220px) {
  .ci-search-room:not([data-open]) .ci-search-field {
    display: none;
  }

  .ci-search-room:not([data-open]) .ci-search-room__toggle {
    display: inline-flex;
    align-items: center;
    height: 40px;
  }
}

.ci-search-field {
  position: relative;
  display: flex;
  flex: 0 1 320px;
  align-items: center;
  min-width: 220px;
  height: 40px;
  color: var(--gaia-muted-foreground);
}

.ci-search-field > svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.ci-search-field input {
  width: 100%;
  height: 100%;
  padding: 0 36px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  outline: none;
  appearance: none;
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-search-field input::placeholder {
  color: var(--gaia-muted-foreground);
}

/* The browser's own clear cross would sit beside ours. */
.ci-search-field input::-webkit-search-cancel-button {
  appearance: none;
}

.ci-search-field input:focus-visible {
  border-color: var(--gaia-ring);
}

.ci-search-field__clear {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ci-radius-control);
  background: transparent;
  color: var(--gaia-muted-foreground);
  transition: background var(--ci-duration-press) ease-out;
}

.ci-search-field__clear:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-search-field__clear:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

.ci-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-1);
}

.ci-segmented__option {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--ci-radius-pill);
  background: transparent;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}

.ci-segmented__option:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-segmented__option[aria-checked='true'] {
  background: var(--gaia-foreground);
  color: var(--gaia-card);
}

.ci-segmented__option:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 2px;
}


/* /src/features/carbon-intelligence/chat/components/component-card.css */
/* An answer card: a header with the title over one muted line, icon buttons on the right; the
   body; and the footer with what it covers. 16 px inside, on the card's white. */

.ci-card {
  outline: none;
}

.ci-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 8px 16px;
}

.ci-card-head__text {
  min-width: 0;
  padding-top: 2px;
}

.ci-card-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--gaia-foreground);
}

/* A sentence a card says in place of its drawing: it could not be drawn. */
.ci-card-note {
  margin: 8px 0;
  font: var(--ci-type-control);
  color: var(--gaia-muted-foreground);
}

.ci-card-subtitle {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.ci-card-head__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Tools on hover: there under the pointer, with the focus inside, while one of them has
   something open, and on an expanded card; their place is kept the whole time. */
.ci-card[data-ci-tools='hover'] .ci-card-head__actions {
  opacity: 0;
  transition: opacity var(--ci-duration-press) ease-out;
}

.ci-card[data-ci-tools='hover']:hover .ci-card-head__actions,
.ci-card[data-ci-tools='hover']:focus-within .ci-card-head__actions,
.ci-card[data-ci-tools='hover'][data-ci-expanded] .ci-card-head__actions,
.ci-card[data-ci-tools='hover'] .ci-card-head__actions:has([aria-expanded='true']) {
  opacity: 1;
}

@media (hover: none) {
  .ci-card[data-ci-tools='hover'] .ci-card-head__actions {
    opacity: 1;
  }
}

.ci-card-drill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 8px;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
}
.ci-card-drill span {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-card-body {
  padding: 0 16px 12px;
}

/* Chart or table, in an expanded card: a small segmented control above the figures. */
.ci-card-view-switch {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 8px;
  padding: 2px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}
.ci-card-view-switch button {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--gaia-muted-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-card-view-switch button[aria-pressed='true'] {
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font-weight: 600;
}


/* /src/features/carbon-intelligence/chat/components/library/comparison.css */
/* A comparison: the two totals lead, then one row per unit with a dot for each period. */

.ci-comparison__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.ci-comparison__totals small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__totals b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-comparison__arrow {
  padding-bottom: 2px;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__change {
  padding-bottom: 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.ci-comparison__rows {
  --ci-row-columns: minmax(0, 11rem) minmax(64px, 1fr) 8.5rem 4.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ci-line);
}

@container ci-content (max-width: 520px) {
  .ci-comparison__rows {
    --ci-row-columns: minmax(0, 1fr) 7.5rem 4rem;
  }
  .ci-comparison__rows .ci-dumbbell {
    display: none;
  }
}

.ci-comparison__row {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}

.ci-comparison__values {
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
  color: var(--gaia-muted-foreground);
}
.ci-comparison__values i {
  font-style: normal;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
}

.ci-comparison__difference {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* The two dots of one unit on one scale, joined by a line when both periods hold tonnes. */
.ci-dumbbell {
  position: relative;
  height: 12px;
  margin: 0 6px;
  border-top: 1px solid transparent;
  background: linear-gradient(var(--ci-line), var(--ci-line)) center / 100% 1px no-repeat;
}
.ci-dumbbell__span {
  position: absolute;
  top: 4.5px;
  height: 3px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-line) calc(l - 0.08) c h);
}
.ci-dumbbell__first,
.ci-dumbbell__second {
  position: absolute;
  top: 1px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
}
.ci-dumbbell__first {
  border: 1.5px solid var(--gaia-muted-foreground);
  background: var(--ci-surface);
}
.ci-dumbbell__second {
  background: var(--gaia-foreground);
}


/* /src/features/carbon-intelligence/chat/components/library/coverage-grid.css */
/* The coverage grid: a label, a month strip and the tonnes per row, read left to right. The strip
   keeps one slot per month at any width, so 12 or 36 months fit without a sideways scroll. */

.ci-coverage {
  --ci-coverage-columns: minmax(0, 1fr) 180px 4.5rem;
}

/* The content is its own container, so the narrower columns are set on its rows. */
@container ci-content (max-width: 520px) {
  .ci-coverage__heads,
  .ci-coverage__row {
    --ci-coverage-columns: minmax(0, 1fr) 120px 3.5rem;
  }
}

.ci-coverage__heads,
.ci-coverage__row {
  display: grid;
  grid-template-columns: var(--ci-coverage-columns);
  column-gap: 16px;
  align-items: center;
}

.ci-coverage__heads {
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-coverage__heads > span:last-child {
  text-align: right;
}
.ci-coverage__months {
  display: flex;
}
.ci-coverage__months > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  text-align: center;
  white-space: nowrap;
}

.ci-coverage__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-coverage__row {
  min-height: 28px;
  padding: 4px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-coverage__row[data-ci='coverage-group'] {
  min-height: 48px;
}

.ci-coverage__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ci-coverage__label > span,
.ci-coverage__label > button,
.ci-coverage__label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-coverage__label > button {
  text-align: left;
  border-radius: 4px;
}
.ci-coverage__label > button:hover {
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-coverage__label > button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-coverage__pattern {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ci-coverage__pattern b {
  font-weight: 600;
}
.ci-coverage__pattern span,
.ci-coverage__label small {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-coverage__value {
  text-align: right;
}

/* One month strip: an equal slot per month, a bar sized by its tonnes, a gap a low dash. */
.ci-strip {
  display: flex;
  align-items: flex-end;
  height: 22px;
}
.ci-strip__slot {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 100%;
}
.ci-strip__bar {
  width: 72%;
  min-width: 1px;
  border-radius: 2px;
  background: var(--gaia-chart-1);
}
.ci-strip__bar[data-negative] {
  border: 1.25px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}
.ci-strip__bar[data-gap] {
  border-radius: 1.5px;
}
.ci-strip__bar[data-gap='due'],
.ci-coverage__swatch[data-gap='due'] {
  background: oklch(from var(--gaia-warning) l c h / 0.8);
}
.ci-strip__bar[data-gap='none'],
.ci-coverage__swatch[data-gap='none'] {
  background: var(--ci-line);
}

.ci-coverage__swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin: 0 4px 0 0;
  border-radius: 1.5px;
  vertical-align: middle;
}


/* /src/features/carbon-intelligence/chat/components/library/entries-table.css */
/* The entries table: two-line rows, five columns that fit the card, never a sideways scroll. */

.ci-entries__core {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
  transition: background var(--ci-duration-press) ease-out;
}
.ci-entries__core:hover {
  background: oklch(from var(--ci-fill) l c h / 0.5);
  color: var(--gaia-foreground);
}

.ci-entries__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-entries__table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
}
.ci-entries__table th:first-child {
  width: 44%;
}
.ci-entries__table th:last-child {
  width: 4.5rem;
}
.ci-entries__table td {
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  vertical-align: top;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-entries__table th:last-child,
.ci-entries__table td:last-child {
  padding-right: 0;
}
.ci-entries__table [data-numeric] {
  text-align: right;
}
.ci-entries__table td:last-child {
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-entries__table td:last-child b {
  font-weight: 600;
}

/* The title line keeps its 20 px when the 22 px quote button sits in it. */
.ci-entries__title {
  display: flex;
  align-items: center;
  height: 20px;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-entries__title b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-entries__table small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A repeated entry: the one amber mark on the card, with its words. */
.ci-entries__repeat {
  flex-shrink: 0;
  padding: 0 7px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--gaia-warning) l c h / 0.13);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--gaia-badge-warning-foreground, var(--gaia-foreground));
  white-space: nowrap;
}

.ci-control-row__caption .ci-entries__repeat {
  margin-left: 8px;
}

/* A calculation that did not complete: its word beside the title, red when it failed. */
.ci-entries__state {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
}
.ci-entries__state[data-state='failed'] {
  color: var(--gaia-destructive);
}

/* In the panel the entry keeps its period and tonnes, or its activity source and tonnes; the
   columns left out are the ones `SECONDARY_COLUMNS` names, and expanded their values join the
   entry's second line. */
@container ci-content (max-width: 520px) {
  .ci-entries__table th:first-child {
    width: 48%;
  }
  .ci-entries__table [data-column='input'],
  .ci-entries__table [data-column='factor'],
  .ci-entries__table [data-column='method'],
  .ci-entries__table [data-column='quality'],
  .ci-entries__table [data-column='import'] {
    display: none;
  }
}


/* /src/features/carbon-intelligence/chat/components/library/factor-table.css */
/* The factor table: a stored label of at most two lines, its unit and year beside it, the entries
   that use it and its share as a bar. Laid out to the card's width, never a sideways scroll. */

.ci-factors__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ci-factors__table th {
  padding: 0 12px 4px 0;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: left;
  white-space: nowrap;
}
.ci-factors__table th:nth-last-child(2) {
  width: 4rem;
}
.ci-factors__table th[data-column='detail'] {
  width: 8.5rem;
}
.ci-factors__table th[data-column='share'] {
  width: 12rem;
}
.ci-factors__table td {
  height: 40px;
  padding: 3px 12px 3px 0;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  vertical-align: middle;
}
.ci-factors__table th:last-child,
.ci-factors__table td:last-child {
  padding-right: 0;
}
.ci-factors__table [data-numeric] {
  text-align: right;
}

.ci-factors__name {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ci-factors__name > span:first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 20px;
}

/* A factor's name is its source's whole description: its tooltip wraps instead of running on. */
body:has(.ci-factors__name:hover) .ci-tooltip__body {
  max-width: 360px;
  white-space: normal;
}

.ci-factors__table td[data-column='detail'] {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-factors__table td[data-column='detail'] > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-factors__share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ci-factors__share .ci-track {
  flex: 1 1 auto;
}
.ci-factors__share > span:last-child {
  flex-shrink: 0;
  width: 3rem;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 520px) {
  .ci-factors__table [data-column='detail'] {
    display: none;
  }
  .ci-factors__table th[data-column='share'] {
    width: 3.75rem;
  }
  .ci-factors__share .ci-track,
  .ci-factors__table th [data-wide] {
    display: none;
  }
}

/* The years beside a factor's unit: a caption, never the browser's smaller size. */
.ci-factors small {
  font-size: 12px;
  line-height: 16px;
}


/* /src/features/carbon-intelligence/chat/components/library/import-timeline.css */
/* The import timeline: the period's months as one strip with each import a bar at its day, then
   the imports as one-line rows. Every position is a share of the width, so nothing scrolls. */

.ci-imports__strip {
  margin: 0 0 8px;
}
.ci-imports__plot {
  position: relative;
  height: 36px;
  border-bottom: 1px solid var(--ci-line);
}
.ci-imports__month {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid oklch(from var(--ci-line) l c h / 0.6);
}
.ci-imports__mark {
  position: absolute;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--gaia-chart-1);
}
.ci-imports__mark[data-empty] {
  bottom: 2px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border: 1.25px solid var(--gaia-muted-foreground);
  border-radius: 50%;
  background: var(--ci-surface);
}
.ci-imports__mark[data-failed] {
  background: var(--gaia-destructive);
}
.ci-imports__mark[data-failed][data-empty] {
  border-color: var(--gaia-destructive);
  background: var(--ci-surface);
}
.ci-imports__heads {
  position: relative;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-imports__heads span {
  position: absolute;
  top: 0;
  padding-left: 4px;
  white-space: nowrap;
}

.ci-imports {
  --ci-imports-columns: minmax(0, 1fr) 4.5rem 12rem 3.5rem;
}
/* The content is its own container, so the narrower columns are set on its rows. */
@container ci-content (max-width: 520px) {
  .ci-imports__row {
    --ci-imports-columns: minmax(0, 1fr) 4rem 3rem;
  }
  .ci-imports__row .ci-track {
    display: none;
  }
}

.ci-imports__columns {
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-imports__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-imports__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ci-imports-columns);
  column-gap: 12px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-imports__day {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-align: right;
  white-space: nowrap;
}
.ci-imports__count {
  text-align: right;
}
.ci-imports__failed {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--gaia-destructive);
}


/* /src/features/carbon-intelligence/chat/components/library/period-bridge.css */
/* A period bridge as a horizontal waterfall: name, lane, signed tonnes, a tag for units that only
   one period holds. Rises are filled, falls hollow, totals solid; one colour throughout. */

.ci-bridge {
  --ci-row-columns: minmax(0, 10rem) minmax(80px, 1fr) 4.5rem 7.5rem;
  --ci-bridge-row: 22px;
}

/* In a narrow card the tag column goes: a short tag sits beside the name instead, so each unit
   with no later data stays marked and every row keeps one line. */
@container ci-content (max-width: 520px) {
  .ci-bridge__rows,
  .ci-bridge__axis {
    --ci-row-columns: minmax(0, 1fr) 18% 4rem 0;
  }
  .ci-bridge__tag {
    display: none;
  }
}

.ci-bridge__split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__split > b {
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-foreground);
}
.ci-bridge__split b {
  font-weight: 600;
  color: var(--gaia-foreground);
}

.ci-bridge__why {
  flex-basis: 100%;
}

.ci-bridge__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-bridge__row,
.ci-bridge__axis {
  display: grid;
  grid-template-columns: var(--ci-row-columns);
  column-gap: 12px;
  align-items: center;
}
.ci-bridge__row {
  min-height: var(--ci-bridge-row);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__row[data-kind='total'] {
  font-weight: 600;
}

.ci-bridge__lane {
  position: relative;
  align-self: stretch;
  border-left: 1px solid var(--ci-line);
}
/* Bars sit on the row's first line, so a wrapped name never stretches them. */
.ci-bridge__bar {
  position: absolute;
  top: 6px;
  height: calc(var(--ci-bridge-row) - 12px);
  border-radius: 2px;
}
.ci-bridge__bar[data-kind='total'] {
  top: 4px;
  height: calc(var(--ci-bridge-row) - 8px);
  background: var(--gaia-foreground);
}
.ci-bridge__row:first-child .ci-bridge__bar[data-kind='total'] {
  background: oklch(from var(--ci-line) calc(l - 0.08) c h);
}
.ci-bridge__bar[data-kind='rise'] {
  background: var(--gaia-chart-1);
}
.ci-bridge__bar[data-kind='fall'] {
  border: 1.5px solid var(--gaia-chart-1);
  background: var(--ci-surface);
}

.ci-bridge__value {
  text-align: right;
  white-space: nowrap;
}

.ci-bridge__mark {
  flex-shrink: 0;
}

.ci-bridge__tag span,
.ci-bridge__mark {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 0 7px;
  border-radius: var(--ci-radius-pill);
  background: oklch(from var(--ci-fill) l c h / 0.7);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-bridge__axis {
  height: 20px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: oklch(from var(--gaia-muted-foreground) calc(l + 0.22) c h);
  font-variant-numeric: tabular-nums;
}
.ci-bridge__ticks {
  position: relative;
  align-self: stretch;
  border-top: 1px solid var(--ci-line);
}
.ci-bridge__ticks span {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
}
.ci-bridge__ticks span:first-child {
  transform: none;
}
.ci-bridge__ticks span:last-child {
  transform: translateX(-100%);
}
.ci-bridge__unit {
  text-align: right;
}


/* /src/features/carbon-intelligence/chat/components/library/profile-card.css */
/* One entity in full: name and kind, a row of figures, a short attribute list, its quality. */

.ci-profile__name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.ci-profile__name span {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-profile__name small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-profile__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 0 12px;
  border-top: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-profile__figures b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.ci-profile__figures span {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}
.ci-profile__figures small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Attributes run on as one wrapping line: short ones share a row, a long one takes its own. */
.ci-profile__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 16px;
}
.ci-profile__attributes > div {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.ci-profile__attributes dt {
  color: var(--gaia-muted-foreground);
}
.ci-profile__attributes dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ci-profile__section {
  margin-top: 12px;
}

.ci-profile__kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-profile__quality {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-size: 12px;
  line-height: 16px;
}
.ci-profile__quality .ci-profile__kicker {
  margin: 0;
  width: 6rem;
}
.ci-profile__quality-bar {
  display: flex;
  gap: 2px;
  width: 10rem;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ci-radius-pill);
}
.ci-profile__quality-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--gaia-muted-foreground);
}

@container ci-content (max-width: 520px) {
  .ci-profile__attributes {
    flex-direction: column;
  }
}


/* /src/features/carbon-intelligence/chat/components/library/site-map.css */
/* The site map: a map fitted to where the tonnes are, the ranked sites beside it, and one line
   under both saying what the view leaves out. In the panel the list moves under the map. */

.ci-sites__body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(13rem, 1fr);
  column-gap: 24px;
  align-items: start;
}
@container ci-content (max-width: 560px) {
  .ci-sites__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
}
/* The map keeps the card inside its height: at most this tall in a wide card, lower in the panel,
   where it draws centred at its own proportions. */
.ci-sites__map svg,
.ci-sites__loading {
  max-height: 260px;
}
@container ci-content (max-width: 520px) {
  .ci-sites__map svg,
  .ci-sites__loading {
    max-height: 180px;
  }
}

.ci-sites__map svg,
.ci-sites__loading {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 430 / 250;
}
.ci-sites__loading {
  border-radius: 8px;
  background: oklch(from var(--ci-fill) l c h / 0.4);
}
.ci-sites__sea {
  fill: oklch(from var(--ci-fill) l c h / 0.35);
}
.ci-sites__land {
  fill: oklch(from var(--ci-line) l c h / 0.7);
  stroke: var(--ci-surface);
  stroke-width: 0.6;
}
.ci-sites__bubble {
  fill: var(--gaia-chart-1);
  fill-opacity: 0.78;
  stroke: var(--ci-surface);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill-opacity var(--ci-duration-press) ease-out;
}
.ci-sites__bubble[data-aimed] {
  fill-opacity: 1;
  stroke: var(--gaia-foreground);
}
.ci-sites__bubble[data-empty] {
  fill: none;
  stroke: var(--gaia-muted-foreground);
  stroke-width: 1;
}
.ci-sites__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  fill: var(--gaia-foreground);
  paint-order: stroke;
  stroke: oklch(from var(--ci-fill) l c h / 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.ci-sites__heads {
  display: flex;
  justify-content: space-between;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ci-line);
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
}

.ci-sites__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ci-sites__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem 3.25rem;
  column-gap: 8px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid oklch(from var(--ci-line) l c h / 0.6);
  font-variant-numeric: tabular-nums;
}
.ci-sites__value,
.ci-sites__share {
  text-align: right;
}
.ci-sites__share {
  color: var(--gaia-muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ci-sites__bubble {
    transition: none;
  }
}


/* /src/features/carbon-intelligence/chat/components/library/unit-tree.css */
/* The unit tree: the path to the unit in focus, a caret per branch, a name that focuses. */

.ci-unit-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ci-unit-path__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ci-unit-path button {
  color: var(--gaia-muted-foreground);
  text-decoration: underline;
  text-decoration-color: var(--ci-line);
  text-underline-offset: 3px;
}
.ci-unit-path button:hover {
  color: var(--gaia-foreground);
}

.ci-unit-tree__caret {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--gaia-muted-foreground);
}
button.ci-unit-tree__caret:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* The name keeps its full width where it fits; the direct tonnes follow it, or wrap under it. */
.ci-unit-tree__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  min-width: 0;
}
.ci-unit-tree__name > span,
.ci-unit-tree__name > .ci-unit-tree__focus {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-unit-tree__focus {
  overflow: hidden;
  min-width: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-unit-tree__focus:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ci-unit-tree__direct {
  font-size: 12px;
  line-height: 16px;
  color: var(--gaia-muted-foreground);
  white-space: nowrap;
}

.ci-ranked-row[data-level]:not([data-level='0']) .ci-track > span {
  opacity: 0.6;
}

/* In a narrow card the tree keeps its names: the bar goes, the share column says the same. */
@container ci-content (max-width: 520px) {
  .ci-unit-tree .ci-heads,
  .ci-unit-tree .ci-ranked {
    --ci-row-columns: minmax(0, 1fr) 3.75rem 3.25rem;
  }
  .ci-unit-tree .ci-heads > span:nth-child(2),
  .ci-unit-tree .ci-track {
    display: none;
  }
}


/* /src/features/carbon-intelligence/chat/components/ci-state.css */
/* The one shape every Cozero Intelligence state takes. Page: centred in the content column, in
   its top third, on the canvas. Inline: a white card with a hairline, left aligned, in the
   transcript or the panel. */

.ci-state {
  --ci-state-tint: var(--gaia-muted-foreground);
  --ci-state-ink: var(--gaia-muted-foreground);
  display: flex;
  gap: var(--ci-space-4);
  color: var(--gaia-foreground);
}

.ci-state[data-tone='warning'] {
  --ci-state-tint: var(--gaia-warning);
  --ci-state-ink: var(--gaia-badge-warning-foreground);
}

.ci-state[data-tone='danger'] {
  --ci-state-tint: var(--gaia-destructive);
  --ci-state-ink: var(--gaia-badge-destructive-foreground);
}

.ci-state[data-placement='page'] {
  flex-direction: column;
  align-items: center;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 12vh var(--ci-space-5) var(--ci-space-6);
  text-align: center;
}

.ci-state[data-placement='inline'] {
  align-items: flex-start;
  margin: var(--ci-space-3) 0 var(--ci-space-4);
  padding: var(--ci-space-4);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
}

.ci-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--gaia-radius-pill);
  color: var(--ci-state-ink);
  background: oklch(from var(--ci-state-tint) l c h / 0.12);
}

.ci-state-body {
  min-width: 0;
}

/* The page state is as wide as it will ever be, whatever it says, so a title that changes (a
   search being typed) never moves the box it sits in. */
.ci-state[data-placement='page'] .ci-state-body {
  width: 100%;
}

.ci-state-title,
.ci-state-sentence {
  overflow-wrap: anywhere;
}

.ci-state-title {
  margin: 0;
  font: var(--ci-type-title);
  color: var(--gaia-foreground);
}

.ci-state-sentence {
  margin: var(--ci-space-1) 0 0;
  font: var(--ci-type-control);
  color: var(--gaia-muted-foreground);
}

.ci-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-2);
  margin-top: var(--ci-space-4);
}

.ci-state[data-placement='page'] .ci-state-actions {
  justify-content: center;
}

.ci-state-detail {
  margin: var(--ci-space-3) 0 0;
  font: var(--ci-type-caption);
  color: var(--gaia-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Gaia's ghost button carries no resting background and the app's button reset skips Gaia buttons,
   so without this the browser's own grey shows through. */
.ci-state-actions button[data-variant='ghost']:not(:hover) {
  background: transparent;
}


/* /src/features/carbon-intelligence/chat/components/floating-menu.css */
/* Popovers and menus: white on the page, a hairline, the one menu shadow, above everything but
   dialogs. The outer box is positioned by floating-ui; the inner one carries the open transition,
   so the two transforms never fight. */

.ci-floating {
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 0;
  outline: none;
}

.ci-floating__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  overflow: auto;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  transition-timing-function: var(--ci-ease);
}

.ci-menu {
  min-width: 220px;
  padding: 6px;
}

.ci-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  outline: none;
  cursor: pointer;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-menu__item[data-ci-active='true'],
.ci-menu__item[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-menu__item[data-ci-destructive='true'],
.ci-menu__item[data-ci-destructive='true'] .ci-menu__icon {
  color: var(--gaia-destructive);
}

.ci-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ci-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

.ci-menu__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-menu__item[aria-checked='true'] .ci-menu__icon {
  color: var(--gaia-foreground);
}

.ci-menu__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ci-menu__label {
  flex: 1;
  min-width: 0;
}

.ci-menu__description {
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-menu__value {
  color: var(--gaia-muted-foreground);
}

.ci-menu__chevron {
  align-self: center;
  color: var(--gaia-muted-foreground);
}

.ci-menu__heading {
  padding: 8px 10px 4px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-menu__separator {
  height: 1px;
  margin: 6px 4px;
  background: var(--ci-line);
}

/* A tooltip: one short label in navy on the page's text colour, above everything but dialogs. */
.ci-tooltip {
  z-index: 60;
  pointer-events: none;
}

.ci-tooltip__body {
  padding: 4px 8px;
  border-radius: var(--ci-radius-control);
  background: var(--gaia-foreground);
  color: var(--gaia-background);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  transition-timing-function: var(--ci-ease);
}

/* Icon-only controls: 32 px in rows and headers, 28 px inside a card. Quiet until hovered. */
.ci-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-muted-foreground);
  background: transparent;
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}
.ci-icon-button[data-size='card'] {
  width: 28px;
  height: 28px;
}
.ci-icon-button:hover:not(:disabled) {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}
.ci-icon-button[aria-pressed='true'] {
  color: var(--gaia-foreground);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-icon-button:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}
.ci-icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* /src/features/carbon-intelligence/chat/sections/assistant-panel.css */
/* The assistant beside a page: a column of its own at the window's right edge, and the page
   narrows to make room for it, so nothing on the page sits under it. The column widens from the
   right edge as it opens and the panel inside keeps its width, so its contents never reflow while
   it moves. Its width and whether it fits beside the page come from `panelFit`. White frame and header, the canvas inside, the one shadow Cozero Intelligence gives a
   raised surface. */

.ci-panel-dock {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  height: 100%;
  overflow: hidden;
}

/* On a window too narrow for the page and the panel side by side, the panel floats over the
   page's right edge instead, so the page keeps its width. */
.ci-panel-dock[data-placement='over'] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.ci-panel {
  position: relative;
  flex-shrink: 0;
  margin: var(--ci-space-3) var(--ci-space-3) var(--ci-space-3) 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
}

.ci-panel__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 6px;
  cursor: col-resize;
}

.ci-panel__head {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-2);
  align-items: center;
  height: 52px;
  padding: 0 var(--ci-space-2) 0 var(--ci-space-4);
  border-bottom: 1px solid var(--ci-line);
}

.ci-panel__mark {
  flex-shrink: 0;
  color: var(--gaia-ai);
}

.ci-panel__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ci-panel__page {
  color: var(--gaia-muted-foreground);
  font-weight: var(--gaia-font-weight-normal);
}

.ci-panel__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Before the first question. */

.ci-panel-welcome {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--ci-space-4);
  padding-bottom: var(--ci-space-2);
}

.ci-panel-welcome__where {
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-title);
}

.ci-panel-welcome__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--ci-space-2);
}

.ci-panel-welcome__suggestion {
  display: flex;
  gap: var(--ci-space-3);
  align-items: flex-start;
  width: 100%;
  padding: 10px var(--ci-space-3);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-panel-welcome__suggestion:hover:not(:disabled) {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.24);
}

.ci-panel-welcome__suggestion:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: 1px;
}

.ci-panel-welcome__suggestion:disabled {
  opacity: 0.4;
  cursor: default;
}

.ci-panel-welcome__mark {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gaia-ai);
}

.ci-panel-welcome__history {
  display: flex;
  margin-top: auto;
  gap: var(--ci-space-2);
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--ci-space-2);
  border-top: 1px solid var(--ci-line);
  border-radius: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
  transition: color var(--ci-duration-press) ease-out;
}

.ci-panel-welcome__history:hover {
  color: var(--gaia-foreground);
}

.ci-panel-welcome__history:focus-visible {
  outline: 2px solid var(--gaia-ring);
  outline-offset: -2px;
}

.ci-panel-welcome__history-label {
  flex: 1;
  text-align: left;
}

.ci-panel-welcome__count {
  font-variant-numeric: tabular-nums;
}


/* /src/features/carbon-intelligence/chat/sections/command-box.css */
/* The command box: one field and grouped results, a fifth of the way down the window. The
   results area holds one height, so results arriving while typing never move the frame. */

.gaia-dialog__viewport.ci-command-viewport {
  align-items: flex-start;
  padding-top: 20vh;
}

.ci-command {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-card);
  background: var(--ci-surface);
  box-shadow: var(--shadow-md);
  color: var(--gaia-foreground);
}

.ci-command__search {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ci-line);
}

.ci-command__search-icon {
  position: absolute;
  top: 50%;
  left: var(--ci-space-4);
  color: var(--gaia-muted-foreground);
  transform: translateY(-50%);
  pointer-events: none;
}

.ci-command__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--ci-space-4) 0 48px;
  border: 0;
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-body);
  outline: none;
}

.ci-command__results {
  height: min(368px, 50vh);
  padding: var(--ci-space-1) var(--ci-space-2) var(--ci-space-2);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-command__group {
  height: 28px;
  padding: 10px var(--ci-space-2) 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-command__row {
  display: flex;
  gap: var(--ci-space-3);
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-control);
  text-align: left;
  font: var(--ci-type-control);
}

.ci-command__row[aria-selected='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-command__mark {
  flex-shrink: 0;
  color: var(--gaia-ai);
}

.ci-command__glyph {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-command__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ci-command__muted {
  color: var(--gaia-muted-foreground);
}

.ci-command__meta {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
}

.ci-command__foot {
  display: flex;
  flex-shrink: 0;
  gap: var(--ci-space-4);
  align-items: center;
  height: 36px;
  padding: 0 var(--ci-space-4);
  border-top: 1px solid var(--ci-line);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-command__foot kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 2px;
  padding: 0 4px;
  border: 1px solid var(--ci-line);
  border-radius: 4px;
  font: inherit;
  text-align: center;
}


/* /src/features/carbon-intelligence/chat/sections/empty-chat.css */
/* The empty chat fills the room it is given, in three bands: room above, the question, then the
   box with what sits under it. The first and last bands share what is left equally, so the
   question's place depends only on the room, never on the box: the box grows downward on focus,
   into a command's form or past the room's foot (the conversation column then scrolls), and the
   question stays where it is.

   The room under the box is counted from the resting box's foot (the bottom padding adds the
   gap and the resting box's 52 px), so at rest the question and the box are centred together. */

.ci-empty {
  --ci-empty-resting-box: calc(var(--ci-space-6) + 52px);

  /* Exactly the room, whatever the box holds: a taller box overflows into the scrolling column
     rather than making the room taller, which would hand the band above more space. */
  flex: 1 0 0;
  min-height: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--ci-space-5) calc(var(--ci-space-6) + var(--ci-empty-resting-box));
  /* The glow is wider than the column and narrows with the room; the room clips it at the sides.
     Above and below, the scrolling column clips it, and a box taller than the room stays whole. */
  overflow-x: clip;
  container-type: inline-size;
}

.ci-empty::before {
  content: '';
  flex: 1 1 0;
  min-height: var(--ci-space-7);
}

.ci-empty__question-row {
  position: relative;
  width: 100%;
  max-width: var(--ci-width-chat);
}

/* The one soft green glow the product allows: a still field of the AI colour behind the question
   and the box, strongest at the box's top edge and gone at its own edge, so it reads as light
   rather than as a shape. It hangs from the question, so the box growing never moves it, and
   nothing animates, so reduced motion has nothing to turn off. */
.ci-empty__glow {
  position: absolute;
  top: calc(100% + var(--ci-space-6));
  left: 50%;
  z-index: -1;
  width: min(1180px, 80cqi);
  aspect-ratio: 1180 / 560;
  translate: -50% -50%;
  background: radial-gradient(
    closest-side,
    oklch(from var(--gaia-ai) l c h / 0.28),
    oklch(from var(--gaia-ai) l c h / 0.12) 55%,
    transparent
  );
  filter: blur(8px);
  pointer-events: none;
}

.ci-empty__question {
  margin: 0;
  color: var(--gaia-foreground);
  font: var(--ci-type-question);
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

.ci-empty__below {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  /* The band keeps its equal share even when the box outgrows it; the box overflows the band
     instead of taking room from the band above. */
  min-height: 0;
  align-items: center;
  width: 100%;
  max-width: var(--ci-width-chat);
  padding-top: var(--ci-space-6);
}

.ci-empty__composer {
  width: 100%;
}

.ci-empty__starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-2);
  justify-content: center;
  margin-top: var(--ci-space-4);
}

.ci-empty__starter {
  height: 28px;
  padding: 0 var(--ci-space-3);
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-pill);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-caption);
  transition:
    background var(--ci-duration-press) ease-out,
    border-color var(--ci-duration-press) ease-out;
}

.ci-empty__starter:hover:not(:disabled) {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.2);
  background: oklch(from var(--ci-fill) l c h / 0.55);
}

.ci-empty__starter:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The one quiet line a page may put under the suggestions. */
.ci-empty__note {
  margin: var(--ci-space-5) 0 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-align: center;
}

.ci-empty__note:not([data-ready]) {
  visibility: hidden;
}


/* /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. Once the
   person scrolls up, that anchor would carry them down with every line that arrives, so the
   stream holds no anchor until they are back at the bottom. */
.ci-stream {
  overflow-anchor: auto;
}
.ci-stream[data-ci-following='false'] {
  overflow-anchor: none;
}
.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: var(--gaia-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, such as the sources under an
   answer. 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(from var(--ci-fill) l c h / 0.55);
}

.ci-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    oklch(from var(--ci-surface) l c h / 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 var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-canvas) l c h / 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(from var(--gaia-ai) l c h / 0.5);
  background: var(--ci-surface);
}

.ci-file-card[data-status='failed'] {
  border-color: oklch(from var(--gaia-destructive) l c h / 0.45);
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
}

/* One tile standing in for the cards past the second. */
.ci-file-more {
  justify-content: center;
  min-height: 44px;
  color: var(--gaia-muted-foreground);
  cursor: pointer;
}
.ci-file-more:hover {
  border-color: oklch(from var(--gaia-muted-foreground) l c h / 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(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-muted-foreground);
}
.ci-file-card[data-status='failed'] .ci-file-glyph {
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
  color: var(--gaia-destructive);
}
.ci-file-card[data-status='ready'] .ci-file-glyph {
  color: var(--gaia-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: var(--gaia-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-file-state {
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-file-state-failed {
  color: var(--gaia-destructive);
}

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

.ci-file-action {
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--gaia-primary);
  white-space: nowrap;
}
.ci-file-action:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

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

/* ---- 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(from var(--gaia-ai) l c h / 0.18);
  color: var(--gaia-foreground);
}

/* 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(from var(--gaia-ai) l c h / 0.45);
  box-shadow: 0 6px 24px oklch(from var(--gaia-foreground) l c h / 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 var(--ci-line);
  border-radius: 9999px;
  background: var(--ci-surface);
  box-shadow: 0 6px 20px oklch(from var(--gaia-foreground) l c h / 0.14);
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  background: oklch(from var(--ci-fill) l c h / 0.6);
  color: var(--gaia-foreground);
}

.ci-ask-choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 200px;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--ci-line);
  border-radius: 10px;
  background: var(--ci-surface);
  box-shadow: 0 8px 24px oklch(from var(--gaia-foreground) l c h / 0.12);
}

.ci-ask-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--gaia-foreground);
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}
.ci-ask-choice:hover,
.ci-ask-choice:focus-visible {
  background: oklch(from var(--ci-fill) l c h / 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 var(--ci-line);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 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(from var(--gaia-ai) l c h / 0.45);
  background: oklch(from var(--gaia-ai) l c h / 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: var(--gaia-ai);
  font-size: 13px;
}

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

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

/* 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 var(--ci-line);
  border-radius: 12px;
  background: var(--ci-surface);
  box-shadow: 0 14px 40px oklch(from var(--gaia-foreground) l c h / 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(from var(--gaia-ai) l c h / 0.4);
  color: var(--gaia-foreground);
  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: var(--gaia-muted-foreground);
  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: var(--gaia-ai);
  font-size: 12px;
  line-height: 1;
}

/* ---- 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: var(--gaia-muted-foreground);
  font-size: 12.5px;
  white-space: nowrap;
  transition:
    background 140ms,
    border-color 140ms,
    color 140ms;
}
.ci-header-action:hover {
  border-color: var(--ci-line);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
}
.ci-header-action[data-ci-active='true'] {
  border-color: var(--ci-line);
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

/* 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(from var(--gaia-ai) l c h / 0.14);
  color: var(--gaia-ai);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  text-align: center;
}

.ci-header-count[aria-hidden='true'] {
  visibility: hidden;
}

/* ---- 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(from var(--gaia-ai) l c h / 0.12);
  color: var(--gaia-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 var(--ci-line);
  background: var(--ci-surface);
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gaia-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  box-shadow: 0 8px 20px -10px oklch(from var(--gaia-foreground) l c h / 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(from var(--ci-fill) l c h / 0.6);
  color: var(--gaia-muted-foreground);
  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(from var(--gaia-ai) l c h / 0.14);
  color: var(--gaia-ai);
}

.ci-insight-starter-go {
  flex-shrink: 0;
  color: var(--gaia-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;
  }
}

/* An answer a failed run cut off: still readable, visibly not the whole of it. */
.ci-turn[data-ci-incomplete='true'] [data-ci-quotable] {
  color: var(--gaia-muted-foreground);
}

.ci-incomplete-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--ci-space-2);
  border-radius: var(--ci-radius-pill);
  font: var(--ci-type-caption);
  color: var(--gaia-muted-foreground);
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

/* Words only a screen reader gets: out of the flow and clipped to nothing, so a live region can
   change without moving anything on screen. */
.ci-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The steps of a running answer sit at its tail, under what has arrived. */
.ci-live-steps {
  margin: 4px 0 0;
}

/* The quiet line a settled answer keeps, between the answer and its actions. */
.ci-settled-steps {
  margin: 12px 0 0;
}

/* Several cards of one answer: one calm column, the same gap between every two. */
.ci-card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* A card with nothing to draw, said in the answer's flow instead of drawn around nothing. */
.ci-empty-card {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}
.ci-empty-card__title {
  font-weight: 600;
  color: var(--gaia-foreground);
}

/* A table folded to one row: the whole row opens it. */
.ci-folded-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  border-radius: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--gaia-muted-foreground);
  transition: background 120ms ease-out;
}
.ci-folded-card:hover {
  background: oklch(from var(--ci-fill) l c h / 0.5);
}
.ci-folded-card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--gaia-foreground);
}
.ci-folded-card__rows {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Content laid out beside its placeholder until its frame comes: full width, out of the flow,
   invisible, and clipped so it adds nothing to the column's scroll height. */
.ci-reveal {
  position: relative;
}
.ci-reveal:has(> [data-ci-waiting]) {
  overflow: clip;
}
.ci-reveal > [data-ci-waiting] {
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
}

/* An answer whose data has moved since: an amber bar on top, the answer under it faded but still
   readable and selectable. The bar and the action row stay at full strength. */
.ci-stale-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--gaia-warning) l c h / 0.12);
  color: var(--gaia-badge-warning-foreground);
  font-size: 14px;
  line-height: 20px;
}
.ci-stale-bar__icon {
  flex-shrink: 0;
  color: var(--gaia-warning);
}
.ci-stale-bar__text {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.ci-stale-bar__text strong {
  font-weight: 600;
}
.ci-stale-bar__action {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--gaia-foreground);
  transition: background var(--ci-duration-press) ease-out;
}
.ci-stale-bar__action:hover {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}
.ci-turn[data-ci-stale='true'] > :not(.ci-stale-slot, .ci-answer-row-wrap) {
  opacity: 0.6;
}


/* /src/shared/ui/ai-elements/ai-elements.css */
/* The ported AI Elements. Tokens only, every colour a Gaia token, 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)),
      var(--gaia-foreground),
      transparent calc(50% + var(--ci-shimmer-spread))
    ),
    linear-gradient(var(--gaia-muted-foreground), var(--gaia-muted-foreground));
  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: var(--gaia-foreground);
    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: a 16px mark column, then the sentence and its result as one
   run of text. Status shows in the mark and in contrast; only a failed step takes a colour. */
.ci-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--gaia-muted-foreground);
}

.ci-step-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
}

.ci-step-complete .ci-step-mark {
  color: var(--gaia-success);
}

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

.ci-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  border: 1.5px solid var(--gaia-muted-foreground);
}

@keyframes ci-step-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(from var(--gaia-ai) l c h / 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px oklch(from var(--gaia-ai) l c h / 0);
  }
}

.ci-step-active .ci-step-dot {
  border: none;
  background: var(--gaia-ai);
  animation: ci-step-pulse 1.4s ease-in-out infinite;
}

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

.ci-step-text {
  min-width: 0;
}

.ci-step-active .ci-step-label {
  color: var(--gaia-foreground);
}

.ci-step-result {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .ci-step-active .ci-step-dot {
    animation: none;
  }
}


/* /src/features/carbon-intelligence/chat/sections/chat-history-dialog.css */
/* The Chat history pop-up: a search field, the list in its own scroll, a footer link. The dialog
   has a fixed height so results arriving never move its frame. */

.ci-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: -4px 0 0;
  color: var(--gaia-foreground);
}

.ci-history__search {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.ci-history__search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--gaia-muted-foreground);
  transform: translateY(-50%);
  pointer-events: none;
}

.ci-history__input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-control);
  background: var(--ci-surface);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  outline: none;
}

.ci-history__input:focus-visible {
  border-color: var(--gaia-ring);
}

.ci-history__list {
  flex: 1;
  min-height: 0;
  margin: 0 -8px;
  padding: 0 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-history__group {
  padding: 12px 8px 4px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 8px;
  border-radius: var(--ci-radius-control);
  text-align: left;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-history__row[aria-selected='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-history__title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  font: var(--ci-type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-history__current {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

.ci-history__snippet {
  grid-column: 1;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-history__when {
  grid-row: 1;
  grid-column: 2;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  font-variant-numeric: tabular-nums;
}

.ci-history__empty {
  margin: 24px 8px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-history__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 8px;
}

.ci-history__skeleton span {
  height: 20px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.6);
}

.ci-history__foot {
  flex-shrink: 0;
  margin: 12px 0 -4px;
  padding-top: 12px;
  border-top: 1px solid var(--ci-line);
  font: var(--ci-type-control);
}

.ci-history__foot a {
  color: var(--gaia-link-foreground, var(--gaia-primary));
}


/* /src/features/carbon-intelligence/chat/sections/composer.css */
/* The composer's two shapes are one grid with two sets of areas. The same elements move between
   them, so the change reads as the box growing, never as a second box replacing the first. */

.ci-composer {
  position: relative;
  display: grid;
  grid-template-areas: 'plus input units period send';
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 2px;
  padding: 7px;
  border: 1px solid var(--ci-line);
  background: var(--ci-surface);
  box-shadow: var(--ci-shadow-lift);
  transition: border-color var(--ci-duration-press) ease-out;
}

.ci-composer[data-expanded] {
  grid-template-areas:
    'files files files files files files files'
    'input input input input input input input'
    'plus units period effort scope usage send';
  /* The choices shrink and truncate before send is pushed out of a narrow frame. */
  grid-template-columns:
    auto minmax(0, max-content) minmax(0, max-content) minmax(0, max-content)
    minmax(0, max-content) minmax(0, 1fr) auto;
  padding: 10px 10px 8px;
}

.ci-composer:focus-within {
  border-color: oklch(from var(--gaia-foreground) l c h / 0.22);
}

.ci-composer[data-dragging] {
  border-color: var(--gaia-ai);
}

.ci-composer__files {
  grid-area: files;
  margin: -2px -2px 8px;
}

.ci-composer__input {
  grid-area: input;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ci-composer[data-expanded] .ci-composer__input {
  margin-bottom: 6px;
}

.ci-composer__textarea {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 152px;
  padding: 6px 6px;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--gaia-foreground);
  font: var(--ci-type-body);
}

.ci-composer[data-expanded] .ci-composer__textarea {
  min-height: 60px;
  padding: 4px 6px;
}

.ci-composer__textarea::placeholder {
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A suggested next question wraps, so it can be read whole in a narrow box. */
.ci-composer__textarea[data-ci-suggestion]::placeholder {
  white-space: normal;
}

.ci-composer__textarea:disabled {
  cursor: not-allowed;
}

/* A box that cannot be asked from: a quiet fill instead of paper, and only its reason in it. */
.ci-composer[data-disabled] {
  background: oklch(from var(--ci-fill) l c h / 0.55);
}

.ci-composer[data-disabled] .ci-composer__textarea {
  padding-left: var(--ci-space-3);
}

.ci-composer__token {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  height: 32px;
  color: var(--gaia-foreground);
  font: var(--ci-type-label);
}

.ci-composer__token-close {
  display: inline-flex;
  color: var(--gaia-muted-foreground);
}

.ci-composer__plus {
  grid-area: plus;
}

.ci-composer__plus,
.ci-choice[data-compact] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ci-radius-pill);
  color: var(--gaia-muted-foreground);
  transition:
    background var(--ci-duration-press) ease-out,
    color var(--ci-duration-press) ease-out;
}

.ci-composer__plus:hover:not(:disabled),
.ci-composer__plus[data-open],
.ci-choice[data-compact]:hover:not(:disabled),
.ci-choice[data-compact][data-open] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
  color: var(--gaia-foreground);
}

.ci-composer__plus:disabled,
.ci-choice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The choices as chips, once the box has grown: a hairline pill that reads its value. */
.ci-choice {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  min-width: 0;
  max-width: 240px;
  margin-right: 6px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius-pill);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  white-space: nowrap;
  transition:
    background var(--ci-duration-press) ease-out,
    border-color var(--ci-duration-press) ease-out;
}

.ci-choice[data-compact] {
  margin-right: 0;
  padding: 0;
  border-color: transparent;
}

.ci-choice:not([data-compact]) > svg {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-choice:not([data-compact]):hover:not(:disabled),
.ci-choice:not([data-compact])[data-open] {
  background: oklch(from var(--ci-fill) l c h / 0.6);
}

.ci-choice__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: ci-choice-value-in var(--ci-duration-pop) var(--ci-ease);
}

@keyframes ci-choice-value-in {
  from {
    opacity: 0;
  }
}

/* A choice set away from its default, while the pill is at rest. */
.ci-choice__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: var(--ci-radius-pill);
  background: var(--gaia-foreground);
}

.ci-choice:not([data-compact]) .ci-choice__dot {
  display: none;
}

/* A box too narrow to read every choice in full, such as the assistant beside a page: the chips
   become icons, named with their value in the tooltip, so no word is ever cut. */
.ci-composer {
  container-type: inline-size;
}

@container (max-width: 520px) {
  .ci-choice:not([data-compact]) {
    justify-content: center;
    width: 32px;
    padding: 0;
  }

  .ci-choice:not([data-compact]) .ci-choice__value {
    display: none;
  }

  .ci-choice:not([data-compact]) .ci-choice__dot {
    display: block;
    top: 5px;
    right: 5px;
  }
}

.ci-composer [data-ci='choice-units'] {
  grid-area: units;
}

.ci-composer [data-ci='choice-period'] {
  grid-area: period;
}

.ci-composer__effort {
  grid-area: effort;
  display: inline-flex;
  min-width: 0;
}

.ci-composer__scope {
  grid-area: scope;
  display: inline-flex;
  min-width: 0;
}

.ci-composer__usage-slot {
  grid-area: usage;
  display: inline-flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.ci-composer__usage {
  padding-right: 8px;
  overflow: hidden;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-composer__usage[data-warning] {
  color: var(--gaia-badge-warning-foreground, var(--gaia-warning));
}

.ci-composer__send {
  grid-area: send;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ci-radius-pill);
  /* The AI colour, pale until there is something to send. */
  background: var(--gaia-ai);
  color: var(--gaia-card);
  opacity: 0.45;
  transition:
    background var(--ci-duration-press) ease-out,
    opacity var(--ci-duration-press) ease-out;
}

.ci-composer__send[data-ready],
.ci-composer__send[data-busy] {
  opacity: 1;
}

.ci-composer__send[data-busy] {
  background: var(--gaia-foreground);
  color: var(--gaia-card);
}

.ci-composer__send:disabled {
  cursor: not-allowed;
}

.ci-composer__context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.ci-composer__error {
  color: var(--gaia-destructive);
  font: var(--ci-type-caption);
}


/* /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 var(--ci-line);
  border-radius: 7px;
  color: var(--gaia-muted-foreground);
  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(from var(--gaia-ai) l c h / 0.45);
  color: var(--gaia-foreground);
  outline: none;
}

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

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


/* /src/features/carbon-intelligence/chat/sections/edit-report.css */
/* The panel's one line about a suggestion: waiting in the page, then kept or not. */
.ci-edit-report {
  display: flex;
  align-items: baseline;
  gap: var(--ci-space-2);
  margin: 0 0 var(--ci-space-3);
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-control);
}

.ci-edit-report[data-waiting] {
  color: var(--gaia-foreground);
}

.ci-edit-report__mark {
  flex-shrink: 0;
  align-self: center;
  color: var(--gaia-ai);
}


/* /src/features/carbon-intelligence/chat/components/conversion-note.css */
/* The line under an answer that was saved into an insight. Its height is fixed so running, done
   and failed read the same size, and it only ever appears under the person's own click, so it
   pushes nothing the person was not already moving. */

.ci-conversion-note {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  margin-top: 8px;
  padding: 0 8px 0 12px;
  border-radius: var(--ci-radius-control);
  background: oklch(from var(--ci-fill) l c h / 0.55);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
}

.ci-conversion-note[data-state='suggested'],
.ci-conversion-note[data-state='kept'] {
  background: oklch(from var(--gaia-success) l c h / 0.12);
}

.ci-conversion-note[data-state='failed'] {
  background: oklch(from var(--gaia-destructive) l c h / 0.1);
}

.ci-conversion-note__icon {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-conversion-note[data-state='running'] .ci-conversion-note__icon {
  color: var(--gaia-ai);
  animation: ci-conversion-working 1.4s ease-in-out infinite;
}

.ci-conversion-note[data-state='suggested'] .ci-conversion-note__icon,
.ci-conversion-note[data-state='kept'] .ci-conversion-note__icon {
  color: var(--gaia-success);
}

.ci-conversion-note[data-state='failed'] .ci-conversion-note__icon {
  color: var(--gaia-destructive);
}

.ci-conversion-note__words {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gaia's outline button is transparent at rest; the note's own tint would show through it. */
.ci-conversion-note__action:not(:hover) {
  background: var(--ci-surface);
}

@keyframes ci-conversion-working {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ci-conversion-note[data-state='running'] .ci-conversion-note__icon {
    animation: none;
  }
}


/* /src/features/carbon-intelligence/chat/components/save-as-insight.css */
/* The "Save as insight" action and the popover it opens. The action is the row's one named
   control, a Gaia ghost button with a chevron saying it opens something; the popover is the CI
   floating surface with rows of one height, so nothing moves as the list arrives. Gaia's ghost
   button has no resting background and the app's button reset skips Gaia buttons, so the browser's
   own grey shows through unless it is set here. */

.ci-save-as-insight {
  background: transparent;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-save-as-insight:hover,
.ci-save-as-insight[aria-expanded='true'] {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-save-as-insight svg {
  color: var(--gaia-muted-foreground);
}

.ci-save-choices {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 6px;
}

.ci-save-choices__start {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ci-line);
}

.ci-save-choices__search {
  flex-shrink: 0;
  padding: 8px 4px 4px;
}

.ci-save-choices__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ci-save-choices__note {
  margin: 0;
  padding: 8px 10px;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

/* A Gaia ghost button laid out as a full-width row: left aligned, as tall as its words need. */
.ci-save-row {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--ci-radius-control);
  color: var(--gaia-foreground);
  font: var(--ci-type-control);
  text-align: left;
  outline: none;
  transition: background var(--ci-duration-press) ease-out;
}

.ci-save-row:not(:hover):not(:focus-visible) {
  background: transparent;
}

.ci-save-row:hover,
.ci-save-row:focus-visible {
  background: oklch(from var(--ci-fill) l c h / 0.7);
}

.ci-save-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gaia-ring);
}

.ci-save-row__icon {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
}

.ci-save-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ci-save-row__note {
  flex-shrink: 0;
  color: var(--gaia-muted-foreground);
  font: var(--ci-type-caption);
}

/* A placeholder is a plain block, not a button, so it brings its own flex layout. */
.ci-save-row--waiting {
  display: flex;
  align-items: center;
  cursor: default;
}

.ci-save-row--waiting:hover {
  background: transparent;
}

.ci-save-row__skeleton {
  display: block;
  width: 70%;
  height: 12px;
  border-radius: var(--ci-radius-control);
}


/* /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);
}