:root {
  --projection-ink: #f7f9fc;
  --projection-muted: #c2cbd7;
  --projection-panel: #111821;
  --projection-panel-2: #18212c;
  --projection-line: #445264;
  --projection-accent: #ff873f;
  --projection-accent-soft: #ffbb8f;
  --projection-canonical: #9ca9b9;
  --projection-descendant: #dce7f3;
}

.branch-projection {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--projection-ink);
}

.branch-projection[hidden] { display: none; }

.branch-projection-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(3, 7, 12, .78);
  backdrop-filter: blur(10px);
  cursor: default;
}

.branch-projection-card {
  position: relative;
  width: min(1480px, 100%);
  height: min(900px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #536173;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(24, 33, 44, .99), rgba(10, 15, 22, .99));
  box-shadow: 0 34px 110px rgba(0, 0, 0, .78);
}

.branch-projection-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid #364252;
}

.branch-projection-header span,
.branch-projection-visual-header span {
  color: var(--projection-accent-soft);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.branch-projection-header h2 {
  margin: 4px 0 3px;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
}

.branch-projection-header p {
  margin: 0;
  color: var(--projection-muted);
  font-size: 12px;
  line-height: 1.4;
}

.branch-projection-header > button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #526073;
  border-radius: 10px;
  background: #212b38;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
}

.branch-projection-header > button:hover,
.branch-projection-header > button:focus-visible {
  border-color: var(--projection-accent);
  outline: none;
}

.branch-projection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid #34404f;
  background: #101720;
}

.branch-projection-notice p {
  margin: 0;
  color: #eef2f7;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.branch-projection-notice > div {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.branch-projection-notice button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #475568;
  border-radius: 8px;
  background: #202a36;
  color: #edf2f8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}

.branch-projection-notice button:hover,
.branch-projection-notice button:focus-visible {
  border-color: var(--projection-accent);
  outline: none;
}

.branch-projection-notice .branch-projection-return {
  border-color: #8d542f;
  background: #3a2418;
  color: #ffd7bd;
}

.branch-projection-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 280px;
}

.branch-projection-candidates,
.branch-projection-evidence {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: rgba(13, 19, 27, .78);
}

