@import "tailwindcss";

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/GeistMono.woff2") format("woff2");
}

:root {
  --page-bg: #ffffff;
  --panel-bg: #ffffff;
  --panel-border: #e2e8f0;
  --accent: #1e293b;
  --ink-soft: #64748b;
}

body {
  font-family: "Geist Mono", monospace;
}

.panel {
  @apply rounded-lg border;
  background: var(--panel-bg);
  border-color: var(--panel-border);
}

.field-label {
  @apply mb-1.5 block text-xs font-medium text-slate-500;
}

.field-input {
  @apply w-full rounded-md border px-3 py-2 text-sm text-slate-900 outline-none transition;
  background: #ffffff;
  border-color: #d1d5db;
}

.field-input:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

.field-input--compact-select {
  @apply h-8 min-w-40 pr-9;
  line-height: 1.25rem;
  padding-top: 0;
  padding-bottom: 0;
}

.btn-primary {
  @apply inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md px-3.5 text-[13px] font-medium text-white transition;
  background: var(--accent);
}

.btn-primary:hover {
  background: #0f172a;
}

.btn-secondary {
  @apply inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border px-3.5 text-[13px] font-medium text-slate-600 transition;
  border-color: #d1d5db;
  background: #ffffff;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.segmented-control {
  @apply inline-flex gap-0.5 rounded-md bg-slate-100/80 p-0.5;
}

.segmented-control__button {
  @apply rounded px-2.5 py-1 text-[13px] font-medium text-slate-400 transition;
}

.segmented-control__button[data-state="active"] {
  @apply bg-white text-slate-800;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chart-frame {
  @apply relative;
}

.chart-mark {
  transition: fill-opacity 140ms ease, r 140ms ease, stroke-width 140ms ease;
}

.chart-mark:focus-visible {
  outline: none;
}

.chart-tooltip {
  @apply pointer-events-none absolute z-10 min-w-36 max-w-64 rounded-md px-2.5 py-1.5 text-xs text-slate-500;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chart-tooltip__row {
  @apply flex items-center justify-between gap-3 whitespace-nowrap;
}

.chart-tooltip__row + .chart-tooltip__row {
  @apply mt-1 border-t border-slate-100 pt-1;
}

.chart-tooltip strong {
  @apply font-medium text-slate-900;
}

.data-grid table {
  @apply min-w-full border-collapse text-left text-sm;
}

.data-grid th {
  @apply sticky top-0 border-b border-slate-200 bg-slate-50 px-3 py-2 text-xs font-medium text-slate-500;
}

.data-grid td {
  @apply border-b border-slate-100 px-3 py-2 text-slate-700;
}

.paste-target {
  @apply block min-h-[22rem] w-full resize-none border-0 bg-transparent p-0 text-[13px] leading-relaxed text-slate-800 outline-none;
}

.paste-target::placeholder {
  color: #94a3b8;
}

.inline-title {
  @apply -ml-1 rounded px-1 py-0.5 text-left transition;
}

.inline-title:hover {
  background: #f1f5f9;
}

.inline-title__input {
  @apply w-full rounded border border-slate-300 bg-white px-1 py-0.5 text-2xl font-semibold tracking-tight text-slate-900 outline-none sm:text-3xl;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.12);
}

.toast {
  @apply pointer-events-none fixed left-1/2 text-[13px] font-medium text-slate-600;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast--top {
  top: 16px;
}

.toast--light {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}