/* ============================================================================
   CAPITAL · console stylesheet
   Capital is built on the shared Elkwood design system: the vendored
   /brand/elkwood/brand.css carries every --elk-* token and the shared
   components (.elk-tabs, .elk-group, .elk-table, .elk-field, .elk-input,
   .elk-link, .elk-toggle, .elk-status, .elk-dialog, .elk-signin, .elk-column).
   The rules for using them live in the platform's DESIGN_SYSTEM.md. This file
   lays out only what is Capital's own: the header line, the toolbar, the facts
   line, the strategy chat, the sparkline and the table's states.

   Two rules, no exceptions:
   1. NO RULE BELOW SETS A SIZE OF ITS OWN. It reads an --elk-* token (or one of
      the few Capital-only measures in the block below) or it does not exist.
   2. TYPE COMES FROM THE SYSTEM. Reading text is --elk-text-sm, labels
      --elk-text-xs: 14px and 12px on a desktop, 10px on a phone, set once in
      the design system for every Elkwood surface.
   ========================================================================== */

@import url("/brand/elkwood/brand.css");

/* ---------- Capital-only measures ---------- */

:root {
  --sparkline-h: 36px;     /* rendered height; the viewBox is a coordinate space */
  --cell-max-w: 320px;     /* a long value truncates here, never widening a row */
  --cell-max-w-narrow: 160px;
  --filter-w: 220px;
  --measure-chat: 52ch;
  --dialog-w-wide: 720px;
  --dialog-w-sm: 400px;
  --skeleton-h: 8px;
  --rule-w: 1px;           /* every hairline */
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

body { min-height: 100vh; font-variant-numeric: lining-nums tabular-nums; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- Shell: one sticky header (wordmark row, then the tabs) ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--elk-surface);
  border-bottom: var(--rule-w) solid var(--elk-border);
}
.app-header .elk-tabs { border-bottom: 0; }
.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--elk-space-4);
  padding-block: var(--elk-space-3);
}
.app-wordmark { display: inline-flex; align-items: baseline; gap: var(--elk-space-2); }
.app-wordmark img { display: block; height: var(--elk-space-5); width: auto; }
.app-wordmark span {
  color: var(--elk-ink-muted);
  font-size: var(--elk-label-size);
  font-weight: var(--elk-label-weight);
  letter-spacing: var(--elk-label-tracking);
  text-transform: uppercase;
}
.app-header-right { display: inline-flex; align-items: baseline; gap: var(--elk-space-3); }
.app-canvas { padding-block: var(--elk-space-4) var(--elk-space-8); }
.tab-end { margin-left: auto; }

/* ---------- View: the one vertical rhythm ---------- */

.view { display: flex; flex-direction: column; gap: var(--elk-space-4); }
.view-head-actions { margin-left: auto; display: flex; align-items: baseline; gap: var(--elk-space-3); }

/* The page's one action line. There is no page title: the tab names the page. */
.toolbar { display: flex; align-items: baseline; gap: var(--elk-space-3); }
.toolbar-lead { margin-right: auto; display: flex; align-items: baseline; gap: var(--elk-space-3); }
.toolbar-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--elk-space-3); }
.filter-input { width: var(--filter-w); padding-block: var(--elk-field-control-padding-block); }

/* ---------- Facts: the tight label/value line that replaces stat cards ---------- */

.facts { display: flex; flex-wrap: wrap; gap: var(--elk-space-1) var(--elk-space-6); }
.facts > span { display: inline-flex; align-items: baseline; gap: var(--elk-space-2); min-width: 0; overflow-wrap: anywhere; }
.facts label { color: var(--elk-ink-muted); font-size: var(--elk-text-xs); }

/* ---------- Tones and numbers, wherever a value sits ---------- */

.is-num { font-variant-numeric: lining-nums tabular-nums; }
.is-positive { color: var(--elk-status-success); }
.is-negative { color: var(--elk-status-danger); }
.is-warning { color: var(--elk-status-warning); }
.is-unset { color: var(--elk-ink-muted); }

/* ---------- Table states (the table itself is the shared .elk-table) ---------- */

