/*
 * Historical public design-system restoration provenance:
 * tree aa6a56590ac0f902c96fddc321918a757b1d8a71
 * source docs/design/flusser-design-system.css
 * blob 1f5b03f7b833aadebc987ef10586a461e7d64eb8
 */

/* ============================================================================
   Flusser Design System — 증거의 천문대 (evidence observatory)
   Served as /assets/design.css by tools/serve_engine.py.
   Shared tokens + cross-page primitives for index.html and graph.html.
   All values are user-approved and derived verbatim from DESIGN.md.
   Consumers reference ONLY tokens (var(--fl-*)) — never raw hex/ad-hoc px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── surfaces (dark, four tiers) ───────────────────────────────────────── */
  --fl-bg-0: #07090D;            /* root workspace */
  --fl-bg-1: #0D1017;            /* primary work surface */
  --fl-bg-2: #131722;            /* inspector / raised surface */
  --fl-bg-3: #1A202C;            /* selected utility surface */

  /* ── borders (hairline) ────────────────────────────────────────────────── */
  --fl-border-subtle: #26313C;
  --fl-border-strong: #344250;

  /* ── text tiers ────────────────────────────────────────────────────────── */
  --fl-text-primary: #E6EDF3;
  --fl-text-secondary: #B6C1CB;
  --fl-text-muted: #8B98A5;
  --fl-text-disabled: #667482;

  /* ── accent: brass — interaction signal ONLY (never on evidence data) ───── */
  --fl-brass: #E8B04B;
  --fl-brass-wash: rgba(232, 176, 75, 0.11);    /* active/selected fill */
  --fl-brass-ring: rgba(232, 176, 75, 0.48);    /* focus ring */

  /* ── relation triad — the ONLY hue that ever touches evidence data ──────── */
  --fl-rel-support: #34D399;
  --fl-rel-contradict: #F87171;
  --fl-rel-neutral: #94A3B8;
  --fl-rel-support-wash: rgba(52, 211, 153, 0.10);
  --fl-rel-contradict-wash: rgba(248, 113, 113, 0.10);

  /* ── typography ────────────────────────────────────────────────────────── */
  --fl-font-ui: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --fl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono",
                  "DejaVu Sans Mono", monospace;

  --fl-type-micro: 12px;   --fl-lh-micro: 17px;    /* meta, status, axis labels, badges */
  --fl-type-body: 14px;    --fl-lh-body: 22px;     /* body, tables, quotes */
  --fl-type-label: 18px;   --fl-lh-label: 28px;    /* claim text, section headers */
  --fl-type-display: 28px; --fl-lh-display: 36px;  /* verdict call-out, single numbers */

  /* ── spacing (4px base; only these steps) ──────────────────────────────── */
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-6: 24px;
  --fl-space-8: 32px;

  /* ── radius (pill forbidden; badge cap 6px) ────────────────────────────── */
  --fl-radius-s: 2px;   /* chip / input */
  --fl-radius-m: 4px;   /* panel / work surface */
  --fl-radius-badge: 3px;

  /* ── motion ────────────────────────────────────────────────────────────── */
  --fl-ease-observe: cubic-bezier(0.16, 1, 0.3, 1);    /* settle, default out */
  --fl-ease-instrument: cubic-bezier(0.2, 0, 0, 1);    /* in-out travel */
  --fl-ease-scan: cubic-bezier(0.4, 0, 0.2, 1);        /* scan progress */
  --fl-dur-fast: 120ms;
  --fl-dur-base: 180ms;
  --fl-dur-slow: 320ms;
  --fl-dur-map: 520ms;
  --fl-dur-scan: 900ms;

  /* ── layout constants ──────────────────────────────────────────────────── */
  --fl-inspector-w: 360px;
  --fl-cmd-h: 60px;  /* measured at runtime; sticky offset for strip/inspector */

  /* ── reliability tiers (source grade) — shared dot scale, timeline + stands ─
     Unitless SVG radii (user units). Three discrete sizes only; area carries no
     numeric meaning (DESIGN.md: no mass/area encoding). Read once in JS. ────── */
  --fl-tier-r-hi: 7;     /* 기관·보도 */
  --fl-tier-r-mid: 5;    /* 2차 보도 */
  --fl-tier-r-lo: 3.5;   /* 소셜·미상 */
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fl-bg-0);
  color: var(--fl-text-primary);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-type-body);
  line-height: var(--fl-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Korean must never get letter-spacing or uppercase transforms. */
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; }

::selection { background: rgba(232, 176, 75, 0.28); color: var(--fl-text-primary); }

