/* ============================================================
   Entirely Growth Radar

   The design handoff authored every style inline, because its
   prototype dialect streams markup. That did NOT come across:
   the CloudFront CSP here is script-src 'self' with no
   'unsafe-inline', so all of it lives in this file and all
   behaviour lives in app.js.

   Token VALUES are the handoff's, exactly. The muted text ladder
   is rgba(242,235,227, a) throughout - sand at an alpha - and the
   line ladder is rgba(255,255,255, a). Both are named below so a
   new rule picks a rung rather than inventing one.
   ============================================================ */

:root {
  --neon: #c7f100;
  --lime: #42dd41;
  --aqua: #78ede3;
  --moss: #003e26;
  --sand: 242, 235, 227;

  /* text ladder */
  --t-emph:  rgba(var(--sand), 0.85);
  --t-body:  rgba(var(--sand), 0.75);
  --t-blip:  rgba(var(--sand), 0.72);
  --t-cell:  rgba(var(--sand), 0.7);
  --t-head:  rgba(var(--sand), 0.65);
  --t-stat:  rgba(var(--sand), 0.62);
  --t-meta:  rgba(var(--sand), 0.6);
  --t-label: rgba(var(--sand), 0.55);
  --t-mute:  rgba(var(--sand), 0.5);
  --t-place: rgba(var(--sand), 0.45);

  /* line ladder */
  --l-strong: rgba(255, 255, 255, 0.28);
  --l-rule:   rgba(255, 255, 255, 0.22);
  --l-card:   rgba(255, 255, 255, 0.18);
  --l-ring:   rgba(255, 255, 255, 0.16);
  --l-list:   rgba(255, 255, 255, 0.12);
  --l-row:    rgba(255, 255, 255, 0.1);
  --l-fill:   rgba(255, 255, 255, 0.06);
  --l-hover:  rgba(255, 255, 255, 0.04);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 120ms;
  --base: 220ms;

  --font-sans: 'Outfit', Aptos, Calibri, system-ui, sans-serif;
  --font-display: 'Bagoss Standard', Georgia, serif;
  --tracking-body: 0.015em;
  --tracking-caps: 0.08em;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is enforced by the UA stylesheet as
   [hidden] { display: none }, which ANY class rule that sets `display` beats on
   specificity. .gate and .gate-actions both set one, so `el.hidden = true` set
   the property and changed nothing on screen: the gate stayed painted over a
   perfectly signed-in app, reading "Signing you in..." forever.
   Global and !important on purpose - every future `hidden` toggle in app.js
   depends on this, and the failure is silent. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.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;
}

/* Focus is never removed, only restyled - the design nominates a 2px neon ring
   at 2px offset, and blips are keyboard-operable here (the prototype's were
   focusable but not activatable). */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }

/* ------------------------------------------------------------------ gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.gate-card { max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.gate-eyebrow {
  margin: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-meta);
}
.gate-title {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 38px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--neon);
}
.gate-message { margin: 0; font-size: 14.5px; color: var(--t-body); text-wrap: pretty; }
.gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ------------------------------------------------------------------- app */
.app { max-width: 1480px; margin: 0 auto; padding: 32px 34px 72px; }

.head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  border-bottom: 1px solid var(--l-rule); padding-bottom: 22px;
}
.head-left { max-width: 640px; display: flex; flex-direction: column; gap: 10px; }

.live { margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--t-meta); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--neon);
  animation: om-pulse 2.4s ease-in-out infinite;
}
@keyframes om-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.h1 {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 46px;
  line-height: 1.15; letter-spacing: -0.01em;
}
.h1 span { color: var(--neon); }
.deck { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-cell); text-wrap: pretty; }

.stats { display: flex; gap: 34px; margin: 0; text-align: right; flex-wrap: wrap; }
.stats div { display: block; }
.stats dd {
  margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats dt {
  margin-top: 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-label);
}
.stats .neon dd { color: var(--neon); }
.stats .aqua dd { color: var(--aqua); }

