/* Orbit & Volt — Tesla & SpaceX Org Chart (/org-chart/)
   Visual language matches site/styles.css: dark #05070d, blue accents, system fonts.
   Public page at /org-chart/ (indexed; listed in sitemap). */

:root{
  --bg:#05070d; --bg2:#0c1222; --panel:#141c30; --line:#2a3a5c;
  --text:#f4f7ff; --muted:#b8c4dc; --soft:#c9d4ea; --blue:#2f7bff; --blue2:#7eb0ff; --gold:#d9b46a;
  --radius:16px; --max:1140px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --node-h:36px;
  --match-gap:10px;       /* vertical gap between leaves in a matchup */
  --branch-gap:32px;      /* vertical gap between Robots/Cars/Energy (and SX branches) */
  --gutter:44px;          /* horizontal space leaf↔mid for connector elbows */
  --col-w-leaf:196px;     /* slightly wider outer leaf column */
  --col-w-mid:154px;
  --col-w-cat:118px;
  --spine-w:170px;
  --leaf-stack-gap:32px;  /* vertical gap between match groups in leaf col */
  --line-color:rgba(126,176,255,.72);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:auto;overflow-y:auto}
body{margin:0;font-family:var(--font);color:var(--text);font-size:1.0625rem;line-height:1.55;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(47,123,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(47,123,255,.08), transparent 60%),
    var(--bg);
  min-height:100vh;display:flex;flex-direction:column;
  /* body/html are the ONLY scrollports — no nested bracket scroll */}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 50%, #cfe0ff 50%, transparent 51%);}
a{color:var(--blue2)} a:hover{color:#8db8ff}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:10}

/* header — match O&V site */
.site-header{padding:18px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:.2px;font-size:1.25rem}
.brand img{width:44px;height:44px;border-radius:50%}
.brand .amp{color:var(--blue)}
.social{display:flex;gap:18px;font-size:1rem}
.social a{color:var(--muted);text-decoration:none}
.social a:hover{color:var(--text)}

main{flex:1 0 auto;display:flex;flex-direction:column}

.intro{padding-top:8px;padding-bottom:12px}
.eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);
  border:1px solid var(--line);background:rgba(47,123,255,.08);padding:6px 10px;border-radius:999px;margin:0 0 12px}
h1{font-size:clamp(1.85rem,4vw,2.75rem);line-height:1.1;margin:0 0 8px;letter-spacing:-.02em}
h1 .accent{color:var(--blue)}
.lede{font-size:1.0625rem;color:var(--soft);margin:0 0 4px;max-width:42em}
.hint{font-size:.875rem;color:var(--muted);margin:0}

/* ===== Bracket viewport: NOT a scrollport (html/body scroll) ===== */
.bracket-viewport{
  flex:none;
  overflow:visible;
  padding:8px 0 36px;
  cursor:default;
  outline:none;
}
.bracket-viewport:focus-visible{box-shadow:inset 0 0 0 2px rgba(47,123,255,.5)}

.bracket-stage{
  position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  gap:12px;
  min-width:1860px; /* wide stage; page scrolls horizontally */
  width:max-content;
  padding:24px 56px 56px;
  margin:0 auto;
}

.bracket-lines{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0;
}
.bracket-lines path{
  fill:none;stroke:var(--line-color);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;
}
.bracket-lines path.tesla-line{stroke:rgba(255,120,120,.88)}
.bracket-lines path.spacex-line{stroke:rgba(140,190,255,.90)}

/* Sides: stack of branch rows */
.side{
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:var(--branch-gap);position:relative;z-index:1;
}
.branch{
  display:flex;align-items:stretch;gap:0;
}
.side-tesla .branch{flex-direction:row}          /* leaves → mids → cat */
.side-spacex .branch{flex-direction:row}         /* cat → mids → leaves */

.col{display:flex;flex-direction:column;justify-content:flex-start;position:relative;gap:0}
.col-leaves{width:var(--col-w-leaf);gap:var(--leaf-stack-gap)}
.col-mids{width:var(--col-w-mid);gap:var(--leaf-stack-gap);justify-content:flex-start}
.col-cats{width:var(--col-w-cat);justify-content:flex-start;padding-top:4px}

/* Gutters between columns for elbow lines */
.side-tesla .col-leaves{margin-right:var(--gutter)}
.side-tesla .col-mids{margin-right:var(--gutter)}
.side-tesla .col-cats{margin-right:18px}
.side-spacex .col-cats{margin-left:18px}
.side-spacex .col-mids{margin-left:var(--gutter)}
.side-spacex .col-leaves{margin-left:var(--gutter)}

