/* ProAir — design system.
   Inter is self-hosted: the CSP blocks Google Fonts, and we would rather not
   depend on a third party for how the app looks. */

@font-face {
  font-family: 'InterVar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* surfaces */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --surface-3: #e8edf3;
  --border: #e3e8ef;
  --border-strong: #cfd8e3;

  /* ink */
  --text: #0f1c2e;
  --text-2: #3f5069;
  --muted: #6b7c93;
  --faint: #93a1b5;

  /* brand */
  --navy: #102540;
  --navy-2: #16324f;
  --accent: #1d4ed8;
  --accent-soft: #e8efff;
  --air: #0ea5e9;

  /* semantic */
  --t1: #067a55; --t1-bg: #dcfaee;
  --t2: #a35a07; --t2-bg: #fdf0d5;
  --t3: #5a6a80; --t3-bg: #eaeef4;
  --danger: #b42318; --danger-bg: #fee4e2;
  --ok: #067a55;

  --radius: 12px;
  --radius-sm: 8px;
  --ring: 0 0 0 3px rgba(29, 78, 216, .18);
  --shadow-sm: 0 1px 2px rgba(15, 28, 46, .05);
  --shadow: 0 1px 2px rgba(15, 28, 46, .04), 0 6px 16px -6px rgba(15, 28, 46, .10);
  --shadow-lg: 0 12px 32px -12px rgba(15, 28, 46, .28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1017;
    --surface: #111a24;
    --surface-2: #17222f;
    --surface-3: #1e2b3a;
    --border: #22303f;
    --border-strong: #2e3f52;

    --text: #e9eff7;
    --text-2: #bccbdc;
    --muted: #8b9cb3;
    --faint: #6b7c93;

    --navy: #0d1926;
    --navy-2: #142338;
    --accent: #5b91f5;
    --accent-soft: #16263f;
    --air: #38bdf8;

    --t1: #5fdcb0; --t1-bg: #063d2c;
    --t2: #f0c05a; --t2-bg: #3d2f0d;
    --t3: #b6c3d4; --t3-bg: #23303f;
    --danger: #f7a29a; --danger-bg: #3b1714;
    --ok: #5fdcb0;

    --ring: 0 0 0 3px rgba(91, 145, 245, .25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 16px 40px -16px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---------- top bar ---------- */

header.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.5rem; height: 60px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  position: sticky; top: 0; z-index: 30;
}

.brand { display: flex; align-items: center; gap: .6rem; }
.brand .name {
  font-size: 1.02rem; font-weight: 650; color: #fff;
  letter-spacing: -0.02em;
}

.topbar nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.topbar nav a {
  color: rgba(233, 240, 250, .72); padding: .4rem .75rem;
  border-radius: 8px; font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.topbar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.topbar nav a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; }

.topbar .who {
  font-size: .84rem; color: rgba(233, 240, 250, .72);
  white-space: nowrap; display: flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
a.who:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 650; letter-spacing: .02em;
}
.topbar button.link {
  background: none; border: 0; color: rgba(233, 240, 250, .7);
  cursor: pointer; font-size: .84rem; padding: .3rem .5rem; border-radius: 8px;
  height: auto;
}
.topbar button.link:hover { color: #fff; background: rgba(255, 255, 255, .08); }

main { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }

/* ---------- type ---------- */

h1 {
  font-size: 1.45rem; font-weight: 640; letter-spacing: -0.022em;
  margin: 0 0 1.15rem;
}
h2 {
  font-size: .93rem; font-weight: 620; letter-spacing: -0.008em;
  margin: 0 0 .85rem; color: var(--text);
}
.eyebrow {
  font-size: .7rem; font-weight: 620; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
}
.card.flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: 1.1rem; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid.two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .grid.two { grid-template-columns: 1fr; } }

.stat { position: relative; overflow: hidden; }
.stat .label {
  color: var(--faint); font-size: .7rem; font-weight: 620;
  text-transform: uppercase; letter-spacing: .09em;
}
.stat .value {
  font-size: 1.95rem; font-weight: 640; margin-top: .35rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1;
}
.stat .foot { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.stat .accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .9;
}
.stat.t1 .accent { background: var(--t1); }
.stat.t2 .accent { background: var(--t2); }
.stat.t3 .accent { background: var(--t3); }

/* ---------- forms ---------- */

label {
  display: block; font-size: .76rem; font-weight: 560;
  color: var(--muted); margin-bottom: .3rem;
}
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; height: 36px; padding: 0 .65rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { height: auto; min-height: 84px; padding: .55rem .65rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}

select {
  appearance: none;
  padding-right: 1.9rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

button {
  height: 36px; padding: 0 .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font-weight: 550; font-size: .875rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
button:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
button:active { transform: translateY(1px); }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 28, 46, .12);
}
button.primary:hover { filter: brightness(1.07); background: var(--accent); color: #fff; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: var(--surface-2); color: var(--text); }
button.danger { color: var(--danger); }
button.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
button.small { height: 30px; padding: 0 .65rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .7rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- table ---------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .885rem; }
thead th {
  /* Sticky relative to .table-wrap, which is the scroll container because of
     overflow-x. Offsetting by the topbar height would push the header DOWN
     over the first row and swallow its clicks. */
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-2);
  color: var(--muted); font-size: .69rem; font-weight: 640;
  text-transform: uppercase; letter-spacing: .085em;
  white-space: nowrap; cursor: pointer; user-select: none;
  padding: .6rem .85rem; text-align: left;
  border-bottom: 1px solid var(--border);
  transition: color .15s ease;
}
thead th:hover { color: var(--text); }
thead th.sorted { color: var(--accent); }
td {
  padding: .7rem .85rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td .name { font-weight: 600; letter-spacing: -0.01em; }
td .sub { color: var(--muted); font-size: .8rem; margin-top: .1rem; }

/* Industry blurbs run to several sentences; clamp them so row heights stay
   even and the table scans. The full text is on the company page. */
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
td:nth-child(2) { min-width: 200px; }
td:nth-child(3) { min-width: 250px; }

/* score meter in the list */
.score { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.score .n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 1.6rem; text-align: right; }
.score .meter { width: 42px; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.score .meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .5rem .16rem .45rem; border-radius: 999px;
  font-size: .735rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.t1 { background: var(--t1-bg); color: var(--t1); }
.badge.t2 { background: var(--t2-bg); color: var(--t2); }
.badge.t3 { background: var(--t3-bg); color: var(--t3); }
.badge.status { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.badge.status.s-new { background: var(--surface-2); color: var(--text-2); }
.badge.status.s-talking { background: var(--accent-soft); color: var(--accent); }
.badge.status.s-customer { background: var(--t1-bg); color: var(--t1); }
.badge.status.s-lost { background: var(--danger-bg); color: var(--danger); }
.badge.status.s-research { background: var(--t2-bg); color: var(--t2); }

.star {
  background: none; border: 0; height: auto; padding: .15rem .2rem;
  line-height: 0; color: var(--faint); cursor: pointer;
}
.star:hover { background: none; border: 0; color: #e0a419; }

/* ---------- detail ---------- */

.crumb { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }

.detail-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.15rem; }
.detail-head h1 { margin: 0; }
.detail-head .meta { color: var(--muted); font-size: .85rem; margin-top: .2rem; }

dl.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.25rem; margin: 0; }
dl.fields dt { color: var(--muted); font-size: .82rem; }
dl.fields dd { margin: 0; overflow-wrap: anywhere; }

.evidence {
  white-space: pre-wrap; background: var(--surface-2);
  border: 1px solid var(--border);
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text-2);
}

.ring-wrap { display: flex; align-items: center; gap: 1rem; }
.ring-label .n { font-size: 1.7rem; font-weight: 640; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ring-label .t { color: var(--muted); font-size: .8rem; }

.note, .contact { border-bottom: 1px solid var(--border); padding: .7rem 0; }
.note:last-child, .contact:last-child { border-bottom: 0; }
.note .meta { color: var(--faint); font-size: .76rem; }
.contact .former { color: var(--muted); font-style: italic; }

/* ---------- misc ---------- */

.muted { color: var(--muted); }
.small { font-size: .84rem; }
.stack > * + * { margin-top: 1.1rem; }
.mt { margin-top: 1rem; }
.nowrap { white-space: nowrap; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty .big { font-size: .95rem; color: var(--text-2); font-weight: 560; margin-bottom: .25rem; }

.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: .65rem 1.1rem;
  border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 60;
  font-size: .875rem; font-weight: 500;
  animation: rise .2s ease-out;
}
.toast.err { background: var(--danger); }
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.msg {
  font-size: .865rem; padding: .6rem .75rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.msg.err { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.msg.ok { color: var(--ok); background: var(--t1-bg); border-color: transparent; }

.pager { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: 1.2rem; }

.dist { display: grid; gap: .5rem; }
.dist .line {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.6rem;
  gap: .65rem; align-items: center; font-size: .85rem;
}
.bar { height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--air));
}

/* ---------- auth ---------- */

.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(29, 78, 216, .10), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(14, 165, 233, .10), transparent 55%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 1.9rem 1.75rem;
}
.auth-card .brand { justify-content: center; margin-bottom: 1.35rem; }
.auth-card .brand .name { color: var(--text); font-size: 1.15rem; }
.auth-card h1 { font-size: 1.12rem; text-align: center; margin-bottom: .25rem; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: .86rem; margin-bottom: 1.35rem; }
.auth-card form > * + * { margin-top: .85rem; }
.auth-card button[type=submit] { width: 100%; height: 40px; }
.auth-foot { text-align: center; margin-top: 1.15rem; font-size: .85rem; }
.auth-foot button {
  background: none; border: 0; height: auto; padding: 0;
  color: var(--accent); font-size: .85rem; font-weight: 550; cursor: pointer;
}
.auth-foot button:hover { background: none; text-decoration: underline; color: var(--accent); }
.ms-signin { width: 100%; height: 42px; font-weight: 600; color: var(--text); gap: .6rem; }
.auth-or {
  display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .85rem;
  color: var(--faint); font-size: .78rem;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-note { text-align: center; margin-top: 1.5rem; font-size: .78rem; color: var(--faint); }

/* ---------- map ---------- */

#leafmap { width: 100%; border-radius: var(--radius-sm); background: var(--surface-2); }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content { margin: .7rem .9rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg); border-radius: 10px;
}
.leaflet-bar a { background: var(--surface); color: var(--text); border-color: var(--border); }
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane { filter: brightness(.72) saturate(.8) contrast(1.05); }
}

.legend { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }