/* ==========================================================================
   GET KANDID — COMPONENTS  ·  built entirely on tokens.css
   --------------------------------------------------------------------------
   Reusable primitives shared by every screen. Each class maps cleanly to a
   React component. No colour or size literals live here — only token refs.
   Load order:  tokens.css  →  components.css  →  page styles
   ========================================================================== */

/* --- RESET / BASE --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-fs-base);
  line-height: var(--gk-lh-normal);
  color: var(--gk-text);
  background: var(--gk-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: var(--gk-blue-600); text-decoration: none; }
a:hover { color: var(--gk-blue-700); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--gk-blue-100); }

/* --- LAYOUT --------------------------------------------------------------- */
.gk-wrap { max-width: var(--gk-wrap); margin: 0 auto; padding: 0 var(--gk-s-5); }

/* --- TYPOGRAPHY HELPERS --------------------------------------------------- */
.gk-display {
  font-family: var(--gk-font-display);
  font-size: var(--gk-fs-display);
  font-weight: 500;
  line-height: var(--gk-lh-tight);
  letter-spacing: var(--gk-tracking-tight);
  color: var(--gk-ink-800);
}
.gk-h1 { font-family: var(--gk-font-display); font-size: var(--gk-fs-h1); font-weight: 500; line-height: var(--gk-lh-snug); letter-spacing: var(--gk-tracking-tight); color: var(--gk-ink-800); }
.gk-h2 { font-family: var(--gk-font-display); font-size: var(--gk-fs-h2); font-weight: 500; line-height: var(--gk-lh-snug); color: var(--gk-ink-800); }
.gk-h3 { font-size: var(--gk-fs-h3); font-weight: 700; line-height: var(--gk-lh-snug); color: var(--gk-ink-800); }
.gk-h4 { font-size: var(--gk-fs-h4); font-weight: 700; color: var(--gk-ink-800); }
.gk-lead { font-size: var(--gk-fs-lg); line-height: var(--gk-lh-normal); color: var(--gk-text-2); }
.gk-eyebrow {
  font-family: var(--gk-font-mono);
  font-size: var(--gk-fs-xs);
  font-weight: 500;
  letter-spacing: var(--gk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gk-text-3);
}
.gk-muted { color: var(--gk-text-2); }
.gk-mono  { font-family: var(--gk-font-mono); }
.gk-tnum  { font-variant-numeric: tabular-nums; }

/* --- BUTTONS -------------------------------------------------------------- */
.gk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gk-s-2);
  font-family: var(--gk-font-sans);
  font-size: var(--gk-fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--gk-radius);
  background: var(--gk-blue-600);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.gk-btn:hover  { background: var(--gk-blue-700); color: #fff; }
.gk-btn:active { transform: translateY(1px); }
.gk-btn:focus-visible { outline: none; box-shadow: var(--gk-focus-ring); }

.gk-btn--ghost { background: transparent; color: var(--gk-blue-600); border-color: var(--gk-border-2); }
.gk-btn--ghost:hover { background: var(--gk-blue-50); color: var(--gk-blue-700); border-color: var(--gk-blue-500); }

.gk-btn--dark { background: var(--gk-ink-800); color: #fff; }
.gk-btn--dark:hover { background: var(--gk-ink-900); }

.gk-btn--lg { font-size: var(--gk-fs-base); padding: 15px 28px; }
.gk-btn--sm { font-size: var(--gk-fs-xs); padding: 8px 14px; }
.gk-btn--block { width: 100%; }
.gk-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- BADGES --------------------------------------------------------------- */
.gk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--gk-font-mono);
  font-size: var(--gk-fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--gk-radius-pill);
  background: var(--gk-surface-2);
  color: var(--gk-text-2);
  border: 1px solid var(--gk-border);
}
.gk-badge--tier { background: var(--gk-blue-50); color: var(--gk-blue-700); border-color: var(--gk-blue-100); }
.gk-badge--pos  { background: var(--gk-pos-bg); color: var(--gk-pos-ink); border-color: var(--gk-pos); }
.gk-badge--neu  { background: var(--gk-neu-bg); color: var(--gk-neu-ink); border-color: var(--gk-neu); }
.gk-badge--neg  { background: var(--gk-neg-bg); color: var(--gk-neg-ink); border-color: var(--gk-neg); }
.gk-badge--solid{ background: var(--gk-ink-800); color: #fff; border-color: var(--gk-ink-800); }

/* dot for inline status */
.gk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gk-dot--pos { background: var(--gk-pos-ink); }
.gk-dot--neu { background: var(--gk-neu-ink); }
.gk-dot--neg { background: var(--gk-neg-ink); }

/* --- CARD ----------------------------------------------------------------- */
.gk-card {
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius-lg);
  padding: var(--gk-s-6);
  box-shadow: var(--gk-shadow-sm);
}
.gk-card--flat { box-shadow: none; }
.gk-card--pad-sm { padding: var(--gk-s-5); }

