/* ============================================================================
   GTA BRAND DESIGN SYSTEM — COMPONENTS
   ----------------------------------------------------------------------------
   Reusable, named brand components. Consumes SEMANTIC tokens only. Each block
   maps to an entry in components.html. Load after tokens.css + system.css.
   ============================================================================ */

/* --- TEXT STYLES ---------------------------------------------------------- */
.gta-eyebrow {
  font-family: var(--gta-font-mono);
  font-size: var(--gta-text-xs);
  font-weight: var(--gta-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--gta-tracking-eyebrow);
  color: var(--gta-accent-text);   /* per-product accent (default azure) */
}
.gta-display {
  font-family: var(--gta-font-headline);
  font-weight: var(--gta-weight-head-max);
  font-size: var(--gta-text-display);
  line-height: var(--gta-lh-tight);
  letter-spacing: var(--gta-tracking-tight);
  text-transform: uppercase;
  color: var(--gta-color-ink);
}
.gta-h1 { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head-max);
          font-size: var(--gta-text-3xl); line-height: var(--gta-lh-tight);
          letter-spacing: var(--gta-tracking-tight); text-transform: uppercase; color: var(--gta-color-ink); }
.gta-h2 { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head);
          font-size: var(--gta-text-2xl); line-height: var(--gta-lh-snug); color: var(--gta-color-ink); }
.gta-h3 { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head);
          font-size: var(--gta-text-xl); line-height: var(--gta-lh-snug); color: var(--gta-color-ink); }
.gta-lead { font-family: var(--gta-font-body); font-size: var(--gta-text-lg);
            line-height: var(--gta-lh-relaxed); color: var(--gta-color-ink-muted); }
.gta-body { font-family: var(--gta-font-body); font-size: var(--gta-text-base);
            line-height: var(--gta-lh-relaxed); color: var(--gta-color-ink); }
.gta-mono { font-family: var(--gta-font-mono); }
.gta-data-label {
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-ink-muted);
}

/* --- SPECTRUM UNDERLINE RULE ---------------------------------------------- */
.gta-spectrum-rule {
  display: block; border: 0;
  height: 4px; width: 180px; margin: var(--gta-space-3) 0 0;
  border-radius: var(--gta-radius-pill);
  background-image: var(--gta-spectrum);
}
.gta-spectrum-rule--full { width: 100%; }
.gta-spectrum-rule--wide { width: 320px; }
.gta-spectrum-rule--thin { height: 2px; }

/* --- SECTION DIVIDER ------------------------------------------------------ */
.gta-divider {
  border: 0; height: var(--gta-border-width);
  background: var(--gta-color-line);
  margin: var(--gta-space-12) 0;
  position: relative;
}
.gta-divider::before {
  content: ""; position: absolute; left: 0; top: 0;
  height: 100%; width: 64px;
  background-image: var(--gta-spectrum);
}

