/* Base document styles. All values come from the design tokens (src/theme/tokens.ts → --ce-* variables). */
:root {
  color-scheme: light;
  font-family: var(--ce-font-family-sans);
  font-size: var(--ce-font-size-base);
  line-height: var(--ce-line-height-base);
  color: var(--ce-color-text);
  background: var(--ce-color-bg-layout);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
}

#root {
  min-height: 100vh;
}
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}/*
 * CE Trace Analysis app styles.
 * Every color, font and spacing value comes from the design tokens (src/theme/tokens.ts),
 * exposed as --ce-* CSS variables. Media queries use the token breakpoints (variables are not
 * allowed there): sm 576px, md 768px, lg 992px, xl 1200px.
 */

/* Shell and page layout */
.app-shell {
  min-height: 100vh;
  color: var(--ce-color-text);
  background: var(--ce-color-bg-layout);
  font-family: var(--ce-font-family-sans);
}
.content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: var(--ce-space-xl) var(--ce-space-lg) var(--ce-space-xxl);
}
.content > * {
  min-width: 0;
}
.content > h1 {
  margin-bottom: var(--ce-space-lg);
}

/* Sidebar brand and signed-in user */
.app-brand {
  display: flex;
  align-items: center;
  gap: var(--ce-space-xs);
  padding: var(--ce-space-lg) var(--ce-space-lg) var(--ce-space-md);
  color: var(--ce-color-brand);
  font-size: var(--ce-font-size-lg);
  font-weight: var(--ce-font-weight-semibold);
  text-decoration: none;
}
.app-user {
  padding: var(--ce-space-md);
  border-top: var(--ce-border-width-thin) solid var(--ce-color-border-secondary);
}

.intake-submit-bar {
  margin-top: var(--ce-space-lg);
}

/* Two-column intake form */
.intake-grid {
  display: grid;
  grid-template-columns: minmax(var(--ce-size-control-md), 0.75fr) minmax(var(--ce-size-side-column), 1.25fr);
  gap: var(--ce-space-lg);
  align-items: start;
}
.intake-grid.grid-fill {
  flex: 1 1 auto;
}
.intake-grid--stretch {
  align-items: stretch;
}

/* Panels (antd Card) */
.panel {
  box-shadow: var(--ce-shadow-card);
}
.panel.list-fill {
  align-self: stretch;
  flex: 1 1 auto;
}
.form-panel {
  display: grid;
  gap: var(--ce-space-md);
}
.package-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.package-panel > .actions {
  margin-top: auto;
}
.field-hint {
  margin: 0;
  color: var(--ce-color-text-tertiary);
  font-size: var(--ce-font-size-sm);
  line-height: var(--ce-line-height-base);
}

/* Upload: selected archive, package contents, attachments */
.archive {
  padding: var(--ce-space-sm);
  color: var(--ce-color-accent-strong);
  background: var(--ce-color-accent-bg);
  border: var(--ce-border-width-thin) solid var(--ce-color-border);
  border-radius: var(--ce-radius-md);
}
.queue {
  margin-top: var(--ce-space-md);
  overflow: hidden;
  border: var(--ce-border-width-thin) solid var(--ce-color-border);
  border-radius: var(--ce-radius-md);
}
.attachments-block {
  display: flex;
  flex-direction: column;
  gap: var(--ce-space-xs);
  margin-top: var(--ce-space-lg);
  padding-top: var(--ce-space-md);
  border-top: var(--ce-border-width-thin) solid var(--ce-color-border-secondary);
}
.actions {
  margin-top: var(--ce-space-lg);
  color: var(--ce-color-text-tertiary);
}
.worker-status {
  display: grid;
  gap: var(--ce-space-xs);
  margin-top: var(--ce-space-md);
  background: var(--ce-color-bg-subtle);
  border: var(--ce-border-width-thin) solid var(--ce-color-border);
  border-radius: var(--ce-radius-md);
}
.worker-status small {
  overflow-wrap: anywhere;
}

/* Status icons */
.success {
  color: var(--ce-color-success);
}
.error {
  color: var(--ce-color-error);
}

/* Queue table */
.intake-table th,
.intake-table td {
  padding: var(--ce-space-xs) var(--ce-space-sm) !important;
}

/* Intake details */
.details-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ce-space-sm) var(--ce-space-lg);
}
.details-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ce-space-xs) var(--ce-space-sm);
  min-width: 0;
}
.details-title h1 {
  font-size: var(--ce-heading-size-h2);
  overflow-wrap: anywhere;
}

