@use 'mixins' as *;

// ---------- Graph view (the link map) ----------

// desktop: the map owns the space beside the sidebar the way the open
// book does — a full surface with its toolbar floating over it.
// (The page transition only fades, so no transform steals the
// fixed positioning.)
.graph-stage {
  position: fixed;
  inset: 0 0 0 var(--sidebar-w);
  transition: left 0.22s ease;
  z-index: 1;
  background: var(--bg);
}

.graph-canvas-wrap { position: absolute; inset: 0; }

.graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; // the map owns drags and pinches, not the page
}

// top-right corner of the map: the button row, with the display menu
// folding out under it
.graph-tools {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
}

.graph-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);

  // the display button while its menu is open, the ⋮ menu's way
  .panel-icon-btn.open { color: var(--text); background: var(--surface-2); }
}

// the collapsible display menu, hinged under the buttons
.graph-menu {
  @include dropdown-panel($z: 20, $overflow: visible);
  right: 0;
  min-width: 216px;

  .graph-menu-row {
    @include menu-row(8px 10px, 14px);
    justify-content: space-between;
    text-align: left;

    &:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  }
}

// the switch a menu row wears: a pill with a knob that rides across
.graph-switch {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.15s;

  .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease;
  }

  &.on {
    background: var(--accent);

    .knob { transform: translateX(14px); }
  }
}

.graph-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;

  .banner { width: min(520px, 100%); }
}

// the top bar is in the flow here, so the map folds into a panel of
// the page instead of covering the screen
@media (max-width: 900px) {
  .graph-stage { position: static; inset: auto; background: transparent; }

  .graph-canvas-wrap {
    position: relative;
    height: min(66dvh, 560px);
    margin: 20px 0 28px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
  }

  .graph-tools { top: 10px; right: 10px; }

  .graph-state { position: static; display: block; padding: 8px 0 32px; }
}