.conn-combo { position: relative; }
.conn-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  max-height: 14rem; overflow-y: auto; margin: 0; padding: 0;
}
.conn-suggest .list-group-item { cursor: pointer; }
.conn-suggest .list-group-item.active,
.conn-suggest .list-group-item:hover { background: #dc3545; color: #fff; border-color: #dc3545; }

.conn-canvas {
  width: 100%; height: 85vh; min-height: 680px;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: .5rem;
  background: rgba(0, 0, 0, 0.35);
}

.conn-chain { list-style: none; padding: 0; margin: 0; }
.conn-chain .conn-band {
  display: inline-block; padding: .35rem .75rem; border-radius: .4rem;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600;
}
.conn-chain .conn-band a { color: #fff; text-decoration: none; }
.conn-chain .conn-band a:hover { text-decoration: underline; }
.conn-chain .conn-years { font-weight: 400; opacity: .7; margin-left: .35rem; font-size: .85em; }
.conn-chain .conn-via { padding: .25rem 0 .25rem 1.25rem; color: #ccc; border-left: 2px solid #dc3545; margin-left: 1rem; }
.conn-steps { font-size: 1.25rem; color: #fff; margin-bottom: .75rem; }

.conn-legend { font-size: .85rem; color: #bbb; margin: 0 0 .75rem; }
.conn-legend .conn-swatch {
  display: inline-block; width: 1.75rem; vertical-align: middle; margin-right: .3rem;
  border-top: 3px solid #adb5bd;
}

/* ---- readable legend ---- */
.conn-legend-details { color: #bbb; font-size: .9rem; margin: 0 0 .75rem; }
.conn-legend-details summary { cursor: pointer; padding: .4rem 0; color: #e3b04b; }
.conn-legend-details p { margin-top: .25rem; }
@media (hover: hover) { .conn-tap-hint { display: none; } }
@media (hover: none) { .conn-hover-hint { display: none; } }

/* ---- touch-friendly controls ---- */
.conn-depth .btn, .conn-tap { min-height: 44px; min-width: 3rem; }
.conn-only-narrow { display: none; }

/* ---- list rows (tree outline + most-connected list) ---- */
.conn-tree-head { display: flex; flex-direction: column; gap: .25rem; margin: .25rem 0 .5rem; font-size: 1.15rem; }
.conn-tree-kicker { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #aaa; }
.conn-ring-title { margin-top: 1.1rem; }
.conn-outline-group {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: #e3b04b; padding: .85rem 0 .2rem;
}
.conn-outline-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.conn-outline-main {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: #fff;
  padding: .65rem .25rem; min-height: 48px; display: block;
}
.conn-outline-main:hover, .conn-outline-main:focus-visible { background: rgba(255, 255, 255, 0.08); }
.conn-outline-name { font-weight: 600; font-size: 1.05rem; }
.conn-outline-main .conn-years { font-weight: 400; opacity: .7; margin-left: .4rem; font-size: .85em; }
.conn-outline-people { display: block; font-size: .85rem; color: #aaa; margin-top: .1rem; }
.conn-outline-link {
  align-self: center; padding: .65rem .85rem; min-height: 44px; display: flex; align-items: center;
  color: #e3b04b; text-decoration: none; font-size: .9rem;
}

/* ---- fullscreen graph + info card (phones) ---- */
.conn-canvas.conn-fullscreen {
  position: fixed; inset: 0; z-index: 1050; width: 100vw; height: 100vh; height: 100dvh;
  min-height: 0; border-radius: 0; border: 0; background: #0b0d0e;
}
body.conn-fs-open { overflow: hidden; }
.conn-fs-close { position: fixed; top: .75rem; right: .75rem; z-index: 1060; min-height: 44px; }
.conn-card {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1060;
  background: #1d2124; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: .6rem;
  padding: .9rem 1rem; color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.5);
}
.conn-card-title { font-size: 1.1rem; margin-bottom: .35rem; }
.conn-card-line { color: #ccc; font-size: .9rem; margin-bottom: .35rem; }
.conn-card-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.conn-card-actions .btn { min-height: 44px; flex: 1; }

@media (max-width: 767.98px) {
  .conn-pane .btn, .conn-pane .form-control { min-height: 44px; }
  .conn-only-narrow { display: inline-block; }
  .conn-canvas { height: 70vh; min-height: 360px; }
}
.conn-fs-hint {
  position: fixed; top: .75rem; left: .75rem; right: 8.5rem; z-index: 1060;
  color: #ddd; font-size: .8rem; line-height: 1.25; text-shadow: 0 0 4px #000;
}
.conn-wide { max-width: 1800px; }
.conn-zoom .btn { min-width: 2.75rem; }
@media (max-width: 767.98px) { .conn-zoom { display: none; } }