/**
 * FlowDesk Desk Unify — final visual layer (always last).
 * Resolves Gen2 (quality-pass) vs corporate (site-corporate) conflicts into
 * one quiet institutional trading-desk language. Tokens only; no hex.
 */

/* ── Page chrome ─────────────────────────────────────────────── */
body.fd-page {
  --fd-desk-gap: var(--fd-space-5, 20px);
  --fd-desk-card-radius: var(--fd-radius-lg, 14px);
  letter-spacing: -0.011em;
  line-height: 1.45;
}

body.fd-page .fd-main,
body.fd-page main.fd-content,
body.fd-page .fd-content-inner {
  max-width: var(--fd-max, 1580px);
}

/* Quiet executive header — Gen2 openness + one accent hairline */
body.fd-page .fd-page-header,
body.fd-page .ui-page-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 24px !important;
  margin: 0 0 var(--fd-desk-gap) !important;
  padding: 8px 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--fd-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.fd-page .fd-page-header::after,
body.fd-page .ui-page-header::after {
  left: 0 !important;
  bottom: -1px !important;
  width: 48px !important;
  height: 2px !important;
  background: var(--fd-accent) !important;
}
body.fd-page .fd-eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  font: 700 0.62rem/1 var(--fd-font-mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--fd-text-dim);
}
body.fd-page .fd-page-title,
body.fd-page .ui-page-header h1 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem) !important;
  font-weight: 720 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  color: var(--fd-text);
}
body.fd-page .fd-page-sub,
body.fd-page .ui-page-header p {
  margin: 8px 0 0 !important;
  max-width: 58ch !important;
  color: var(--fd-text-soft) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}
@media (max-width: 720px) {
  body.fd-page .fd-page-header,
  body.fd-page .ui-page-header {
    grid-template-columns: 1fr;
    padding-bottom: 14px !important;
  }
  body.fd-page .fd-page-actions { justify-content: flex-start; }
}

/* ── Surfaces / panels / cards ───────────────────────────────── */
body.fd-page .fd-panel,
body.fd-page .fd-card,
body.fd-page .surface,
body.fd-page .surface-elevated,
body.fd-page .card,
body.fd-page .ui-card {
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-desk-card-radius) !important;
  background: var(--fd-surface) !important;
  box-shadow: var(--fd-shadow) !important;
}
body.fd-page .fd-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}
body.fd-page .fd-panel-title {
  margin: 0;
  font: 700 0.72rem/1.2 var(--fd-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
}
body.fd-page .fd-panel-body { padding: 14px 16px 16px; }

body.fd-page .fd-stat-card,
body.fd-page .fd-metric,
body.fd-page .fd-icon-stat,
body.fd-page .ui-icon-stat {
  min-height: 104px;
  padding: 16px !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-desk-card-radius) !important;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--fd-bg-subtle) 55%, transparent), var(--fd-surface)) !important;
  box-shadow: none !important;
}
body.fd-page .fd-stat-card .val,
body.fd-page .fd-metric .val,
body.fd-page .fd-stat-value,
body.fd-page .fd-metric-value {
  font-family: var(--fd-font-mono);
  font-size: clamp(1.45rem, 3vw, 2.1rem) !important;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
}
body.fd-page .fd-metric-label,
body.fd-page .fd-stat-card .lbl,
body.fd-page .fd-metric-label {
  font: 700 0.62rem/1.25 var(--fd-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
}

/* Direction tone without neon clutter */
body.fd-page .fd-metric--bull .fd-metric-value,
body.fd-page .fd-stat-card.bull .val { color: var(--fd-bull-bright); }
body.fd-page .fd-metric--bear .fd-metric-value,
body.fd-page .fd-stat-card.bear .val { color: var(--fd-bear-bright); }
body.fd-page .fd-metric--flat .fd-metric-value,
body.fd-page .fd-stat-card.flat .val { color: var(--fd-text-soft); }

/* ── Buttons ─────────────────────────────────────────────────── */
body.fd-page .fd-btn,
body.fd-page button.primary,
body.fd-page button.secondary,
body.fd-page .btn-primary,
body.fd-page .btn-secondary,
body.fd-page input[type="submit"] {
  min-height: 40px;
  border-radius: var(--fd-radius-pill) !important;
  padding: 0 16px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--fd-dur) var(--fd-ease), border-color var(--fd-dur) var(--fd-ease), transform 80ms ease;
}
body.fd-page .fd-btn--primary,
body.fd-page .fd-btn-primary,
body.fd-page button.primary,
body.fd-page .btn-primary,
body.fd-page input[type="submit"] {
  border: 0 !important;
  background: var(--fd-text) !important;
  color: var(--fd-bg) !important;
  box-shadow: none !important;
}
body.fd-page .fd-btn--primary:hover,
body.fd-page button.primary:hover,
body.fd-page .btn-primary:hover {
  filter: brightness(1.08);
}
body.fd-page .fd-btn--ghost,
body.fd-page .fd-btn-ghost,
body.fd-page button.secondary,
body.fd-page .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--fd-border-strong) !important;
  color: var(--fd-text) !important;
}
body.fd-page .fd-btn:focus-visible,
body.fd-page a:focus-visible,
body.fd-page button:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 2px;
}