/* --- BUTTONS & LINKS ------------------------------------------------------ */
.gta-btn {
  display: inline-flex; align-items: center; gap: var(--gta-space-2);
  font-family: var(--gta-font-body); font-weight: var(--gta-weight-semibold);
  font-size: var(--gta-text-sm); letter-spacing: var(--gta-tracking-wide);
  text-transform: uppercase; line-height: 1;
  padding: var(--gta-space-3) var(--gta-space-5);
  border-radius: var(--gta-radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all 120ms ease;
}
.gta-btn--primary { background: var(--gta-accent-ink); color: #fff; }
.gta-btn--primary:hover { filter: brightness(1.12); text-decoration: none; }
.gta-btn--ghost { background: transparent; border-color: var(--gta-color-line); color: var(--gta-color-ink); }
.gta-btn--ghost:hover { border-color: var(--gta-accent); color: var(--gta-accent-text); text-decoration: none; }
.gta-link-arrow {
  font-family: var(--gta-font-body); font-weight: var(--gta-weight-semibold);
  font-size: var(--gta-text-sm); letter-spacing: var(--gta-tracking-wide);
  text-transform: uppercase; color: var(--gta-color-link);
  display: inline-flex; align-items: center; gap: var(--gta-space-2);
}
.gta-link-arrow::after { content: "\2192"; transition: transform 120ms ease; }
.gta-link-arrow:hover { text-decoration: none; }
.gta-link-arrow:hover::after { transform: translateX(3px); }

/* --- GTA LOGO PLATE ------------------------------------------------------- */
/* The GTA logo is the REAL wordmark image (assets/gta-logo.png), always shown on
   a white rounded plate so it reads on the dark ground (and as a clean card on
   light). Never re-draw the wordmark in vector/font; "GTA" in running text uses
   the type system instead. Size by setting the <img> height (default 28px). */
.gta-logo-plate {
  display: inline-flex; align-items: center;
  background: #fff;
  border-radius: var(--gta-radius-md);
  padding: var(--gta-space-2) var(--gta-space-3);
  box-shadow: var(--gta-shadow-card);
}
.gta-logo-plate img { display: block; height: 28px; width: auto; }
.gta-logo-plate--lg img { height: 56px; }
.gta-logo-plate--md img { height: 40px; }
.gta-logo-plate--sm img { height: 22px; }

/* Sub-brand lockup: plate + azure divider + product name in the headline face
   (Fluxx adds the Φ disc before the name). */
.gta-lockup { display: inline-flex; align-items: center; gap: var(--gta-space-4); }
.gta-lockup__div {
  width: 2px; align-self: stretch; min-height: 1.6em;
  background: var(--gta-color-brand-blue); border-radius: var(--gta-radius-pill);
}
.gta-lockup__prod {
  font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head);
  letter-spacing: var(--gta-tracking-tight); color: var(--gta-color-ink);
  display: inline-flex; align-items: center; gap: var(--gta-space-2); line-height: 1;
}
.gta-lockup__phi { height: 1.15em; width: auto; display: block; }

/* --- INGREDIENT TECHNOLOGY BADGE (FAST-BMA / NINJA) ----------------------- */
.gta-ingredient {
  display: inline-flex; align-items: center; gap: var(--gta-space-2);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-ink-muted);
  border: 1px solid var(--gta-color-line);
  border-radius: var(--gta-radius-sm);
  padding: var(--gta-space-1) var(--gta-space-3);
}
.gta-ingredient strong { color: var(--gta-color-ink); font-weight: var(--gta-weight-semibold); }
.gta-ingredient .gta-ingredient__spark { color: var(--gta-color-signal-cyan); }

/* --- STATUS: built / building / planned ----------------------------------- */
/* Color is ONE channel; the glyph (in markup) + the text label carry meaning too. */
.gta-badge {
  display: inline-flex; align-items: center; gap: var(--gta-space-2);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  font-weight: var(--gta-weight-medium); text-transform: uppercase;
  letter-spacing: var(--gta-tracking-wide);
  padding: var(--gta-space-1) var(--gta-space-3);
  border-radius: var(--gta-radius-pill);
  border: 1px solid currentColor;
}
.gta-badge__glyph { font-size: 0.9em; line-height: 1; }
.gta-badge--built    { color: var(--gta-status-built);    background: color-mix(in srgb, var(--gta-status-built) 14%, transparent); }
.gta-badge--building { color: var(--gta-status-building); background: color-mix(in srgb, var(--gta-status-building) 14%, transparent); }
.gta-badge--planned  { color: var(--gta-status-planned);  background: color-mix(in srgb, var(--gta-status-planned) 16%, transparent); }

.gta-status-legend {
  display: flex; flex-wrap: wrap; gap: var(--gta-space-5);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-sm);
}
.gta-status-legend__item { display: inline-flex; align-items: center; gap: var(--gta-space-2); color: var(--gta-color-ink-muted); }
.gta-status-dot { width: 12px; height: 12px; border-radius: var(--gta-radius-pill); display: inline-block; }
.gta-status-dot--built    { background: var(--gta-status-built); }
.gta-status-dot--building  { background: var(--gta-status-building); }
.gta-status-dot--planned  { background: transparent; border: 1.5px dashed var(--gta-status-planned); }

/* --- CITATION / VALIDATED-RESULT STANDARD --------------------------------- */
/* Inline data-source chip, e.g. "NASA EMIT", "AVIRIS", "S-K 1300". */
.gta-source-chip {
  display: inline-flex; align-items: center; gap: var(--gta-space-1);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
  letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-signal-cyan);
  border: 1px solid color-mix(in srgb, var(--gta-color-signal-cyan) 50%, transparent);
  border-radius: var(--gta-radius-sm); padding: 1px var(--gta-space-2);
}
/* Footnote-style academic citations list. */
.gta-citations { font-family: var(--gta-font-mono); font-size: var(--gta-text-xs);
                 line-height: var(--gta-lh-base); color: var(--gta-color-ink-muted); }
.gta-citations li { padding-left: var(--gta-space-4); text-indent: calc(-1 * var(--gta-space-4)); }
.gta-citations li + li { margin-top: var(--gta-space-2); }
.gta-citations cite { color: var(--gta-color-ink); font-style: normal; font-weight: var(--gta-weight-medium); }

