/* ============================================================
   IntentScan — design foundations
   Ported from the "ming's work" plain/朴素 design system: near-
   monochrome, flat & matte, hairline structure, IBM Plex type.
   Only the tokens the site actually uses are kept (no legacy aliases).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ink */
  --ink:   #1B1B1A;
  --ink-2: #5C5B57;
  --ink-3: #8A8984;
  --ink-4: #B3B2AC;

  /* surfaces */
  --paper:     #F6F5F3;
  --surface:   #FFFFFF;
  --surface-2: #EFEEEB;
  --surface-3: #E7E5E1;

  /* lines */
  --line:   #E4E2DD;
  --line-2: #D5D3CD;

  /* status (muted, sparing) */
  --pos:  #5E7257;
  --neg:  #97574B;
  --warn: #9A7B43;

  /* the one quiet accent — stone blue */
  --brand: #45607A;

  /* elevation (borders preferred) */
  --shadow-1: 0 1px 2px rgba(28,26,22,0.05);

  /* radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
}

.dark {
  --ink:#ECEBE7; --ink-2:#A7A6A0; --ink-3:#7A7974; --ink-4:#54534F;
  --paper:#161614; --surface:#1E1E1C; --surface-2:#262624; --surface-3:#2F2F2C;
  --line:#2C2C29; --line-2:#3A3A36;
  --shadow-1:0 1px 2px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); overflow-x: hidden; }

/* layout shell */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 28px;
}

/* sticky nav */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 245, 243, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.dark .nav-bar { background: rgba(22, 22, 20, 0.82); }
.nav-inner {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-logo-text {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  flex: none;
}

/* horizontal table scroll — page body never scrolls sideways */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl-min { min-width: 680px; }
.tbl-min--plat { min-width: 720px; }
.tbl-min--chain { min-width: 700px; }
.tbl-min--solv { min-width: 720px; }
.tbl-min--intent { min-width: 820px; }
.tbl-min--ticker { min-width: 640px; }
.tbl-min--pd-solv { min-width: 620px; }

/* KPI tiles */
.kpi-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 17px 14px;
}
.kpi-val {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* detail key-value rows */
.detail-kv { display: flex; gap: 16px; }
.detail-kv-label {
  width: 180px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.detail-kv-value { font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* page header row */
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

/* fluid charts */
.chart-svg { display: block; width: 100%; max-width: 100%; height: auto; }
::selection { background: rgba(69,96,122,0.3); }

/* type roles */
.t-h1      { font-family: var(--font-sans); font-weight: 600; font-size: 30px;   line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); margin: 0; }
.t-h3      { font-family: var(--font-sans); font-weight: 500; font-size: 17px;   line-height: 1.35; letter-spacing: -0.006em; color: var(--ink); }
.t-body    { font-family: var(--font-sans); font-weight: 400; font-size: 16px;   line-height: 1.6;  color: var(--ink-2); text-wrap: pretty; }
.t-small   { font-family: var(--font-sans); font-weight: 400; font-size: 14px;   line-height: 1.5;  color: var(--ink-2); }
.t-caption { font-family: var(--font-sans); font-weight: 400; font-size: 13px;   line-height: 1.45; color: var(--ink-3); }
.t-label   { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; line-height: 1.2;  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* interaction affordances used across screens */
.scan-row { transition: background .12s; }
.scan-row:hover { background: var(--surface-2); }
.scan-navlink { transition: color .12s; }
.scan-navlink:hover { color: var(--ink) !important; }
.content-enter { opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
.content-enter.is-visible { opacity: 1; transform: translateY(0); }

/* route loading skeletons */
.route-skeleton { padding-top: 34px; }
.sk-line, .sk-card, .sk-chart, .sk-row {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.sk-line { height: 12px; margin-bottom: 12px; }
.sk-line.title { height: 32px; margin-bottom: 22px; }
.sk-line.big { height: 28px; }
.w20 { width: 20%; max-width: 180px; }
.w40 { width: 40%; }
.w45 { width: 45%; max-width: 420px; }
.w55 { width: 55%; }
.w70 { width: 70%; }
.sk-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 22px 0 26px; }
.sk-card { height: 124px; padding: 16px 17px; }
.sk-chart { height: 260px; margin-bottom: 26px; }
.sk-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sk-row { height: 47px; border-width: 0 0 1px; border-radius: 0; }
.sk-line::after, .sk-card::after, .sk-chart::after, .sk-row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* responsive: collapse the wide grids to something legible on small screens */
@media (max-width: 900px) {
  .kpi-row, .kpi-row--detail { grid-template-columns: repeat(2, 1fr) !important; }
  .sk-kpis  { grid-template-columns: repeat(2, 1fr) !important; }
  .split    { grid-template-columns: 1fr !important; }
  .hide-sm  { display: none !important; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .nav-inner { gap: 12px; height: 52px; }
  .nav-links {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    padding: 10px 8px;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .nav-logo-text { font-size: 15px; }
  .hide-xs { display: none !important; }
  .kpi-val { font-size: 22px; }
  .kpi-tile { padding: 12px 13px 11px; }
  .kpi-row, .kpi-row--detail { gap: 10px !important; }
  .t-h1 { font-size: 24px; }
  .page-head-row { flex-direction: column; align-items: flex-start; }
  .detail-kv { flex-direction: column; gap: 4px; }
  .detail-kv-label { width: auto; padding-top: 0; }
  .intent-detail-head { flex-wrap: wrap; gap: 12px; }
  .intent-detail-actions { width: 100%; }
  .trade-flow { flex-direction: column; gap: 12px; }
  .trade-flow svg { transform: rotate(90deg); }
}