/* Arkum Labs — Data (DataPanel, TerminalPanel, Table) */

/* ============================== DATA PANEL ============================== */
.ark-datapanel {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  box-shadow: var(--edge-top);
  overflow: hidden;
}
.ark-datapanel--seam::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--slit-cyan); opacity: 0.8;
}
.ark-datapanel__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2);
}
.ark-datapanel__value {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-4xl); line-height: 1; letter-spacing: var(--tracking-tight);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.ark-datapanel__value small { font-size: var(--text-xl); color: var(--text-muted); margin-left: 4px; }
.ark-datapanel__foot { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.ark-datapanel__delta { font-family: var(--font-mono); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 4px; }
.ark-datapanel__delta--up { color: var(--ark-success); }
.ark-datapanel__delta--down { color: var(--ark-danger); }
.ark-datapanel__delta--flat { color: var(--text-faint); }
.ark-datapanel__sub { color: var(--text-faint); font-family: var(--font-mono); }
/* sparkline slot */
.ark-datapanel__spark { margin-top: var(--space-2); height: 36px; display: block; width: 100%; }
.ark-datapanel__spark path { vector-effect: non-scaling-stroke; }

/* ============================== TERMINAL PANEL ============================== */
.ark-terminal {
  display: flex; flex-direction: column;
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
  font-family: var(--font-mono);
}
.ark-terminal__bar {
  display: flex; align-items: center; gap: var(--space-3);
  height: 38px; padding: 0 var(--space-4);
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border-default);
}
.ark-terminal__dots { display: flex; gap: 6px; }
.ark-terminal__dots i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--ark-gray-900); display: block; }
.ark-terminal__dots i:first-child { background: color-mix(in oklab, var(--ark-cyan) 70%, var(--surface-panel)); }
.ark-terminal__title { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.ark-terminal__tag { margin-left: auto; font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); }
.ark-terminal__body { padding: var(--space-4); font-size: var(--text-sm); line-height: 1.7; overflow: auto; }
.ark-terminal__line { display: flex; gap: var(--space-4); white-space: pre; }
.ark-terminal__ln { color: var(--ark-gray-900); user-select: none; flex: none; width: 2ch; text-align: right; }
.ark-terminal__line .tok-key { color: var(--ark-cyan); }
.ark-terminal__line .tok-str { color: var(--ark-success); }
.ark-terminal__line .tok-num { color: var(--ark-violet); }
.ark-terminal__line .tok-mut { color: var(--text-faint); }
.ark-terminal__line .tok-ok  { color: var(--ark-success); }
.ark-terminal__line .tok-warn{ color: var(--ark-warning); }
.ark-terminal__prompt { color: var(--text-default); }
.ark-terminal__prompt::before { content: "›"; color: var(--ark-cyan); margin-right: var(--space-2); }
.ark-terminal__cursor { display: inline-block; width: 8px; height: 1em; background: var(--ark-cyan); vertical-align: text-bottom; animation: ark-blink 1.1s steps(1) infinite; }
@keyframes ark-blink { 50% { opacity: 0; } }

/* ============================== TABLE ============================== */
.ark-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-panel); overflow: hidden; background: var(--surface-card); }
.ark-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ark-table thead th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-faint); font-weight: var(--fw-medium);
  background: var(--surface-panel); border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.ark-table th.ark-num, .ark-table td.ark-num { text-align: right; font-variant-numeric: tabular-nums; }
.ark-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-default); }
.ark-table tbody tr:last-child td { border-bottom: none; }
.ark-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.ark-table tbody tr:hover { background: var(--surface-hover); }
.ark-table td .ark-mono, .ark-table .mono { font-family: var(--font-mono); }
.ark-table__cellmuted { color: var(--text-faint); }
.ark-table--zebra tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-panel) 50%, transparent); }