/* --- KPI TILE ------------------------------------------------------------- */
.gk-kpi {
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  padding: var(--gk-s-4) var(--gk-s-4) var(--gk-s-3);
}
.gk-kpi__label {
  font-family: var(--gk-font-mono);
  font-size: var(--gk-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gk-text-3);
}
.gk-kpi__value {
  font-family: var(--gk-font-display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gk-ink-800);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.gk-kpi__delta { font-size: var(--gk-fs-sm); font-weight: 600; margin-top: 2px; }
.gk-kpi__delta--pos { color: var(--gk-pos-ink); }
.gk-kpi__delta--neg { color: var(--gk-neg-ink); }
.gk-kpi__delta--flat{ color: var(--gk-text-3); }

/* --- TABLE ---------------------------------------------------------------- */
.gk-table { width: 100%; border-collapse: collapse; font-size: var(--gk-fs-base); font-variant-numeric: tabular-nums; }
.gk-table thead th {
  text-align: left;
  font-family: var(--gk-font-mono);
  font-size: var(--gk-fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gk-text-2);
  padding: 10px 14px;
  border-bottom: 2px solid var(--gk-ink-800);
  white-space: nowrap;
}
.gk-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gk-border); color: var(--gk-text); }
.gk-table tbody tr:last-child td { border-bottom: 0; }
.gk-table tbody tr.is-you td { background: var(--gk-blue-50); font-weight: 600; color: var(--gk-ink-800); }
.gk-table--card { background: var(--gk-surface); border: 1px solid var(--gk-border); border-radius: var(--gk-radius); overflow: hidden; box-shadow: var(--gk-shadow-sm); }

/* --- FORM FIELDS ---------------------------------------------------------- */
.gk-field { margin-bottom: var(--gk-s-4); }
.gk-label { display: block; font-size: var(--gk-fs-sm); font-weight: 600; color: var(--gk-ink-800); margin-bottom: 6px; }
.gk-label .req { color: var(--gk-neg-ink); }
.gk-input, .gk-select, .gk-textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--gk-fs-base);
  color: var(--gk-text);
  padding: 11px 13px;
  background: var(--gk-surface);
  border: 1.5px solid var(--gk-border-2);
  border-radius: var(--gk-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gk-input::placeholder, .gk-textarea::placeholder { color: var(--gk-text-3); }
.gk-input:focus, .gk-select:focus, .gk-textarea:focus { outline: none; border-color: var(--gk-blue-600); box-shadow: var(--gk-focus-ring); }
.gk-textarea { resize: vertical; min-height: 88px; }
.gk-help { font-size: var(--gk-fs-sm); color: var(--gk-text-3); margin-top: 6px; }

/* --- SENTIMENT: single bar ------------------------------------------------ */
.gk-bar { display: grid; grid-template-columns: 1fr; gap: 4px; }
.gk-bar__track { height: 16px; background: var(--gk-surface-2); border-radius: 5px; overflow: hidden; }
.gk-bar__fill  { height: 100%; background: var(--gk-blue-600); border-radius: 5px; }

/* --- SENTIMENT: stacked (pos/neu/neg) ------------------------------------- */
.gk-stack { display: flex; height: 20px; border-radius: 5px; overflow: hidden; background: var(--gk-surface-2); }
.gk-stack > i { display: block; height: 100%; }
.gk-stack > i.is-pos { background: var(--gk-pos); }
.gk-stack > i.is-neu { background: var(--gk-neu); }
.gk-stack > i.is-neg { background: var(--gk-neg); }

.gk-legend { display: flex; flex-wrap: wrap; gap: var(--gk-s-4); font-size: var(--gk-fs-sm); color: var(--gk-text-2); }
.gk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gk-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* --- BLUR-LOCK OVERLAY ---------------------------------------------------- */
.gk-lock { position: relative; }
.gk-lock__inner { filter: blur(5px); user-select: none; pointer-events: none; }
.gk-lock__veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--gk-s-3); text-align: center;
  background: linear-gradient(180deg, rgba(251,250,248,.30) 0%, rgba(251,250,248,.72) 100%);
  border-radius: var(--gk-radius);
}
.gk-lock__card {
  display: flex; flex-direction: column; align-items: center; gap: var(--gk-s-3);
  max-width: 440px; padding: var(--gk-s-5) var(--gk-s-6);
  background: var(--gk-surface);
  border: 1px solid var(--gk-border);
  border-radius: var(--gk-radius);
  box-shadow: var(--gk-shadow-lg);
}
.gk-lock__title { font-weight: 700; color: var(--gk-ink-800); font-size: var(--gk-fs-base); }
.gk-lock__icon {
  width: 34px; height: 34px; border-radius: var(--gk-radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--gk-blue-50); color: var(--gk-blue-700);
}
.gk-blurred { filter: blur(5px); user-select: none; }

/* --- SECTION RULE / EYEBROW LABEL ----------------------------------------- */
.gk-rule { height: 1px; background: var(--gk-border); border: 0; margin: var(--gk-s-7) 0; }
.gk-rule--ink { height: 2px; background: var(--gk-ink-800); }