/* ============================================================
   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); }
::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  { 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; }
}