.match{
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:var(--match-gap);flex:0 0 auto; /* do not stretch/pack into neighbors */
}
.match-quad,.match-triple{gap:9px}
.match-si{gap:11px} /* SI has 5 leaves — extra air */

/* Tesla: roomier branch stack (mirror SpaceX spacing approach) */
.side-tesla{
  gap:80px; /* solid branch separation with denser leaf stacks */
}

/* Tesla Cars: dense leaves (Passenger×4 + FSD licensing + Truck + Robotaxi) */
.side-tesla .branch[data-branch="cars"] .col-leaves{
  gap:28px;
}
.side-tesla .branch[data-branch="cars"] .col-mids{
  gap:28px;
}
.side-tesla .branch[data-branch="cars"]{
  /* Hard clearance: Dojo / Digital Optimus must not collide with Model 3 */
  margin-top:72px;
  padding-top:8px;
  padding-bottom:20px;
}
.side-tesla .branch[data-branch="robots"]{
  padding-bottom:56px;
  margin-bottom:8px;
}
.side-tesla .branch[data-branch="cars"] .match[data-mid="service"],
.side-tesla .branch[data-branch="energy"] .match[data-mid="trading"]{
  margin-top:4px;
}

/* Tesla Energy: clear Cars→Energy; open Storage / Generation / Charging */
.side-tesla .branch[data-branch="energy"]{
  margin-top:28px; /* mirror Starlink push after tall Services */
}
.side-tesla .branch[data-branch="energy"] .col-leaves{
  gap:36px;
}
.side-tesla .branch[data-branch="energy"] .col-mids{
  gap:28px;
}

/* Tesla Autonomy: Dojo clear of FSD stack + Humanoid leaves above */
.side-tesla .branch[data-branch="robots"] .col-leaves{
  gap:36px;
}
.side-tesla .branch[data-branch="robots"] .col-mids{
  gap:28px;
}
.side-tesla .branch[data-branch="robots"] .match[data-mid="autonomy-ai"]{
  gap:16px; /* FSD stack ↔ Dojo / training */
}
.side-tesla .branch[data-branch="robots"] .match[data-mid="autonomy-ai"] .node.leaf{
  margin-top:2px;
}


/* SpaceX Services: keep Commercial (cargo) clear of SI (Grok) */
.side-spacex .branch[data-branch="services"] .col-leaves{
  gap:36px; /* between Government / Commercial / SI match groups */
}
.side-spacex .branch[data-branch="services"] .col-mids{
  gap:28px; /* keep mid nodes aligned with roomier leaf stack */
}
.side-spacex .branch[data-branch="services"] .match[data-mid="si"]{
  margin-top:6px;
}

/* SpaceX: Services (SI/Compute) must clear Starlink (residential) */
.side-spacex{
  gap:56px; /* roomier between Launch / Services / Starlink with denser stacks */
}
.side-spacex .branch[data-branch="starlink"]{
  margin-top:36px; /* clear SI Compute / denser Government */
}
.side-spacex .branch[data-branch="services"]{
  padding-bottom:20px;
}
.side-spacex .branch[data-branch="launch"]{
  padding-bottom:16px;
}
.side-spacex .branch[data-branch="launch"] .col-leaves,
.side-spacex .branch[data-branch="services"] .col-leaves{
  gap:36px;
}
.side-spacex .branch[data-branch="launch"] .col-mids,
.side-spacex .branch[data-branch="services"] .col-mids{
  gap:28px;
}

