/* ============================================================
   THE HIDEOUT — staff.html
   Org-chart roster, ported from the live page and re-skinned
   onto v2 tokens. Loaded AFTER styles.css.
   (--b is a per-band accent set inline by staff.js.)
   ============================================================ */

.staff-loading { font-family: var(--mono); color: var(--fg-dim); font-size: 13px; letter-spacing: 0.04em; }

/* ---------- org chart ---------- */
.org { max-width: 1160px; margin: 0 auto; }

.lead {
  border: 1px solid var(--b, var(--line));
  border-radius: 16px;
  padding: 18px 20px;
  background: color-mix(in oklch, var(--b, var(--aqua)) 8%, var(--surface-2));
}
.lead .lbl {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--b, var(--aqua-bright));
  margin-bottom: 14px;
}
.lrow { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.mgmt-cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: flex-start; }
.mgmt-col .cl {
  font-family: var(--mono); font-size: 9px; color: var(--fg-dim);
  text-align: center; margin-bottom: 6px; letter-spacing: 0.08em;
}

.conn { width: 2px; height: 24px; background: var(--line-strong); margin: 0 auto; }

.cell { position: relative; }
.cell.md { height: 90px; width: 100%; }
.cell.lg { height: 84px; width: 300px; max-width: 100%; }
.cell.xl { height: 104px; width: 320px; max-width: 100%; }
.cell > .oc { position: absolute; inset: 0; overflow: hidden; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }

.oc {
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in oklch, var(--surface-2) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
}
.cell > .oc:hover {
  inset: auto; top: 0; left: 0; right: 0; height: auto; min-height: 100%;
  overflow: visible; z-index: 50;
  background: var(--surface-2);
  border-color: color-mix(in oklch, var(--aqua) 50%, var(--line));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
  transform: translateY(-3px);
}
.cell > .oc:hover .oc-name,
.cell > .oc:hover .oc-role,
.cell > .oc:hover .oc-handle { white-space: normal; overflow: visible; }

.oc-av {
  border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; object-fit: cover;
  background: linear-gradient(135deg, color-mix(in oklch, var(--aqua) 30%, var(--surface-2)), var(--surface-2));
}
.oc-av.xl { width: 78px; height: 78px; font-size: 27px; }
.oc-av.lg { width: 56px; height: 56px; font-size: 20px; }
.oc-av.md { width: 44px; height: 44px; font-size: 15px; }
.oc-av.vac { background: transparent; border: 1px dashed var(--line-strong); }
.oc.vacant { border-style: dashed; opacity: .55; }

.oc-body { min-width: 0; flex: 1; }
.oc-role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--aqua);
}
.oc-name {
  font-family: var(--display); font-weight: 650; font-size: 15px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-av.xl + .oc-body .oc-name { font-size: 19px; }
.oc-handle {
  color: var(--fg-dim); font-family: var(--mono); font-size: 11px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-badges { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.oc-badge {
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg-muted);
}
.oc-dot { position: absolute; top: 10px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim); z-index: 2; }
.oc.online .oc-dot { background: #4ade80; box-shadow: 0 0 6px #4ade80; }

.staffbox {
  border: 1px solid color-mix(in oklch, #ef7ea8 30%, var(--line));
  border-radius: 16px;
  padding: 8px 22px 22px;
  background: color-mix(in oklch, #ef7ea8 4%, transparent);
}
.staffbox > .hdr {
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: #ef7ea8; padding: 14px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.grp { margin-top: 18px; }
.grp .glbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 10px; display: flex; gap: 10px; flex-wrap: wrap;
}
.grp .glbl .note { color: var(--fg-dim); opacity: .75; text-transform: none; letter-spacing: .02em; }
.gridcards { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.faccols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.faccol .fl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: #7c8bff; margin-bottom: 8px; text-align: center; }

@media (max-width: 900px) {
  .gridcards { grid-template-columns: repeat(2, 1fr); }
  .faccols { grid-template-columns: 1fr; }
  .mgmt-cols { gap: 24px; }
}
@media (max-width: 560px) { .gridcards { grid-template-columns: 1fr; } }

/* ---------- recruiting CTA ---------- */
.staff-cta {
  margin-top: 40px;
  border: 1px solid var(--aqua-line);
  border-radius: var(--radius);
  padding: 28px clamp(20px, 3vw, 32px);
  background: var(--surface);
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.08);
}
.staff-cta__kicker {
  font-family: var(--mono); color: var(--aqua); margin-bottom: 10px;
  letter-spacing: 0.2em; font-size: 11px; text-transform: uppercase;
}
.staff-cta h3 { font-size: 22px; margin: 0 0 6px; }
.staff-cta p { font-family: var(--mono); color: var(--fg-dim); margin: 0; font-size: 12.5px; letter-spacing: 0.02em; }