/* Trace viewer */
.trace-viewer {
  min-width: 0;
  margin-top: var(--ce-space-sm);
  padding-bottom: var(--ce-space-lg);
}
.trace-controls {
  margin: var(--ce-space-md) 0 var(--ce-space-sm);
}
.trace-picker {
  min-width: var(--ce-size-control-sm);
}
.trace-window {
  font-size: var(--ce-font-size-sm);
  font-variant-numeric: tabular-nums;
}
.trace-stage {
  position: relative;
  min-height: var(--ce-size-control-sm);
}
.trace-loading {
  position: absolute;
  inset: 0;
  z-index: var(--ce-z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ce-space-xs);
  background: var(--ce-color-bg-mask);
}
.trace-legend .ant-tag {
  max-width: min(var(--ce-size-control-lg), 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trace-chart {
  width: 100%;
  overflow: hidden;
}
.trace-table-scroll {
  width: 100%;
  overflow: auto;
}
.trace-table {
  font-size: var(--ce-font-size-sm);
}

/* Plugin findings */
.file-analysis {
  display: grid;
  gap: var(--ce-space-lg);
  padding: var(--ce-space-lg) 0;
}
.file-analysis__header {
  display: flex;
  flex-direction: column;
  gap: var(--ce-space-md);
  padding-bottom: var(--ce-space-md);
  border-bottom: var(--ce-border-width-thin) solid var(--ce-color-border);
}
.finding-list {
  display: grid;
  gap: var(--ce-space-md);
}
.finding-json {
  max-height: var(--ce-size-panel-max-height);
  margin: var(--ce-space-sm) 0 0;
  padding: var(--ce-space-xs);
  overflow: auto;
  color: var(--ce-color-text-secondary);
  background: var(--ce-color-bg-subtle);
  border: var(--ce-border-width-thin) solid var(--ce-color-border);
  border-radius: var(--ce-radius-md);
  font-family: var(--ce-font-family-mono);
  font-size: var(--ce-font-size-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.analysis-subsection {
  margin-top: var(--ce-space-lg);
}
.analysis-subsection .anticon {
  color: var(--ce-color-brand-strong);
}

/* Plugins */
.plugin-manage__header {
  display: flex;
  align-items: center;
  gap: var(--ce-space-sm);
  margin-bottom: var(--ce-space-lg);
}
.plugin-manage__header h1 {
  margin: 0;
  line-height: var(--ce-line-height-tight);
}
.plugin-manage {
  display: grid;
  grid-template-columns: var(--ce-size-side-column) minmax(0, 1fr);
  gap: var(--ce-space-md);
  align-items: start;
  width: 100%;
  margin-top: var(--ce-space-md);
}
.plugin-manage > .panel {
  min-width: 0;
}
.plugin-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ce-space-xs);
}
.python-editor-field {
  display: grid;
  gap: var(--ce-space-xs);
  min-width: 0;
  color: var(--ce-color-text-secondary);
  font-size: var(--ce-font-size-sm);
  font-weight: var(--ce-font-weight-bold);
}
.python-editor {
  min-width: 0;
  overflow: hidden;
  border: var(--ce-border-width-thin) solid var(--ce-color-border-strong);
  border-radius: var(--ce-radius-md);
  font-size: var(--ce-font-size-sm);
}
.python-editor .cm-editor {
  font-family: var(--ce-font-family-mono);
}
.python-editor .cm-editor.cm-focused {
  outline: none;
}
.python-editor:focus-within {
  outline: var(--ce-border-width-thick) solid var(--ce-color-focus-ring);
  outline-offset: var(--ce-border-width-thin);
  border-color: var(--ce-color-brand);
}

/* Defect dashboard */
.defect-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--ce-space-md);
  min-width: 0;
}
.defect-dashboard__metric-icon,
.defect-dashboard__section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--ce-size-icon-box);
  height: var(--ce-size-icon-box);
  border-radius: var(--ce-radius-lg);
}
.defect-dashboard__metric-icon--primary,
.defect-dashboard__section-icon {
  color: var(--ce-color-accent-strong);
  background: var(--ce-color-accent-bg);
}
.defect-dashboard__metric-icon--diagnosis {
  color: var(--ce-color-brand);
  background: var(--ce-color-brand-bg);
}
.defect-dashboard__metric-icon--warning {
  color: var(--ce-color-warning);
  background: var(--ce-color-warning-bg);
}
.defect-dashboard__metric-icon--success {
  color: var(--ce-color-success);
  background: var(--ce-color-success-bg);
}
.defect-dashboard__section-header {
  padding: var(--ce-space-md);
  border-bottom: var(--ce-border-width-thin) solid var(--ce-color-border-secondary);
  background: var(--ce-color-bg-subtle);
}
.defect-dashboard__section-title {
  display: flex;
  align-items: center;
  gap: var(--ce-space-sm);
  min-width: 0;
}
.defect-dashboard__progress {
  width: 100%;
  height: var(--ce-space-xs);
  overflow: hidden;
  border-radius: var(--ce-radius-pill);
  background: var(--ce-color-border-secondary);
}
.defect-dashboard__progress-value {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ce-color-accent-strong), var(--ce-color-accent));
  transition: width var(--ce-motion-fast);
}
.defect-dashboard__description {
  display: -webkit-box;
  max-width: var(--ce-size-control-xl);
  overflow: hidden;
  line-height: var(--ce-line-height-base);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Responsive (token breakpoints) */
@media (max-width: 1200px) {
  .plugin-manage {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 992px) {
  .intake-grid,
  .intake-grid.grid-fill {
    grid-template-columns: minmax(0, 1fr);
  }
  .content {
    padding: var(--ce-space-lg) var(--ce-space-md) var(--ce-space-xl);
  }
}
@media (max-width: 768px) {
  .defect-dashboard__section-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .details-title h1 {
    font-size: var(--ce-heading-size-h3);
  }
}

.app-help-support {
  padding: var(--ce-space-md);
  border-top: var(--ce-border-width-thin) solid var(--ce-color-border-secondary);
}
.app-help-support__button {
  width: 100%;
  justify-content: flex-start;
  padding: 0 var(--ce-space-sm);
  height: var(--ce-size-control-sm);
  border-radius: var(--ce-radius-sm);
  color: var(--ce-color-text);
}
.app-help-support__button:hover,
.app-help-support__button:focus-visible {
  background: var(--ce-color-fill-tertiary);
  color: var(--ce-color-brand);
}
.app-help-support__button .ant-btn-icon {
  display: inline-flex;
  align-items: center;
}