/* Nodes */
.node{
  display:block;width:100%;min-height:var(--node-h);
  padding:7px 10px;margin:0;
  font:700 .8125rem/1.25 var(--font);text-align:left;
  color:#f7f9ff;background:linear-gradient(180deg,rgba(28,40,68,.98),rgba(18,26,44,.98));
  border:1px solid #3a4d74;border-radius:10px;
  cursor:pointer;position:relative;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.node:hover,.node:focus-visible{
  border-color:rgba(47,123,255,.65);
  box-shadow:0 0 0 3px rgba(47,123,255,.22);
  outline:none;
}
.node:active{transform:translateY(1px)}
/* Leaf / mid / cat: brushed metallic silver + dark text; centered labels.
   Center TESLA|SPACEX spine (.spine-card / .spine-*) stays dark — unchanged below. */
.node.leaf,.node.mid,.node.cat{
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  color:#12151c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 38%, rgba(0,0,0,.10) 100%),
    linear-gradient(90deg, #9aa3b0 0%, #c5ccd6 18%, #e2e6ec 42%, #b8c0cc 62%, #d5dae2 82%, #a8b1be 100%);
  border:1px solid #7a8494;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.node.leaf:hover,.node.leaf:focus-visible,
.node.mid:hover,.node.mid:focus-visible,
.node.cat:hover,.node.cat:focus-visible{
  color:#0a0c10;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, transparent 38%, rgba(0,0,0,.12) 100%),
    linear-gradient(90deg, #8f98a6 0%, #bbc3ce 18%, #dce1e8 42%, #adb6c3 62%, #cdd3dc 82%, #9aa3b0 100%);
}
.node.mid{font-size:.8125rem}
.node.cat{
  font-size:.9375rem;font-weight:750;letter-spacing:.02em;
  min-height:48px;
}
/* Services cat accent: soft metallic rim (not blue glow) so connectors stay clear */
.node.cat-spine{
  border-color:#5e6775;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 18px rgba(160,170,185,.28),
    0 1px 2px rgba(0,0,0,.25);
}
.side-tesla .node:hover,.side-tesla .node:focus-visible{
  border-color:rgba(232,33,39,.55);box-shadow:0 0 0 3px rgba(232,33,39,.18);
}


/* All bracket nodes (leaf/mid/cat) stay centered on both sides */
.side-tesla .col-leaves .node,
.side-tesla .col-mids .node,
.side-tesla .col-cats .node,
.side-spacex .col-leaves .node,
.side-spacex .col-mids .node,
.side-spacex .col-cats .node{
  text-align:center;justify-content:center;align-items:center;
}

/* Center spine */
.spine{
  width:var(--spine-w);flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;position:relative;z-index:2;padding:0 6px;align-self:center;
}
.spine-card{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:20px 14px;
  background:linear-gradient(180deg,rgba(28,40,68,.98),rgba(16,24,42,.98));
  border:1px solid #3a4d74;border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
  font-weight:800;letter-spacing:.06em;font-size:.9375rem;
}
.spine-tesla{color:#ff6b6b}
.spine-spacex{color:var(--blue2)}
.spine-bar{color:var(--muted);font-weight:400}
.spine-sub{margin:0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Detail panel */
.panel-backdrop{
  position:fixed;inset:0;background:rgba(5,7,13,.62);backdrop-filter:blur(2px);
  z-index:40;
}
.detail-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);
  background:linear-gradient(180deg,#162038,#101828);
  border-left:1px solid #3a4d74;
  z-index:50;padding:22px 22px 28px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:-20px 0 60px rgba(0,0,0,.45);
  overflow:auto;
}
.detail-panel[hidden],.panel-backdrop[hidden]{display:none !important}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panel-path{margin:0 0 4px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#c5d0e8}
.panel-head h2{margin:0;font-size:1.375rem;letter-spacing:-.02em;line-height:1.2}
.panel-close{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:#1a2744;color:#f7f9ff;font-size:1.5rem;line-height:1;cursor:pointer;flex-shrink:0;
}
.panel-close:hover,.panel-close:focus-visible{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(47,123,255,.25)}
.panel-fields{margin:0;display:grid;gap:12px}
.field{background:rgba(28,40,68,.88);border:1px solid #3a4d74;border-radius:12px;padding:12px 14px}
.field dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin:0 0 4px}
.field dd{margin:0;color:#f4f7ff;font-size:1rem;min-height:1.4em}
.placeholder{color:#c5d0e8;font-style:italic}
.panel-note{margin:auto 0 0;font-size:.8125rem;color:var(--muted)}
body.panel-open{overflow:hidden}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:22px 0 28px;color:#b3bfd6;font-size:.9375rem;line-height:1.6}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.site-footer a{color:#b3bfd6}
.site-footer nav{display:flex;gap:8px 18px;flex-wrap:wrap}

@media (max-width:720px){
  .social{display:none}
  .bracket-stage{padding:16px 16px 28px}
  :root{
    --col-w-leaf:156px;
    --col-w-mid:134px;
    --col-w-cat:100px;
    --spine-w:136px;
    --gutter:32px;
    --branch-gap:24px;
    --match-gap:8px;
    --leaf-stack-gap:16px;
  }
  .node{font-size:.75rem;padding:6px 8px}
  .spine-card{font-size:.8125rem;padding:14px 10px}
}
@media (prefers-reduced-motion:no-preference){
  a,.node,.panel-close{transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
}