/* ── Tables / tape rows ──────────────────────────────────────── */
body.fd-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body.fd-page table th {
  padding: 10px 12px;
  font: 700 0.62rem/1 var(--fd-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-text-dim);
  border-bottom: 1px solid var(--fd-border);
  background: transparent;
}
body.fd-page table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--fd-border-soft);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
body.fd-page table tbody tr {
  transition: background var(--fd-dur) var(--fd-ease);
}
body.fd-page table tbody tr:hover {
  background: color-mix(in srgb, var(--fd-accent) 7%, transparent);
}

/* ── News / desk list items ──────────────────────────────────── */
body.fd-page .fd-news-item,
body.fd-page .news-card,
body.fd-page .news-item {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0 14px;
  padding: 14px 16px 14px 0;
  border: 1px solid var(--fd-border);
  border-radius: 12px;
  background: var(--fd-surface);
}
body.fd-page .fd-news-item::before,
body.fd-page .news-card::before {
  content: "";
  border-radius: 12px 0 0 12px;
  background: var(--fd-accent);
  opacity: 0.85;
}
body.fd-page .fd-news-headline,
body.fd-page .news-headline {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fd-text);
  text-decoration: none;
}
body.fd-page .fd-news-meta {
  margin-top: 6px;
  font: 0.68rem/1.35 var(--fd-font-mono);
  color: var(--fd-text-dim);
}

/* ── Pills / badges ──────────────────────────────────────────── */
body.fd-page .fd-pill,
body.fd-page .fd-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--fd-radius-pill);
  font: 700 0.64rem/1 var(--fd-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.fd-page .fd-pill.bull,
body.fd-page .fd-badge--bull {
  background: var(--fd-bull-soft);
  color: var(--fd-bull-bright);
  box-shadow: inset 3px 0 0 var(--fd-bull);
}
body.fd-page .fd-pill.bear,
body.fd-page .fd-badge--bear {
  background: var(--fd-bear-soft);
  color: var(--fd-bear-bright);
  box-shadow: inset 3px 0 0 var(--fd-bear);
}
body.fd-page .fd-pill.neutral,
body.fd-page .fd-badge--neutral,
body.fd-page .fd-badge--accent {
  background: var(--fd-accent-soft);
  color: var(--fd-accent-bright);
}

/* ── Forms / screener ────────────────────────────────────────── */
body.fd-page .screener-form,
body.fd-page form.fd-filter-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-pill);
  background: var(--fd-surface);
}
body.fd-page input[type="text"],
body.fd-page input[type="search"],
body.fd-page input[type="email"],
body.fd-page input[type="password"],
body.fd-page select,
body.fd-page textarea {
  border-radius: 10px;
  border: 1px solid var(--fd-border);
  background: var(--fd-bg-subtle);
  color: var(--fd-text);
}
body.fd-page input:focus,
body.fd-page select:focus,
body.fd-page textarea:focus {
  border-color: color-mix(in srgb, var(--fd-accent) 55%, var(--fd-border));
  box-shadow: 0 0 0 3px var(--fd-accent-soft);
  outline: none;
}
@media (max-width: 720px) {
  body.fd-page .screener-form,
  body.fd-page form.fd-filter-bar {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
}

/* ── Status page rhythm ──────────────────────────────────────── */
body.fd-page[data-page="status"] .fd-panel,
body.fd-page .fd-status-stack .fd-panel {
  margin-bottom: var(--fd-space-4, 16px);
}
body.fd-page .fd-prose-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 8px;
}
body.fd-page .fd-prose {
  margin: 0 0 12px;
  color: var(--fd-text-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Shell polish (sidebar / topbar density) ─────────────────── */
body.fd-page .fd-sidebar-link,
body.fd-page .fd-globalnav-link {
  border-radius: 10px;
  letter-spacing: -0.01em;
}
body.fd-page .fd-sidebar-link.is-active,
body.fd-page .fd-sidebar-link[aria-current="page"] {
  background: var(--fd-accent-soft);
  color: var(--fd-accent-bright);
}

/* ── Charts ──────────────────────────────────────────────────── */
body.fd-page .chart-host,
body.fd-page .fd-chart-wrap {
  min-height: 220px;
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-desk-card-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fd-bg-subtle) 70%, transparent), var(--fd-surface));
}

/* ── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.fd-page *,
  body.fd-page *::before,
  body.fd-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Soften gold leftovers → accent tokens */
body.fd-page .gold,
body.fd-page .text-gold,
body.fd-page .gold-btn,
body.fd-page .btn-gold {
  color: var(--fd-accent-bright) !important;
}
body.fd-page .gold-btn,
body.fd-page .btn-gold {
  background: var(--fd-accent-soft) !important;
  border-color: transparent !important;
}