.table-scroll { overflow-x: auto; }
.data-table tbody td { max-width: var(--cell-max-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table tbody td:first-child { font-weight: var(--elk-weight-semibold); }
.data-table td.is-muted { color: var(--elk-ink-muted); }
.data-table th.is-sortable { cursor: pointer; }
.data-table th:is(.is-sortable:hover, .is-sorted) { color: var(--elk-ink); }
.data-table :is(th, td).cell-action { width: 1%; text-align: right; white-space: nowrap; overflow: visible; }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr:is(:hover, .is-selected) { background: var(--elk-surface-subtle); }
.data-table tbody tr.is-total td { border-top: var(--rule-w) solid var(--elk-border-medium); font-weight: var(--elk-weight-bold); }

/* ---------- Small print and one-line notices ---------- */

.meta { color: var(--elk-ink-secondary); font-size: var(--elk-text-xs); }
.meta strong { color: var(--elk-ink); font-weight: var(--elk-weight-semibold); }
.meta.is-warning strong { color: var(--elk-status-warning); }
.notice { padding-block: var(--elk-space-1); border-bottom: var(--rule-w) solid var(--elk-border); }
.notice.is-success { color: var(--elk-status-success); }
.notice.is-warning { color: var(--elk-status-warning); }
.notice.is-error { color: var(--elk-status-danger); }

/* ---------- The edit card: Capital's widths, steps and body rhythm ---------- */

.elk-dialog.is-wide { width: min(var(--dialog-w-wide), calc(100vw - 2 * var(--elk-space-4))); }
.elk-dialog.is-sm { width: min(var(--dialog-w-sm), calc(100vw - 2 * var(--elk-space-4))); }
.elk-dialog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--elk-space-2); }
.dialog-sub { color: var(--elk-ink-muted); font-size: var(--elk-text-xs); font-weight: var(--elk-weight-regular); }
.dialog-steps { display: flex; gap: var(--elk-space-3); margin-left: auto; }
.dialog-step { color: var(--elk-ink-muted); font-size: var(--elk-text-xs); font-weight: var(--elk-weight-regular); }
.dialog-step.is-current { color: var(--elk-ink); font-weight: var(--elk-weight-semibold); }
.dialog-body { display: flex; flex-direction: column; gap: var(--elk-space-3); }
.hairline { height: var(--rule-w); background: var(--elk-border); }

/* ---------- Strategy chat: inside a dialog, secondary to the rows around it ---------- */

.chat-log { display: flex; flex-direction: column; gap: var(--elk-space-2); }
.chat-turn { max-width: var(--measure-chat); }
.chat-turn.is-user { align-self: flex-end; text-align: right; }
.chat-turn.is-user .chat-text {
  display: inline-block;
  padding: 0 var(--elk-space-2);
  border-radius: var(--elk-radius-sm);
  background: var(--elk-surface-subtle);
  text-align: left;
}
.chat-who { color: var(--elk-ink-muted); font-size: var(--elk-text-xs); }
.chat-text { white-space: pre-wrap; }
.chat-busy { color: var(--elk-ink-muted); font-style: italic; }
.chat-composer { display: flex; align-items: center; gap: var(--elk-space-2); }
.chat-composer .elk-input { flex: 1; }

/* ---------- Sparkline: a thin line, no fill ---------- */

.sparkline { display: block; width: 100%; height: var(--sparkline-h); }
.sparkline-line { fill: none; stroke: var(--elk-accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sparkline.is-positive .sparkline-line { stroke: var(--elk-status-success); }
.sparkline.is-negative .sparkline-line { stroke: var(--elk-status-danger); }

/* ---------- Skeleton ---------- */

.skeleton-line {
  height: var(--skeleton-h);
  margin-bottom: var(--elk-space-1);
  border-radius: var(--elk-radius-sm);
  background: var(--elk-surface-subtle);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-line:last-child { width: 60%; margin-bottom: 0; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

/* ---------- Narrow ---------- */

@media (max-width: 860px) {
  .data-table tbody td { max-width: var(--cell-max-w-narrow); }
  .filter-input { width: 100%; }
}