/* charts-theme-align.css
 * Loaded last. Locks the /charts surface to the same design language as
 * /dashboard — type scale, surface colours, accent rhythm, card radii,
 * border weights. Anti-drift layer.
 *
 * Every rule below points to its dashboard equivalent so future drift
 * can be diffed at a glance. Tokens only — no raw hex.
 */

/* ════════════════════════════════════════════════════════════════════════
   CARD SURFACE
   Dashboard primitive: .cfin-card (design-system.css §PRIMITIVE .cfin-card)
     background: var(--surface-1)
     border:     var(--ds-hairline)        (1px hairline)
     radius:     var(--radius-card)        (12px, == --radius-lg)
     shadow:     var(--elev-card)
     padding:    var(--space-4)            (rhythm anchor)
   /charts equivalents: .charts-section (in both rails) and the topbar.
   ════════════════════════════════════════════════════════════════════════ */

/* Right-rail and left-rail .charts-section: lift radius from 8px to the
   12px card radius dashboard uses on every panel. Border via tokenised
   hairline so light-mode reinforcement (design-system.css :root.light)
   carries through automatically. */
.charts-rail-right .charts-section,
.charts-rail-left  .charts-section,
.charts-section {
  border-radius: var(--radius-card);
  border: var(--ds-hairline);
}

/* Topbar: dashboard hero card (.dashboard-hero / .cfin-card--hero) uses
   the larger 16px radius. Lock the charts topbar to the same so the
   hero-row reads as one product. */
.charts-shell .charts-topbar {
  border-radius: var(--radius-hero);
  border: var(--ds-hairline);
  box-shadow: var(--elev-card);
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION HEADINGS
   Dashboard pattern: .section-title  (theme.css:5270)
     font-size: 12px / fw 700 / uppercase / letter-spacing 1.2px
     gap to bar: 14px
     bar: 3px × 16px linear-gradient(--accent → --purple), radius 2px, .75 opacity
   /charts equivalent: .charts-section h3 (currently 10.5px / 0.1em — too tight).
   ════════════════════════════════════════════════════════════════════════ */
.charts-section h3 {
  font-size: 12px;                /* dashboard .section-title */
  font-weight: 700;
  letter-spacing: 0.1em;          /* ~1.2px at 12px == dashboard scale */
  color: var(--text-sub);
  gap: 14px;                      /* dashboard .section-title gap */
}
.charts-section h3::before {
  width: 3px;                     /* dashboard bar width */
  height: 16px;                   /* dashboard bar height */
  opacity: 0.75;                  /* dashboard bar opacity */
  border-radius: 2px;
}
/* Right-rail polish file widens header padding; preserve that but pin
   the inner-text scale to dashboard tokens. */
.charts-rail-right .charts-section h3 {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   Dashboard ramp (design-system.css §5.4):
     --font-caption 11px  (labels, chips, meta)
     --font-body    13px  (rows, body)
     --font-subhead 16px  (sub-section)
     --font-section 22px  (page section)
   /charts equivalents: body table rows / meta / dim state text.
   ════════════════════════════════════════════════════════════════════════ */
/* Section body matches dashboard body text size + tabular nums for numbers,
   so right-rail value columns align like /dashboard KPI rows. */
.charts-section-body {
  font-size: var(--font-body);
  font-feature-settings: 'tnum' 1;
}
.charts-section-body td.k {
  font-size: var(--font-caption);
  color: var(--text-muted, var(--text-sub));
}
.charts-section-body td.v {
  font-variant-numeric: tabular-nums;
}

/* Empty / loading "dim" state — dashboard pattern: .empty-state-message
   (theme.css:5357): italic, --text-tertiary, centered, 13px. Lock charts. */
.charts-dim,
.charts-section-body .charts-dim,
.charts-instance-empty {
  color: var(--text-muted, var(--text-tertiary, var(--text-sub)));
  font-style: italic;
  font-size: var(--font-body);
}

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS
   Dashboard pattern: .btn-icon family (design-system.css §--- Buttons)
     background: var(--surface-1)
     border:     1px solid var(--ds-neutral-border)
     radius:     var(--radius-control)     (8px)
     hover bg:   var(--surface-hover)
     hover bdr:  var(--ds-accent-border)
   /charts equivalents: .charts-btn, .charts-rail-toggle.
   ════════════════════════════════════════════════════════════════════════ */
.charts-btn,
.charts-rail-toggle {
  background: var(--surface-1);
  border: 1px solid var(--ds-neutral-border);
  border-radius: var(--radius-control);
  color: var(--text-main);
  transition:
    background var(--dur-micro, 120ms) var(--ease-standard, ease),
    border-color var(--dur-micro, 120ms) var(--ease-standard, ease);
}
.charts-btn:hover,
.charts-rail-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--ds-accent-border);
}
.charts-btn:focus-visible,
.charts-rail-toggle:focus-visible {
  outline: 2px solid var(--ds-accent-border);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   INPUTS
   Dashboard pattern: .form-input (theme.css:693)
     background: var(--bg-input)
     border:     1px solid var(--border)
     radius:     var(--radius)             (8px)
     focus:      border-color var(--accent) + box-shadow 0 0 0 3px var(--accent-bg)
   /charts equivalent: .charts-input, .charts-select. The 3px accent-tint
   focus ring is the dashboard's signature — port it.
   ════════════════════════════════════════════════════════════════════════ */
.charts-input,
.charts-select {
  border-radius: var(--radius-control);
  transition:
    border-color var(--dur-micro, 140ms) var(--ease-standard, ease),
    box-shadow   var(--dur-micro, 140ms) var(--ease-standard, ease);
}
.charts-input:focus,
.charts-input:focus-visible,
.charts-select:focus,
.charts-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ds-accent-tint-strong);
}