.branch-projection-candidates { border-right: 1px solid #34404f; }
.branch-projection-evidence { border-left: 1px solid #34404f; }

.branch-projection-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.branch-projection-section-heading h3 {
  margin: 0;
  color: #f5f7fa;
  font-size: 12px;
}

.branch-projection-section-heading > span {
  color: var(--projection-accent-soft);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.branch-projection-candidates > p,
.branch-projection-evidence > p {
  margin: 7px 0 12px;
  color: var(--projection-muted);
  font-size: 10px;
  line-height: 1.5;
}

#branchProjectionCandidates {
  display: grid;
  gap: 7px;
}

.branch-candidate {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid #3c495a;
  border-radius: 10px;
  background: #19222d;
  color: #f4f7fa;
  text-align: left;
  cursor: pointer;
}

.branch-candidate strong,
.branch-candidate small,
.branch-candidate em { display: block; }
.branch-candidate strong { font-size: 11px; }
.branch-candidate small { margin-top: 3px; color: #bfc8d4; font-size: 8px; line-height: 1.35; }
.branch-candidate em { color: #9fabb9; font-size: 8px; font-style: normal; font-weight: 800; }

.branch-candidate:hover,
.branch-candidate:focus-visible {
  border-color: #7a8899;
  background: #222e3b;
  outline: none;
}

.branch-candidate.is-selected {
  border-color: var(--projection-accent);
  background: linear-gradient(140deg, #3a2519, #1b2430);
  box-shadow: inset 0 0 0 1px rgba(255, 135, 63, .2);
}

.branch-candidate:disabled {
  border-style: dashed;
  color: #a7b1be;
  cursor: not-allowed;
  opacity: .72;
}

.branch-projection-visual {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(circle at 50% 20%, #253142, #111821 60%, #0b1118);
}

.branch-projection-visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid #364252;
}

.branch-projection-visual-header strong {
  display: block;
  margin-top: 2px;
  color: #f5f7fa;
  font-size: 12px;
}

.branch-projection-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.branch-projection-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #c6cfda;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.branch-projection-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--projection-canonical);
}

.branch-projection-legend i.is-alternative { background: var(--projection-accent); }
.branch-projection-legend i.is-descendant { background: #d5e6f7; }

.branch-projection-stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.branch-projection-stage svg {
  display: block;
  min-width: 100%;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.projection-edge {
  fill: none;
  stroke: #90a0b2;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.projection-edge.is-subtree { stroke: #7c8c9e; stroke-width: 2; }
.projection-edge.is-canonical-retired { stroke-dasharray: 8 7; opacity: .45; }
.projection-edge.is-alternative { stroke: var(--projection-accent); stroke-width: 4; opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 135, 63, .7)); transition: opacity .22s ease; }
.projection-edge.is-alternative.is-visible { opacity: 1; }

.projection-node rect {
  fill: #1d2733;
  stroke: #5a6879;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.projection-node image { opacity: .96; }
.projection-node .projection-name { fill: #fff; font-size: 14px; font-weight: 850; }
.projection-node .projection-team { fill: #bac5d2; font-size: 9px; font-weight: 700; }
.projection-node.is-selected rect { fill: #3a2518; stroke: var(--projection-accent); stroke-width: 3; }
.projection-node.is-target rect { fill: #382419; stroke: var(--projection-accent); stroke-width: 3; }
.projection-node.is-canonical-parent rect { fill: #202a36; stroke: var(--projection-canonical); }
.projection-node.is-ghost { opacity: .28; }
.projection-node.is-ghost rect { fill: transparent; stroke-dasharray: 7 5; }
.projection-node.is-ghost image { display: none; }

.projection-node .projection-badge {
  fill: #0f151d;
  stroke: #627184;
  stroke-width: 1;
}

.projection-node .projection-badge-text {
  fill: #d9e1ea;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.branch-projection-status {
  min-height: 34px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid #34404f;
  color: #c9d2de;
  font-size: 9px;
  line-height: 1.4;
}

#branchProjectionEvidenceRows {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#branchProjectionEvidenceRows li {
  padding: 9px;
  border: 1px solid #3b4858;
  border-radius: 9px;
  background: #18212b;
}

#branchProjectionEvidenceRows strong,
#branchProjectionEvidenceRows span { display: block; }
#branchProjectionEvidenceRows strong { color: #f2f5f8; font-size: 10px; }
#branchProjectionEvidenceRows span { margin-top: 3px; color: #bdc7d3; font-size: 9px; line-height: 1.4; }

#branchProjectionSources {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

#branchProjectionSources a {
  color: #ffb485;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

#branchProjectionSources a:hover,
#branchProjectionSources a:focus-visible { color: #fff; outline: none; text-decoration: underline; }

.branch-projection-order-note {
  padding: 9px;
  border: 1px solid #68523e;
  border-radius: 8px;
  background: #241b15;
  color: #e8d3c4 !important;
}

.worked-under-reframe {
  flex: 0 0 auto;
  min-width: 27px;
  min-height: 25px;
  padding: 0 6px;
  border: 0;
  border-left: 1px solid #46566a;
  background: #293748;
  color: #ffbd93;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.worked-under-reframe:hover,
.worked-under-reframe:focus-visible { background: #3b2a20; color: #fff; outline: none; }

.coach-season-key {
  margin: 0;
  padding: 7px 10px;
  border-top: 1px solid #303a47;
  background: #111820;
  color: #c8d1dc;
  font-size: 8px;
  line-height: 1.4;
}

.coach-season-key strong { color: #ffb88b; }

.has-branch-projection { overflow: hidden; }

@media (max-width: 1100px) {
  .branch-projection-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .branch-projection-evidence { grid-column: 1 / -1; max-height: 210px; border-top: 1px solid #34404f; border-left: 0; }
  .branch-projection-card { height: calc(100dvh - 24px); }
}

@media (max-width: 720px) {
  .branch-projection { padding: 0; place-items: stretch; }
  .branch-projection-card { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .branch-projection-header { padding: calc(14px + env(safe-area-inset-top)) 14px 12px; }
  .branch-projection-header h2 { font-size: 22px; }
  .branch-projection-header p { font-size: 10px; }
  .branch-projection-notice { align-items: flex-start; padding: 9px 12px; }
  .branch-projection-notice > div { display: grid; grid-template-columns: 1fr 1fr; }
  .branch-projection-notice .branch-projection-return { grid-column: 1 / -1; }
  .branch-projection-layout { display: flex; flex-direction: column; overflow: auto; }
  .branch-projection-candidates,
  .branch-projection-evidence { flex: 0 0 auto; max-height: none; overflow: visible; border: 0; border-bottom: 1px solid #34404f; }
  #branchProjectionCandidates { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .branch-candidate { flex: 0 0 205px; scroll-snap-align: start; }
  .branch-projection-visual { flex: 0 0 480px; order: 2; min-height: 480px; }
  .branch-projection-evidence { order: 3; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .branch-projection-legend { display: none; }
  .branch-projection-stage svg { min-width: 780px; }
}

@media (prefers-reduced-motion: reduce) {
  .projection-edge.is-alternative { transition: none; }
}