/* ----------------------------------------------------------------- cards */
.panels { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.card { background: var(--moss); border-radius: 16px; }
.radar-card { flex: 1 1 620px; padding: 20px; min-width: 0; }
.detail-card { flex: 1 1 380px; min-height: 520px; overflow: hidden; min-width: 0; }

/* --------------------------------------------------------------- toolbar */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 7px 14px; border-radius: 999px; background: transparent;
  color: var(--t-cell); border: 1px solid var(--l-strong);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { color: #fff; border-color: var(--neon); }
.chip[aria-pressed="true"] { background: var(--neon); color: #000; border-color: var(--neon); }

.search { margin-left: auto; position: relative; min-width: 250px; }
.search input {
  width: 100%; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--l-rule);
  color: #fff; padding: 9px 13px; border-radius: 8px; font-size: 13px;
}
.search input::placeholder { color: var(--t-place); }

.results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-width: 90vw;
  max-height: 340px; overflow-y: auto; background: #000; border: 1px solid var(--l-strong);
  border-radius: 12px; z-index: 40; margin: 0; padding: 0; list-style: none;
}
.results li + li { border-top: 1px solid var(--l-list); }
.results button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 11px 14px;
}
.results button:hover, .results button:focus-visible { background: rgba(199, 241, 0, 0.1); }
.results .r-name { font-size: 13px; color: #fff; }
.results .r-meta { font-size: 11px; color: var(--t-meta); margin-top: 2px; }
.results .r-empty { padding: 11px 14px; font-size: 12.5px; color: var(--t-mute); }

/* ----------------------------------------------------------------- radar */
.radar-wrap { max-width: 640px; margin: 0 auto; }
.radar-wrap svg { width: 100%; height: auto; overflow: visible; display: block; }

.blip { cursor: pointer; }
/* A revealed name is painted last, over whatever is beneath it, so it gets a
   dark halo via paint-order rather than a background rectangle - SVG text has
   no background, and a rect behind it would have to be measured. */
.hover-label text {
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 62, 38, 0.92);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.blip:focus { outline: none; }
.blip:focus-visible .blip-dot { stroke: #fff; stroke-opacity: 1; stroke-width: 2.5; }
.ping { animation: om-ping 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes om-ping {
  from { r: 6; opacity: .9 }
  to   { r: 20; opacity: 0 }
}
.sweep { animation: om-sweep 9s linear infinite; transform-origin: 0 0; }
@keyframes om-sweep { to { transform: rotate(360deg) } }

/* Every named animation is suppressed here, per the design's motion section.
   The sweep in particular is a full-speed rotating wedge behind the data. */
@media (prefers-reduced-motion: reduce) {
  .live-dot, .ping, .sweep { animation: none; }
  .ping { opacity: 0; }
  * { transition-duration: 1ms !important; }
}

.legend {
  border-top: 1px solid var(--l-card); padding-top: 14px; margin-top: 4px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--t-meta);
}
.legend-keys { display: flex; gap: 18px; flex-wrap: wrap; }
.key { display: inline-flex; align-items: center; gap: 7px; }
.key-dot { width: 9px; height: 9px; border-radius: 50%; }
.key-dot.tier1 { background: var(--neon); }
.key-dot.tier2 { background: var(--aqua); }
.key-dot.hollow { background: transparent; border: 1.4px solid var(--aqua); }
.key-ring {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px dashed rgba(var(--sand), 0.8);
}
.legend-count { margin: 0; }

/* ---------------------------------------------------------------- detail */
.empty {
  padding: 56px 28px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.empty h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 20px; }
.empty p { margin: 0; font-size: 13px; color: var(--t-head); max-width: 300px; text-wrap: pretty; }

.d-head { padding: 22px; border-bottom: 1px solid var(--l-card); }
.d-eyebrow {
  margin: 0; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-meta);
}
.d-name { margin: 8px 0 0; font-family: var(--font-display); font-weight: 300;
  font-size: 26px; line-height: 1.2; }
.d-brand { margin: 4px 0 0; font-size: 13px; color: var(--t-blip); }
.badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--l-strong); color: var(--t-emph);
}
.badge.tier1 { border-color: var(--neon); color: var(--neon); }
.badge.tier2 { border-color: var(--aqua); color: var(--aqua); }
.badge.customer { border-color: var(--lime); color: var(--lime); }
.badge.pipeline { border-color: var(--aqua); color: var(--aqua); }
.badge.estimated { border-style: dashed; color: var(--t-label); }

.d-body {
  padding: 22px; max-height: 640px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.firmo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.firmo .wide { grid-column: 1 / -1; }
.firmo dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--t-label);
}
.firmo dd { margin: 4px 0 0; font-size: 13.5px; color: #fff; }

.callout {
  background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--neon);
  border-radius: 0 8px 8px 0; padding: 13px 15px;
  font-size: 13px; line-height: 1.5; color: var(--t-emph);
}
.callout.muted { border-left-color: var(--t-label); color: var(--t-body); }

.sec-head {
  border-top: 1px solid var(--l-card); padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sec-head h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: 0.01em; }