/* ════════════════════════════════════════════════════════════════════════
   PILLS & CHIPS
   Dashboard pattern: .cfin-pill / .status-badge / .qf-chip (design-system.css)
     radius:     var(--radius-pill-ds)     (100px)
     font-size:  var(--font-caption)       (11px)
     padding:    2px var(--space-2)
     tints:      var(--ds-*-tint) + var(--ds-*-border)
   /charts equivalents: .qf-chip, status pills inside section bodies.
   The polish file already does most of the work — these are alignment
   touch-ups for any chip not routed through the design-system adapter.
   ════════════════════════════════════════════════════════════════════════ */
.charts-section-body .row-pos .side {
  /* Was 3px radius / 10px font. Pin to dashboard chip geometry so
     buy/sell tags match the .status-badge family. */
  border-radius: var(--radius-chip);
  font-size: var(--font-caption);
  font-weight: var(--fw-medium);
  padding: 2px var(--space-2);
}

/* ════════════════════════════════════════════════════════════════════════
   SPACING RHYTHM
   Dashboard scale (design-system.css §5.5): 4/8/12/16/24.
   /charts: section bodies were 10px 12px. Pin to scale values so the
   internal rhythm matches dashboard panel padding.
   ════════════════════════════════════════════════════════════════════════ */
.charts-section-body {
  padding: var(--space-3) var(--space-3);    /* 12/12 — matches table cell */
}

/* ════════════════════════════════════════════════════════════════════════
   ACCENT RHYTHM TEMPERING
   Dashboard rule of thumb: --accent is reserved for CTAs and active state.
   The right rail rotates accent bars per-section by design, so we leave
   the polish file's rotation intact. We only soften the bar shadow to the
   dashboard's near-zero level (theme.css .section-title::before has no
   shadow), preventing the bars from reading louder than the dashboard's.
   ════════════════════════════════════════════════════════════════════════ */
.charts-section h3::before,
.charts-rail-right .charts-section h3::before {
  box-shadow: none;
}