/* =============================================================================
   ShiftHawk — Platform hover popups (Industry Explorer tree expansion)
   Hovering an industry tile or a job chip in the explorer opens a small table
   of the scheduling platforms that role usually runs on, with a "How-to
   connect" link per row that deep-links into /how-to-connect#<platform>.
   Prefix: .pp-   Tokens from styles.css (dark mode flips via the var cascade).
   Desktop-only (hover + fine pointer); the section copy carries the same link
   for touch / keyboard users.
   ========================================================================== */

.pp-pop {
  position: fixed;
  z-index: 90;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(72vh, 560px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  padding: var(--s-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pp-pop.pp-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .pp-pop { transition: none; transform: none; }
  .pp-pop.pp-open { transform: none; }
}

/* accent wash along the top edge, tinted per-industry via --pp-accent */
.pp-pop::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: linear-gradient(90deg, var(--pp-accent, var(--primary)),
              color-mix(in srgb, var(--pp-accent, var(--primary)) 30%, transparent));
}

/* ------------------------------------------------------------------ header */
.pp-head { display: grid; gap: 4px; margin-bottom: var(--s-3); }
.pp-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pp-accent, var(--primary));
}
.pp-crumb i { font-size: 1rem; }
.pp-crumb .pp-sep { color: var(--text-3); }
.pp-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--text-1);
}
.pp-sub { margin: 0; font-size: .82rem; color: var(--text-3); line-height: 1.45; }

/* ------------------------------------------------------------------- table */
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table td { padding: 9px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.pp-table tr:first-child td { border-top: none; }

.pp-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  color: var(--text-1);
  padding-right: var(--s-3);
}
.pp-roles {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500; font-size: .68rem;
  color: var(--text-3);
  margin-top: 2px;
  letter-spacing: .01em;
}
.pp-link-cell { text-align: right; white-space: nowrap; }
.pp-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .03em;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border: 1px solid var(--primary-tint);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pp-link:hover { background: var(--primary-tint); color: var(--text-1); transform: translateY(-1px); }
.pp-link i { font-size: .85rem; }

/* a small group label row splitting schedulers from personal calendars */
.pp-group td {
  border-top: 1px solid var(--border);
  padding: 10px 0 4px;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}

/* hint row (e.g. airline crew portals) when no named scheduler fits the job */
.pp-note {
  margin: 0 0 var(--s-2);
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.5;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pp-accent, var(--primary));
  border-radius: var(--r-2);
  padding: 8px 12px;
}

/* ------------------------------------------------------------------ footer */
.pp-foot {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong);
}
.pp-foot a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .85rem;
  color: var(--primary-deep);
}
.pp-foot a:hover { color: var(--primary); }
.pp-foot i { font-size: 1rem; }

/* beak pointing back at the hovered tile/chip */
.pp-beak {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}