.disclaimer { margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: var(--t-mute); }
.status-line { margin: 10px 0 0; font-size: 12.5px; color: var(--t-stat); text-wrap: pretty; }
.status-line.bad { color: #ffb08a; }

.btn-primary {
  padding: 7px 16px; border-radius: 999px; border: 0; background: var(--neon);
  color: #000; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--lime); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.btn-ghost {
  padding: 7px 16px; border-radius: 999px; background: transparent;
  border: 1px solid var(--neon); color: var(--neon); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  text-decoration: none; white-space: nowrap; display: inline-block;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn-ghost:hover:not(:disabled) { background: var(--neon); color: #000; }
.btn-ghost:disabled { opacity: .55; cursor: default; }
.btn-ghost.sm { border-color: var(--l-strong); color: #fff; padding: 7px 15px; }
.btn-ghost.sm:hover:not(:disabled) { background: transparent; border-color: var(--neon); color: var(--neon); }

.cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.signal { background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 13px 15px; }
.signal-top { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.signal-h { font-size: 13.5px; color: #fff; }
.signal-date {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--t-mute); white-space: nowrap;
}
.signal-s { margin: 6px 0 0; font-size: 12.5px; color: var(--t-body); }
.signal-f {
  margin-top: 8px; display: flex; gap: 12px; justify-content: space-between;
  flex-wrap: wrap;
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.signal-src { color: var(--neon); }
.signal-rel { color: var(--t-mute); }

.contact { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--l-list); }
.contact:last-child { border-bottom: 0; }
.contact-name { font-size: 13px; color: #fff; }
.contact-title { font-size: 11.5px; color: var(--t-meta); }
.pill {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--l-strong); color: var(--t-cell);
}
.pill.on { background: var(--neon); color: #000; border-color: var(--neon); }

/* -------------------------------------------------------------- universe */
.universe { margin-top: 24px; border: 1px solid var(--l-rule); border-radius: 16px; overflow: hidden; }
.universe-toggle {
  width: 100%; padding: 20px 22px; background: transparent; border: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left; transition: background var(--fast) var(--ease);
}
.universe-toggle:hover { background: var(--l-hover); }
.universe-h { display: block; font-family: var(--font-display); font-weight: 300; font-size: 19px; }
.universe-sub {
  display: block; margin-top: 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-label);
}
.universe-cta {
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--neon); white-space: nowrap;
}
.universe-body { padding: 0 22px 22px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input, .filters select {
  background: var(--l-fill); border: 1px solid var(--l-rule); color: #fff;
  padding: 9px 13px; border-radius: 8px; font-size: 13px;
}
.filters input { min-width: 240px; }
.filters input::placeholder { color: var(--t-place); }
.filters option { background: #000; }
.filter-count {
  margin: 0 0 0 auto; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-label);
}

.table-scroll { overflow-x: auto; }
.uni-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.uni-table th {
  text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--l-strong);
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-head); white-space: nowrap;
}
.uni-table th button {
  background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit;
  color: inherit; text-transform: inherit;
}
.uni-table th button:hover { color: #fff; }
.uni-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--l-row); }
.uni-table tbody tr { cursor: pointer; }
.uni-table tbody tr:hover { background: rgba(199, 241, 0, 0.07); }
.uni-table tbody tr[aria-selected="true"] { background: rgba(199, 241, 0, 0.12); }
.c-rank { color: var(--t-meta); font-variant-numeric: tabular-nums; }
.c-company { color: #fff; }
.c-muted { color: var(--t-cell); }
.c-score { color: var(--neon); font-variant-numeric: tabular-nums; }
.t-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--l-strong);
  color: var(--t-cell); white-space: nowrap;
}
.t-badge.tier1 { border-color: var(--neon); color: var(--neon); }
.t-badge.tier2 { border-color: var(--aqua); color: var(--aqua); }
.uni-empty { padding: 26px 0; color: var(--t-mute); font-size: 13px; }

.pager {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--t-meta);
}
.pager p { margin: 0; }
.pager-btns { display: flex; gap: 10px; }

.method {
  margin-top: 22px; font-size: 11.5px; line-height: 1.6; color: var(--t-mute);
  max-width: 980px; text-wrap: pretty;
}

/* The design is not drawn below ~700px and says so. This keeps it usable at
   tablet width rather than pretending otherwise: the panels stack (they are
   flex items at 1 1 620 / 1 1 380, so this happens on its own around 1040px),
   and the table scrolls sideways in its own container. */
@media (max-width: 720px) {
  .app { padding: 24px 18px 56px; }
  .h1 { font-size: 34px; }
  .stats { gap: 22px; text-align: left; }
  .stats dd { font-size: 26px; }
  .search { margin-left: 0; width: 100%; }
  .results { width: 100%; right: auto; left: 0; }
  .firmo { grid-template-columns: 1fr; }
}