/* --- CARD (base) ---------------------------------------------------------- */
.gta-card {
  background: var(--gta-color-surface); border: var(--gta-border);
  border-radius: var(--gta-radius-lg); padding: var(--gta-space-6);
  box-shadow: var(--gta-shadow-card);
}

/* --- TECHNICAL PROOF-POINT CARD ------------------------------------------- */
/* Reskinned from the brochures: dark software media + worked example + citation. */
.gta-proof-card {
  background: var(--gta-color-surface); border: var(--gta-border);
  border-radius: var(--gta-radius-lg); overflow: hidden;
  box-shadow: var(--gta-shadow-card);
  display: flex; flex-direction: column;
}
.gta-proof-card__media {
  position: relative;
  background: var(--gta-charcoal-950);   /* media stays dark on both themes */
  padding: var(--gta-space-3);
  border-bottom: 1px solid var(--gta-color-line);
}
.gta-proof-card__media img { border-radius: var(--gta-radius-sm); width: 100%; }
.gta-proof-card__reticle { position: absolute; top: var(--gta-space-3); right: var(--gta-space-3); width: 40px; height: 40px; }
.gta-proof-card__body { padding: var(--gta-space-6); display: flex; flex-direction: column; gap: var(--gta-space-3); }
.gta-proof-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-3); flex-wrap: wrap; }
.gta-proof-card__title { font-family: var(--gta-font-headline); font-weight: var(--gta-weight-head);
                         font-size: var(--gta-text-xl); text-transform: uppercase; line-height: var(--gta-lh-snug); }
.gta-proof-card__cite { margin-top: var(--gta-space-2); padding-top: var(--gta-space-3); border-top: 1px solid var(--gta-color-line); }

/* --- STAT / METRIC CALLOUT ------------------------------------------------ */
/* Refined "LITHIUM DETECTED / abundance / precision" box. */
.gta-stat {
  background: var(--gta-color-surface); border-radius: var(--gta-radius-md);
  border: 1px solid var(--gta-accent);
  box-shadow: var(--gta-glow-accent);
  padding: var(--gta-space-5); max-width: 360px;
  font-family: var(--gta-font-mono);
}
.gta-stat__label {
  font-size: var(--gta-text-sm); font-weight: var(--gta-weight-medium);
  text-transform: uppercase; letter-spacing: var(--gta-tracking-wide);
  color: var(--gta-color-ink); margin-bottom: var(--gta-space-3);
}
.gta-stat__label em { color: var(--gta-status-built); font-style: normal; }
.gta-stat__rows { display: grid; gap: var(--gta-space-2); }
.gta-stat__row { display: flex; justify-content: space-between; gap: var(--gta-space-6); font-size: var(--gta-text-sm); }
.gta-stat__k { color: var(--gta-color-ink-muted); text-transform: uppercase; letter-spacing: var(--gta-tracking-wide); }
.gta-stat__v { color: var(--gta-color-ink); font-weight: var(--gta-weight-medium); }

/* --- QUOTE / TESTIMONIAL -------------------------------------------------- */
.gta-quote { position: relative; padding-left: var(--gta-space-6); }
.gta-quote::before {
  content: ""; position: absolute; left: 0; top: var(--gta-space-1); bottom: var(--gta-space-1);
  width: 4px; border-radius: var(--gta-radius-pill); background-image: var(--gta-spectrum);
}
.gta-quote__text {
  font-family: var(--gta-font-headline); font-weight: var(--gta-weight-semibold);
  font-size: var(--gta-text-xl); line-height: var(--gta-lh-snug); color: var(--gta-color-ink);
}
.gta-quote__cite { margin-top: var(--gta-space-3); font-family: var(--gta-font-mono);
                   font-size: var(--gta-text-sm); color: var(--gta-color-ink-muted); }
.gta-quote__cite strong { color: var(--gta-color-ink); font-weight: var(--gta-weight-medium); }

/* --- DOCUMENT HEADER / FOOTER (print pieces) ------------------------------ */
.gta-doc-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-4);
  padding-block: var(--gta-space-4); border-bottom: 1px solid var(--gta-color-line);
}
.gta-doc-header .gta-logo { height: var(--gta-space-8); }
.gta-doc-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gta-space-4);
  padding-block: var(--gta-space-4); border-top: 1px solid var(--gta-color-line);
  font-family: var(--gta-font-mono); font-size: var(--gta-text-xs); color: var(--gta-color-ink-muted);
}

/* --- HERO BLOCK (See What Others Can't) ----------------------------------- */
.gta-hero { position: relative; padding: var(--gta-space-16) var(--gta-space-8); overflow: hidden; border-radius: var(--gta-radius-lg); }
.gta-hero__inner { position: relative; z-index: 1; max-width: 42ch; }