/* ============================================================
   IMPACT brand lockup system — v438 global rebrand.
   Integrated wordmark: IMP + [A-glyph, 3 stacked chevrons] + CT.
   Fonts come from /vendor/fonts/fonts.css (Space Grotesk 700 for
   the wordmark, IBM Plex Mono 400/500 for tagline/credit) — link
   fonts.css BEFORE this file. Fully offline / air-gapped.

   Usage (wordmark; size via font-size on .imp-logo):
     <div class="imp-logo imp-anim" role="img" aria-label="IMPACT"
          style="font-size:34px">
       <span>IMP</span>
       <svg class="imp-a" viewBox="0 0 100 100" aria-hidden="true">
         <path class="imp-c1" d="M14 88 L50 66 L86 88" fill="none" stroke="#182430" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
         <path class="imp-c2" d="M22 60 L50 38 L78 60" fill="none" stroke="#182430" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
         <path class="imp-c3" d="M30 34 L50 12 L70 34" fill="none" stroke="#C0801F" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
       <span class="imp-ct">CT</span>
     </div>
   Variants: add .imp-anim for the pulse (splash/login/app chrome),
   omit for static (reports, print, chart branding). Add .imp-dark
   on dark backgrounds (white bars, amber apex unchanged).
   Hero (login/splash/report covers) — wrap in .imp-hero and set
   --imp-size; append .imp-tagline / .imp-credit rows.
   ============================================================ */

.imp-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #182430;
  white-space: nowrap;
}
.imp-logo .imp-a {
  width: 0.92em;
  height: 1em;
  align-self: flex-end;
  transform: translateY(8%);
  margin: 0 0.06em;
  flex: 0 0 auto;
}
.imp-logo .imp-ct { margin-left: 0.1em; }

/* dark-background variant: white bars, amber apex stays */
.imp-dark { color: #FBFCFD; }
.imp-dark .imp-c1, .imp-dark .imp-c2 { stroke: #FBFCFD; }

/* pulse animation — bottom to top, 2.1s */
@keyframes imp-chev { 0%, 100% { opacity: .18; } 30% { opacity: 1; } 60% { opacity: .45; } }
.imp-anim .imp-c1 { animation: imp-chev 2.1s ease-in-out infinite; }
.imp-anim .imp-c2 { animation: imp-chev 2.1s ease-in-out infinite .28s; }
.imp-anim .imp-c3 { animation: imp-chev 2.1s ease-in-out infinite .56s; }
@media (prefers-reduced-motion: reduce) {
  .imp-anim .imp-c1, .imp-anim .imp-c2, .imp-anim .imp-c3 { animation: none; }
}
@media print {
  .imp-anim .imp-c1, .imp-anim .imp-c2, .imp-anim .imp-c3 { animation: none; }
}

/* hero lockup — reference: --imp-size 88px; tagline = size/6.3 */
.imp-hero {
  --imp-size: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.imp-hero .imp-logo { font-size: var(--imp-size); }
.imp-hero .imp-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: calc(var(--imp-size) / 6.3);
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* optical centering vs trailing tracking */
  color: #6B7885;
  line-height: 1;
  white-space: nowrap;
}
.imp-hero .imp-credit {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  color: #A6B0BA;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
}
.imp-hero .imp-credit b { color: #6B7885; font-weight: 500; }
.imp-hero.imp-dark .imp-tagline { color: #8895A2; }
.imp-hero.imp-dark .imp-credit { color: #6B7885; }
.imp-hero.imp-dark .imp-credit b { color: #A6B0BA; }

/* app-icon tile (sidebar avatars, dark chips): glyph at 63% */
.imp-tile {
  background: #182430;
  border-radius: 24%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.imp-tile .imp-a { width: 63%; height: 63%; }
.imp-tile .imp-c1, .imp-tile .imp-c2 { stroke: #FBFCFD; }