:lang(ko), [lang="ko"] { letter-spacing: 0; }

a { color: inherit; }

/* ── numeric mono (dates, counts, ids) ─────────────────────────────────── */
.fl-num, .fl-mono {
  font-family: var(--fl-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ── section header ────────────────────────────────────────────────────── */
.fl-sec {
  font-size: var(--fl-type-micro);
  line-height: var(--fl-lh-micro);
  font-weight: 600;
  letter-spacing: 0.08em;                 /* latin-only labels; never on Korean */
  text-transform: uppercase;
  color: var(--fl-text-muted);
  margin: 0 0 var(--fl-space-3);
}
.fl-sec--ko {                              /* Korean section header: no transform/tracking */
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fl-type-body);
  font-weight: 600;
  color: var(--fl-text-secondary);
}

/* ── chips: outline only, no color fill (DESIGN.md §Color) ─────────────── */
.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-space-1);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-type-micro);
  line-height: 1;
  padding: 3px var(--fl-space-2);
  border: 1px solid var(--fl-border-strong);
  border-radius: var(--fl-radius-s);
  background: transparent;
  color: var(--fl-text-secondary);
  white-space: nowrap;
  vertical-align: middle;
}
/* relation = colored TEXT only, neutral border (never a filled swatch) */
.fl-chip--support    { color: var(--fl-rel-support); }
.fl-chip--contradict { color: var(--fl-rel-contradict); }
.fl-chip--neutral    { color: var(--fl-rel-neutral); }
/* status chips stay neutral outline even when warning/unvalidated */
.fl-chip--warn::before { content: "⚠"; font-size: 10px; opacity: 0.85; }

/* ── badge (tiny, technical) ───────────────────────────────────────────── */
.fl-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--fl-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border: 1px solid var(--fl-border-subtle);
  border-radius: var(--fl-radius-badge);
  color: var(--fl-text-muted);
  background: transparent;
  white-space: nowrap;
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.fl-btn {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-type-body);
  line-height: 1;
  padding: var(--fl-space-2) var(--fl-space-3);
  border: 1px solid var(--fl-border-strong);
  border-radius: var(--fl-radius-s);
  background: var(--fl-bg-3);
  color: var(--fl-text-primary);
  cursor: pointer;
  transition: border-color var(--fl-dur-fast) var(--fl-ease-instrument),
              background var(--fl-dur-fast) var(--fl-ease-instrument);
}
.fl-btn:hover { border-color: var(--fl-brass); }
.fl-btn--primary {
  /* brass = the one interaction accent; used as an outline+wash, not a slab */
  border-color: var(--fl-brass);
  color: var(--fl-brass);
  background: var(--fl-brass-wash);
  font-weight: 600;
}
.fl-btn--primary:hover { background: rgba(232, 176, 75, 0.17); }
.fl-btn:disabled { color: var(--fl-text-disabled); border-color: var(--fl-border-subtle);
                   background: var(--fl-bg-2); cursor: not-allowed; }

/* ── form controls ─────────────────────────────────────────────────────── */
.fl-input, .fl-textarea, .fl-select {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-type-body);
  color: var(--fl-text-primary);
  background: var(--fl-bg-0);
  border: 1px solid var(--fl-border-strong);
  border-radius: var(--fl-radius-s);
  padding: var(--fl-space-2) var(--fl-space-3);
}
.fl-input::placeholder, .fl-textarea::placeholder { color: var(--fl-text-muted); }

/* ── focus: brass ring, interaction signal ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--fl-brass-ring);
  outline-offset: 1px;
}

/* ── quiet details/summary ─────────────────────────────────────────────── */
.fl-details > summary {
  cursor: pointer;
  list-style: none;
  color: var(--fl-text-muted);
  font-size: var(--fl-type-body);
  display: flex;
  align-items: center;
  gap: var(--fl-space-2);
  padding: var(--fl-space-2) 0;
}
.fl-details > summary::-webkit-details-marker { display: none; }
.fl-details > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--fl-text-muted);
  transition: transform var(--fl-dur-fast) var(--fl-ease-instrument);
}
.fl-details[open] > summary::before { transform: rotate(90deg); }
.fl-details > summary:hover { color: var(--fl-text-secondary); }

/* ── scrollbars: quiet ─────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--fl-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--fl-border-strong); border-radius: 6px;
                             border: 2px solid var(--fl-bg-0); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── a11y ──────────────────────────────────────────────────────────────── */
.fl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── reduced motion: strip inertia/stagger/scan, keep state via opacity ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}