.staff-map { border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-card); overflow: hidden; }
.staff-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.staff-map-toolbar .page-kicker { margin-bottom: 9px; font-size: 9px; }
.staff-map-toolbar h2 { font: 700 25px/1.2 var(--font-display); letter-spacing: -0.8px; }
.staff-map-subtitle { color: var(--color-muted-foreground); font-size: 11px; margin-top: 9px; }
.staff-map-key { padding: 0 26px 18px; border-bottom: 1px solid var(--color-border); }
.staff-map-key .font-display { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.4px; }
.staff-map-canvas { overflow: hidden; background-color: var(--color-background); background-image: radial-gradient(var(--color-border) 0.7px, transparent 0.7px); background-size: 20px 20px; }
.staff-map-svg { display: block; max-width: 100%; }
.staff-map:not(.staff-map-compact) .staff-map-svg { cursor: grab; }
.staff-map:not(.staff-map-compact) .staff-map-svg:active { cursor: grabbing; }
.staff-map-zoom { display: flex; border: 1px solid var(--color-border); border-radius: 5px; padding: 3px; flex-shrink: 0; }
.staff-map-zoom[hidden] { display: none; }
.staff-map-zoom button { height: 30px; min-width: 32px; border-radius: 3px; font: 500 14px/1 var(--font-body); cursor: pointer; }
.staff-map-zoom button:hover { background: var(--color-muted); }
.staff-map-edge { fill: none; stroke-width: 1.2; opacity: 0.28; transition: opacity 120ms, stroke-width 120ms; }
.staff-map-edge.is-highlighted { opacity: 0.85; stroke-width: 2; }
.staff-map-group-label { fill: var(--color-muted-foreground); font: 700 9px var(--font-body); letter-spacing: 1.1px; }
.staff-map-coach { cursor: pointer; outline: none; }
.staff-map-card { fill: var(--color-card); stroke: var(--color-border); stroke-width: 1; filter: drop-shadow(0 2px 2px #15213a05); }
.staff-map-coach:hover .staff-map-card { stroke: var(--color-primary); }
.staff-map-focus { fill: none; stroke: transparent; stroke-width: 2; pointer-events: none; }
.staff-map-coach:focus-visible .staff-map-focus { stroke: var(--color-primary); }
.staff-map-portrait-ring { fill: var(--color-muted); stroke-width: 2; }
.staff-map-initials { fill: var(--color-muted-foreground); font: 700 12px var(--font-body); text-anchor: middle; }
.staff-map-name { fill: var(--color-foreground); font: 500 14px var(--font-body); }
.staff-map-role { fill: var(--color-muted-foreground); font: 400 11px var(--font-body); }
.staff-map-head .staff-map-card { fill: #15213a; stroke: #304971; filter: drop-shadow(0 5px 8px #15213a15); }
.staff-map-head .staff-map-name { fill: #fff; font-weight: 700; }
.staff-map-head .staff-map-role { fill: #c3d1e9; }
@media (max-width: 899px) {
  .staff-map-toolbar { padding: 20px 18px 16px; }
  .staff-map-toolbar h2 { font-size: 21px; }
  .staff-map-key { padding-inline: 18px; }
  .staff-map-canvas { max-height: 720px; overflow-y: auto; }
}
.staff-map-mobile-hint { display: none; }
.staff-map-compact .staff-map-mobile-hint { display: block; padding: 10px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-muted-foreground); font-size: 10px; }

.dark .staff-map-edge { opacity: 0.5; }
.dark .staff-map-edge.is-highlighted { opacity: 1; }