/* App-specific layout, layered on top of Pico.css. Uses Pico's CSS custom
   properties so light/dark still follows prefers-color-scheme. */

.layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.layout > aside {
  flex: 0 0 14rem;
  padding: 1rem;
  border-right: 1px solid var(--pico-muted-border-color);
}

.layout > .content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1rem 1rem 1rem 0;
}

.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.metric-card {
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}

.metric-card .metric-name {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

.metric-card .metric-value {
  font-size: 1.5rem;
  font-weight: bold;
}

.echart {
  width: 100%;
  height: 420px;
  margin: 1rem 0;
}

.run-params {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.run-params dt {
  color: var(--pico-muted-color);
}

.run-params dd {
  margin: 0;
}

.run-error {
  border: 1px solid var(--pico-del-color, #c0392b);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
  margin: 1rem 0;
}

.result-text {
  margin: 1rem 0;
  white-space: pre-wrap;
}

.log-full {
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  font-size: 0.85rem;
  white-space: pre-wrap;
}